Website Project

Photo Shuffler HowTo

This page has important info on how to use Photoshuffler. 

The pages now have a "Photo Shuffler" tab in the main Content area. There you can add the images that should be included in the rotation/shuffling and also set the size and tweak the settings regarding the pause between two images and also the duration of the fade.

Necessary preparations

In order to use it, you need of course have images you want it to shuffle. They do not need to have the same size (as Silverstripe will take care of scaling them), and don't even need to have the same aspect ratio (it will be padded with white background, as the photoshuffler script needs images of the same size).

So start with inserting your starting image into the editor window using silverstripe's image insertion task-pane that appears on the right when inserting images. Choose your picture and set the desired size, and hit insert.

For photoshuffler to work, you now need to switch to HTML-SourceCode view.

  • Hit the "HTML" button in the editor's toolbar
  • locate the image tag that you did just insert
  • surround it in a <div id="screenshot-slide"> and add id="screenshot-slide-image" to the img-tag

The complete snippet should now look like the following:

<div id="screenshot-slide"><img id="screenshot-slide-image" src="path/to/first/image.png" alt="alternate text" width="400" height="300" title="title"/></div> 

  • Note the width and the height chosen for this image must be the same you set on the Photo Shuffler tab.
  • Use the Add button to add the desired images, either existing ones, or upload new ones.
  • When adding the images, you can add a title and a caption for the image, but those are not used currently, to bypass it just close the dialog
  • Save the page and the photoshuffler should do its work
  • reasonable defaults for the durations are 5 seconds for the pause, and 0.7 seconds for the fade. Enter fractions with the dot as decimal separator

Demo is everything