Perfect Layouts

I The spacing for all elements like headings, paragraphs and others are em based. Perfect vertical rhythm is now easy to work with!

Piecemaker 2

II I developed my own 3D slider extension to give you a smart solution and easy to use. The demo is ready for you! Give it a try!

Multiple Styles & Automatic Adjustments

III Skywalker comes with 8 beautiful color themes: Blue, Red, Green, Orange, Yellow, Purple, Grey, Magenta, and various scripts to keep the design XHTML valid and cross-browser compatible.

You are here: Home Template Documentation Development The Piecemaker 2
Today isFriday,21November,2014

Piecemaker 2 Guide

What's the Piecemaker?

This demo site is using an integration of what is called The Piecemaker 2, which is a standalone Flash powered script developed by ModularWeb. Inspired by Cu3er, The Piecemaker 2 gives your website a distinctive way to showcase your best content. The standalone script is free for HTML and Wordpress.

I developed this module for Joomla! 1.6 (converted for Joomla! 1.5 later) and it is available with my templates packages on ThemeForest market.

The Module gives you full control over the Flash and HTML behavior in your front-end, starting with the basic basic parameters in the Global Settings tab and ending with advanced control, transitions and other settings. You will also find an useful internal cache feature so you can easily and quickly change your content slides.

Module for Joomla! Features

  • Fully XML driven administration of the slides and tranzitions.
  • Supports Flash Files
  • Unlimited Transitions
  • Unlimited Slides
  • Animated Shadow
  • Navigation with CoolTips
  • The lightest and most powerful out there
  • Smart cache feature
  • Fully control over the settings
  • Detect window size and adapt width
  • All Browsers Ready
  • Easy to configure in the back-end
  • Fully documented. All parameters. All steps.

Installation

