A slideshow is a great way of adding interest to your frontpage, displaying images from an event, or creating adverts that draw attention to particular content.

You can create a slideshow that is easy to update by combining some javascript code, in an article, and our Media XML Feed as follows:

Step 1 - Create a folder to store your images

First you'll need to create a  group or  media folder to contain the images you wish to display. Next upload your images to the folder you've created. Note:Size your images before uploading to the dimensions you require and make a note of their width and height.

Important: Limit the number of images to something like 5-6 as with such a slideshow the browser will load all of the images before it starts playing – if you've got too many, or the images haven't been correctly optimised, then there will be a pause and a blank area where the slideshow is before it starts playing.

Consequently, using .jpeg images which can be optimised/compressed rather than .png images which can't is the best option.

By default, the images will display in alphabetical order, so if you name the images in the media folder as "1", "2", "3, etc. they will display in that order.

Step 2 - Create a Media feed

Next you want to create a Media feed in the Media RSS format for the slideshow folder you created. You can accomplish this as follows:

• Select the Settings tab from the navigation tabs at the top of the Web Office.
• Next select the API category from the options in the navigation on the left-hand side. This will reveal further options, select the Media XML option.
• Select the Add a new media feed task to begin creating your feed, give your feed a name e.g.frontpage slideshow, and click the Add button.
• The properties of your new feed will now be displayed. Now make the following changes to the feed properties:
  The XML format should be set to to Format 4 - Media RSS
  Change the feed root group to the slideshow folder you uploaded your images to.
  In the Media types area select the image types you wish to display e.g.JPEG, GIF and PNG.
• Make a record of the feed url e.g.http://shareinsight.co.uk/Media/MediaXML.xml?fid=165
• Once you have made these changes click the Save button in the top-right corner to commit your changes.

Step 3 - Add an article to display the Slideshow

Finally you need to create and article in the normal way, (with the article referenced from within the layout in which you wish it to display). Once the document editor has opened to display the contents pane you can insert the relevant javascript code to create a slideshow as follows:

• select the Source button to reveal the HTML code of the article.
• Paste the following code into the article source:
  
  
  <script type="text/javascript" src="http://www.google.com/jsapi"> </script>
  <script type="text/javascript" src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"> </script>
  <style type="text/css">
  .gss a img {border : none;}
  .gss {
  width: 400px;
  height: 300px;
  color: #dddddd;
  background-color: #000000;
  padding: 0px;
  } </style>
  <script type="text/javascript">
  function load() {
  var samples = "http://shareinsight.uk.endis.com/Media/MediaXML.xml?fid=165";
  var options = { fullControlPanel: true, fullControlPanelSmallIcons: true,
  displayTime: 3000,
  transitionTime: 600,
  thumbnailTag : 'content',
  linkTarget : google.feeds.LINK_TARGET_SELF,
  pauseOnHover : true
  };
  new GFslideShow(samples, "slideshow", options);
  }
  google.load("feeds", "1");
  google.setOnLoadCallback(load);
  </script>
  <div align="center">
  <div id="slideshow" class="gss">
  <div align="left">Loading...</div>
  </div>
  </div>
• Change the url in the following line:var samples = "http://shareinsight.uk.endis.com/Media/MediaXML.xml?fid=1"; to contain the url of the feed you created.
• Modify the dimensions, highlighted in red in the code above, to be the dimensions that you wish your slideshow to display at.

Finally publish your article and your slideshow should be visible.

Using a slideshow for adverts

It's possible to link the images in a slideshow to other content. This means you could use it for displaying adverts. Link your images as follows:

1. Locate your image and select it to display its properties.
2. Under 'Extra link' click the 'Set link' button; the 'link' browser will open in a new window.
3. Select the content you want to link to.  
4. Click Save to commit your changes.

If you've published your slideshow in the past you'll notice your images don't link to your content. This is because it's stored in memory so takes awhile to update.

Troubleshooting

If your slideshow doesn't display check the following:

• Make sure the feed url is identical to the feed on your site and is surrounded by quotes.
• Check your feed is set to format 4 - Media RSS.
• Copy and paste the feed url into your browser's address bar and hit enter to view the feed. It should list the images you've uploaded. If no images are displayed check you have uploaded images to the specified folder and that their format matches the image types you selected to be displayed in your feed.
• To add a second slideshow to the page, change the following words in the code (e.g. by appending a number '2'): gss, samples, options, slideshow, load (except google.load).

The changes I make to my slideshow don't display? Once you've published your slideshow successfully it is stored in memory so any updates take a while to display.