Photo Slider Block

Use a Photo Slider Block as a gallery for a rotating set of related images.

Preview

Below is a sample of how the Photo Slider Block will render on your Web page.

  • JQH Arena

  • Hammons Hall for the Performing Arts

  • Missouri State University

Best practices

  • If you're using Flickr already, consider using the Flickr Photo Slider Block.
  • Avoid using a Photo Slider Block as a content carousel as most website visitors will only see the first slide.
  • Avoid overlaying text on images; use captions to provide contextual content.
  • Use to showcase visual portfolio, event photos or other thematic images.

  • Avoid using captions to deliver the page’s main message. Captions should describe the content of the photo in a clear and concise manner.

  • Strive for captions that are 100 characters or less, so that the captions and images are both visible on a mobile device.

  • Crop photos to 700x394 before uploading to asset manager. These photos will automatically resize to fit the content area of the requesting device, be it desktop, smartphone or table.

Adding a Photo Slider

This section will help you add a slideshow of photos from Flickr.

  1. Use Web Press to navigate to the page you would like to add the slideshow to.
  2. Click the dot for Open Row.
  3. Click the dot for Edit column contents.
  4. A new window will pop up, on this window you will select Create and Connect Page.
  5. Under the new menu select Media under the Content Class Groups.
  6. Choose Photo Slider Block under the List of Content Classes heading.
  7. Web Press will prompt you to enter the headline.  This headline will not appear outside of Web Press.
  8. Select the dot for Edit list of photo slider items.
  9. A new window will pop up, on the window you will select Create and Connect Page.
  10. Web Press will prompt you to enter the headline.  This headline will not appear outside of Web Press.
  11. Click the Dot for Edit content via form.
  12. A new window will pop up, you can select your photo from assets or upload a new photo. Other fields are:
    1. Alt attribute, this text will be displayed if the image cannot be viewed.
    2. Photo Heading, this is the displayed heading for the photo.
    3. Photo Description, a brief description of what is shown in the photo.
  13. Optionally, you make select the Red Dot labeled Edit link properties (optional).  In the new window you may connect the photo to a new or separate page.
  14. Select OK and the photo slider will appear on your page.