PhotoShelter allows you to embed HTML5 and/or Flash-based slideshows of your galleries anywhere you like on the web -- your blog, your personal website, etc. (You must of course have access to the HTML wherever it is you wish to place your slideshow in order to actually embed the code we provide.)
Building and Embedding a Slideshow
1. From the Left Pane of your Image Browser, select the gallery for which you would like to grab slideshow code.
Note: You must choose a gallery whose visibility is set to Everyone (i.e. Who can see this? Everyone).
2. With the appropriate gallery selected, look to the Right Pane and click Share menu > Embed as Slideshow.
3. This will trigger a pop-up window in which you can set your slideshow presets and grab the embed code. By default, we will present you with the HTML5 version of the slideshow, but you may click the button at the top right corner of the window to try out the Flash-based version.
If you anticipate site visitors viewing your work with a tablet or smartphone, the HTML5 slideshow is for you! With the HTML5 slideshow, your touch device visitors will see the full rotating presentation, whereas the Flash-based version will only display the cover image of your gallery. More on this in the note at the bottom of this article.
To use the older Flash-based version of the slideshow, click the button at the top right corner of the slideshow pop-up window. The gallery widget shows a live example of how your slideshow will look with the selected preset. Click the Update Preview link to see how the slideshow changes as you play around with the options.
There are a number of configurable options, explained below:
- Show caption on hover
- If the image contains an IPTC Description, moving your mouse over the image will reveal a caption overlay with this caption info.
- Show slide number
- This is a counter for the current and total images in the slideshow (i.e. 2/72). Slideshows can display a maximum of 1,000 images.
- Image title
- This displays the image name in the upper right of the slideshow. The name used for display is based on the data in either the Filename, ITPC Headline, ITPC title, Headline > Title > Filename cascade (in that order -- meaning it will display the headline unless unavailable, and then the title, etc.), or Hide titles.
- Photog credit
- Displays IPTC Credit or IPTC Author (in that order) in the lower left area of the slideshow.
- Clicking images links to website
- By default, clicking on an image directs the viewer back to the large version of the corresponding image in your gallery. But you can disable this behavior by choosing Do not link images.
- Allow others to embed the slideshow
- Clicking the Share button on the bottom menu reveals HTML code that can be used by others to embed your slideshow in their own blogs or websites. Images will always link back to your site (unless the Do not link images box is selected in the previous option). Note that in order for the Share button to disappear entirely, the Enable send-to-friend option will also need to be disabled.
Note: If enabled, anyone can embed the gallery elsewhere. This is part of the virality of the widget, which effectively gives you free marketing. Even though clicking on an image in the slideshow will return the user to your PhotoShelter page, we still recommend that you set a watermark over your images for added security.
- Enable send-to-friend
- This will add an Email link to the Share prompt. This Email link will allow others to email the slideshow to others.
- Enable full-screen option
- If this is disabled, it will hide the full-screen icon that allows viewers to resize the slideshow to fill their monitor screens.
- Enable image smoothing
- For larger slideshows where the image might not have sufficient resolution to fill the player (or full-screen), use image smoothing to eliminate jaggies.
- Enable image upsampling
- By default (as part of our security model), the largest image size that we will display is 1000px on the image's longest side. If you'd like to display images larger than the 1000px screen-resolution image, check this box to enable upsampling. (We recommend you enable smoothing, too, in this case.)
- Show top title bar
- The top title bar displays the gallery name and file name. Uncheck this to hide the top bar entirely.
- Show bottom menu bar
- The bottom menu bar displays image credit, image position, pause/play, matrix view, share, and full-screen buttons. Uncheck this to hide the bottom bar entirely.
- Display watermark
- Uncheck this box to disable watermarks for the slideshow only. (This setting will not affect watermarks on the rest of your site.) If you don't have a global watermark set, a watermark will never display, despite your preference here. Read more about Watermarking.
- Include HTML links below slideshow (SEO)
- An HTML link appears directly below the slideshow player with a backlink to the original gallery on your PhotoShelter website. This is beneficial for search-engine optimization.
- Enable matrix view
- Clicking the matrix button shows tiny thumbnails of the images, which eases navigation within a large gallery.
- Thumbnail setting
- These radio buttons are related to the Thumbs icon that appears in the lower left of the slideshow player. Clicking it reveals a "filmstrip" navigation below the main image. You also have the option to always display the thumbs: Click the Thumbs filmstrip always on option to enable this; to hide thumb navigation entirely, click No filmstrip.
- You can define the size and aspect ratio of the slideshow player. This allows you to set it for panoramic, square, or vertical configurations. Click Constrain Proportions to maintain the aspect ratio as you adjust sizes within the configurator.
- Background Color
- When images do not fill the entire viewing area, the background color bleeds through with a light gray by default. You can override this color with a custom choice or make the field transparent.
- Horizontal Fit or Crop
- To prevent the gray borders of the background color from displaying, select Crop image to fit frame.
- If you have two vertical images that are adjacently sequenced, the player will display them simultaneously next to one another in a single frame.
- Transition Style
- Select from five transition styles: Crossfade, Fade, Sweep, Bounce, or Flip.
- Time between slides:
- You can define the time elapsed between slides (from 2-10 seconds).
- Auto-play slideshow
- You can determine whether the slideshow should start to transition between images automatically, or whether a user click is required to begin the automatic advancing between images.
When you have finished selecting your options, click the Update Preview link. The slideshow will refresh, and the embed code will update itself. You can then copy the embed code for your blog or external webpage. The URL field here simply displays the link to your gallery.
If you want to save these configurable options, click the Save these options as a preset link. Name the preset, and click Save. Then you will be able to access the preset at a later time.
Note: If a viewer comes across your Flash-based slideshow on an iPhone or iPad, we will display the cover image of your gallery instead of the full slideshow. This is because Flash is not currently supported on an iPhone or iPad. As noted above, you will want to choose the HTML5 version in order for touch device visitors to see the full presentation.
If your slideshow is not displaying and the issue it not mobile/flash related, it may have to do with the gallery's visibility. Again, this will only work if you choose a gallery whose visibility is set to Everyone.