To see what this baby can do, first you must install the extension, so follow this quick guide:

  • Log in to your administration section (http://your-web-site.com/administrator).
  • Go to Extensions menu at the top, and click Extensions Manager (Install/Uninstall for J1.5).
  • Click Choose file button and browse for the installation file (mod_piecemaker2_J15.zip or mod_piecemaker2_j16.zip) on your desktop (or your Downloads folder). Once the installation file is found, click to select it and click the Open button.
  • Now click the Upload & Install (Upload File & Install for J1.5).
  • That's it!

Configuration

All newly installed modules are unpublished and using the standard position position-5 (or left in J1.5). To configure The Piecemaker 2 Module, please follow this quick guide:

  • Log in to your administration section (http://your-web-site.com/administrator).
  • Go to Extensions menu at the top, and click Modules Manager.
  • Use the search feature and find Piecemaker. Once found, click on the module title or select it and click the Edit button.
  • In the Global Settings tab, type in the width of your template or module position for the Module Width parameter. It should be a numeric value at least 50 pixels wider than your images. Your module position must also comply. Example: 1000
  • For the Module Height parameter, type in the height of your images plus 50 pixels. It should be a numeric value. Example: if your images are 400px, type in 450
  • In the Content Sources tab, setup your images and check the parameters tooltips. Will be extremely useful. See more below.
  • In the Content Settings tab, type in the width of your images/flash files for the Image Width parameter. It should be a numeric value. Example: 950
  • For the Image Height parameter, type in the height of your images/flash files. It should be a numeric value. Example: 350
  • Set the module to use the slideshow module position.
  • Select the Home and/or any other menu items you want your pages to load The Piecemaker 2 Module.
  • Click the Save button in the Module Manager toolbar.
  • After many save sessions, you may decide a final configuration for your contents and settings, turn off the cache clearing on each refresh in the front-end by selecting the No option of the Clear Cache parameter. This means that you will use the same cache file on every page refresh in the front-end and prevents the browser from runing a lot of queries for building The Piecemaker 2 Module.

If you want to add more than 5 slides, you need to edit the modules/mod_piecemaker2/cache/piecemaker.xml file as follows.

To add your images/flash XML data, please take a look at these examples:

Example 1

Example - Image
<Image Source="images/relative_path_to_your_image_file.png" Title="Your Title"></Image>

Example 2

Example - Image with Description
<Image Source="images/relative_path_to_your_image_file.png" Title="Your Title">
	<Text>Your description text goes here</Text>
</Image>

Example 3

Example - Image with Description and Hyperlink
<Image Source="images/relative_path_to_your_image_file.png" Title="Your Title">
	<Text>Your description text goes here</Text>
	<Hyperlink URL="http://www.your-link.net" Target="_blank" /> 
</Image>
* you can also set your desired target

Example 4

Example - Flash
<Flash Source="images/relative_path_to_your_flash.swf" Title="Title for your Flash">
	<Image Source="images/relative_path_to_your_flash_preview_image.png" />
</Flash>

Transitions

The Piecemaker 2 Module support unlimited transitions you can set them in the Transitions Settings tab. These transitions will be started in the order they are specified in this field. This order is entirely independent from the order of contents. Once the last transition is reached, it starts over again with the first transition.
Transitions have some parameters you can change to customize the look and feel:

  • Pieces = "9" - Number of pieces to which the image is sliced
  • Time = "1.2" - Time for one cube to turn
  • Transition = "easeInOutBack" - Transition type of the Tweener class. For more info on these types see the official Tweener Documentation and go to Transition Types. The best results are achieved by those transition types, which begin with easeInOut.
  • Delay = "0.1" - Delay between the start of one cube to the start of the next cube.
  • DepthOffset = "300" - The offset during transition on the z-axis. Value between 100 and 1000 are recommended. But go for experiments.
  • CubeDistance = "30" - The distance between the cubes during transition. Values between 5 and 50 are recommended. But go for experiments.
Please check the official documentation on more about these transitions or if you want to check the default ones, please open your_site/modules/mod_piecemaker2/cache/sample_transitions.xml to see the defaults.

Tips and tricks

  • Make sure your slides contents have same dimensions. The Piecemaker works of course, but your slides will not be cool.
  • When using large images you can only rely on the Piecemaker, no need for other content, you can fill it within the slides information. Mega Menu will also help a lot. Will make your pages simple and sleek.
  • Please note that the Piecemaker 2 requires jQuery 1.3+ and some minor changes to make it work with other templates.


Known Issues

  • Sometimes the contents don't get updated even if you enable purging the cache on every page refresh in the front-end. Solution: clear browser cache as browsers cannot "smart" manage dinamic flash content yet, especially Firefox.
  • The Piecemaker 2 is quite a monster! It requires a lot of fire power (powerful GPU & CPU). You better turn OFF the autoplay when using large images.
  • Flash Slides sometimes lock, because no activity or because browsing other windows, but you can slide by using the menu below. This is not really an issue it's a behaviour well explained by the developer here.
  • Movie files don't play. Reason unknown. You can try it on your test server maybe it does not work for me but works for you.
  • Joomla! 1.5 version have a XML issue on installation. Please ignore it, the module IS installed successful.


Licence

  • The Piecemaker 2 Module for Joomla! is a commercial extension as part of my templates Quickstart and Manual Installation Packs available for purchase only on ThemeForest.net and cannot be purchased separately.
  • For more about standalone aplication The Piecemaker 2 please check the official documentation or the developer website.

Enjoy The Piecemaker 2!

Elegant Design

Crafted with 8 unique styles, Skywalker Template is a great kick start for professionals, corporate clients and blogs.

Awesome Typography

Enrich your content with block numbers, columns, text & code highlight, block quotes, list styles, image wrapping and much much more..

T3 Framework Inside

The man behind the T3 Framework Wikies releasing his first ever template for Joomla! 1.6. A fully featured template backed up by pure power and flexibility. Layouts, profiles, compression, Theme Builder, form replacements... everything you need packed up and ready to go!