Drupal 7 - Setting Up Piecemaker 3D Slider with InnoCompany Theme

Submitted by nigel on Saturday 8th June 2013

Subsequent to my earlier blog on installing and setting up the commercial InnoCompany Drupal 7 theme, it is now time to do something useful - set up the Piecemaker 3D slider which is based on Flash animation, with an XML configuration file. Thankfully a lot of the work has already been bundled into the InnoCompany theme and there isn't that much to do. Principally the slider images, captions and links are included in theme configuration, and there are 10 available placeholders which means the carousel may have up to 10 images. Once this has been saved as theme settings it is retrieved in template.php->icomp_get_slider_html()->icomp_prepare_piecemaker() and the XML file is written out for the Flash file to process.


Go to admin/appearance/settings/icompany and scroll down to the Slider setting. Change the selection to Piecemaker Slider


Click on the next tab down and start populating each image in the carousel. Note well that you need to make your images 1050px by 400px and not the 1170x450px as prompted. The dimensions suggested are for the other slider types included in the theme that span the entire web page width. Piecemaker 3D needs to sit inside its own div containers. Furthermore, the ratios are slightly different as I discovered to my cost. Now the fields - I copied my images to a directory below the standard image area - /sites/default/images/slider. The target link for the image should be a valid landing page, and ideally pertinent to the image you are showing. In my case, it's the portfolio narrative item for the experience the image is showing.


If you now save your carousel settings then navigate to your homepage (remember to flush your browser's cache also) you should see your completed slider. However, there is a bug we still need to deal with...


Clicking on Info shows the heading and caption associated with the image. However, there is a bug in the previously mentioned template.php file - when it writes out the XML file it uses the H2 tag for the heading text and not H1. This can be fixed by either editing the template file or the css file. I elected to edit the css file...

Change the /sites/all/themes/icompany/sliders/piecemaker/piecemaker.css file
/* CSS Document */
H2 {
        font-family: Verdana;
        font-style: bold;
        font-weight: normal;
        color: #222222;
        display: block;
        font-size: 20px;
        margin-bottom: 10px;
        line-height: 30;
        text-align: left;
        letter-spacing: 0px;
Note how I've changed the H1 to H2 so the XML finds the correct tag. You can take this opportunity to edit the tag to how you want it output in the info box. That's all there is to it :)
blog terms
Drupal Drupal 7