Slideshows and local page thumbnails

published Nov 9, 2012 10:38am

Slideshow mode

There is now a slideshow mode available with the new image tags. It can be added to any page with using the new image tags by adding the slideshow option as the last option to any image tag on the page.

It doesn't work with the original image tags: [image].

Example


CMS syntax:

[thumbimage 36270 left hidecaption slideshow]
[thumbimage 36271 left hidecaption]
[thumbimage 36273 left hidecaption]
[thumbimage 36274 left hidecaption]
[thumbimage 36272 left hidecaption]

The [thumbimage] tag can fit 5 images across before it wraps to a new row. Be sure to float all your images left otherwise the order you see them on the page may be different from the order the of the slides. The caption mode does not affect the slideshow display. When uploading images be sure to upload a large resolution since users will always be viewing as large an image as possible. The original image will be automatically resized to support the different viewing modes. You may need to use a [br clear] to push down the text that comes immediately after the images.

You can navigate forward and backward through the photos using the arrow keys on your keyboard or the buttons at the top center of the image. Clicking on the large popped up image will also move it to the next image. You can exit the full screen view by using the X button, hitting ESC on the keyboard, or by clicking on the grey underlay around the image.

Captions are automatically displayed for each image in slideshow mode.

Local page thumbnails

You can now use the the [thumbimage] tag to automatically display a screenshot of a page created with SERC's CMS. To show a local page thumbnail, don't add an image id to the [thumbimage] tag and instead give the url to the page. Do not use development urls (they start with /dev), only use the live url. Event if the page isn't live yet the thumbnail will be automatically generated and retrieved when that page is made live.

Example

Go to /serc/site_guides/projects.html


CMS syntax:

[thumbimage left /serc/site_guides/projects.html]

You can also use the float, noshadow, and noborder options just like on any other [thumbimage tag] but the must be used in that order before the url at the end. The url is always last.

These thumbnails will be updated periodically after a page is updated.