Now that you have learned how to create multi-blocks, as well as the many types of content you can create in a multi-block's grid cell, you will now learn about other types of blocks that you can add to a page. In this page's tutorial, we will review what a slideshow block is and how to create it.

Example: Slideshow with all features

The example below shows a slideshow with title text, overlay text and a read more link. Arrows to advance the slideshow appear when there are multiple slides.

slideshow-all-features.png

Example: Basic slideshow

The example below is a slideshow with just images. Without text or a read link, a basic slideshow shows just images and the arrows to advance the slide.

slideshow-basic.png

Creating Slideshows

Step 1: Create the slideshow
  1. Add Content > _Responsive > Slide Show - EZ
  2. Name the slideshow after the page it will be wired to
    • For example, a slideshow on an "About" page should be named about-slideshow-ez.
  3. Choose a "_blocks" folder to place the file in
  4. Select the appropriate "Slideshow-EZ options
    • Feed-based?: 
      • Check "No" if you want to continue manually setting up the slideshow 
      • Check "Yes" if you want the slideshow to automatically generate from an Article Feed
        • Note: If you select "Yes", you will have to contact itweb@jmu.edu to get your configuration set up
    • Randomize?:
      • Select "Yes" to allow the slideshow to randomly choose a different image each time a user views your page
        • Note: Due to accessibility/usability issues, slideshows do not auto-rotate while users remain on your page; they will only rotate as the user revisits the page. See FAQs for further explanation as to why slideshows cannot auto-rotate.
Step 2: Add images and links
  1. Add images to the slideshow that meet the slideshow image size requirements
SLIDESHOW width height
tall 1000 600
short 1000 500

 

  1. Upload the images you want to appear on the slideshow
    • (Optional): add text that will display overtop the image
    • If you are uploading your own images, be sure to format them with the following dimensions:
      • Resolution must be 72dpi
      • Recommended file format is .jpg with quality of 8
  2. (Optional) Add links to slides
    • If one slide has a link, the rest should have links, too. Either link all images or don’t link any at all.
  3. Use the overlay text box to enter text that will display over the image next to the slide navigation arrow
    • Just like links, if one slide has overlay text, the rest should have overlay text, too. However, we recommend using slideshows to display images that speak for themselves, with links to pages that go into more detail.
  4. Select full-width or half-width for the slideshow
    • Note: Overlay text will not display on half-width slideshows

slides2.png
Step 3: Wire slideshow to page
  1. Wire the slideshow block, to the "FEATURE_IMAGE" Region's block, wire the shared format: "slideshow-ez" to the Format.

Replacing Slideshows With Featured Images

  1. On a page that has a slideshow, click "Edit" in the top toolbar and select the "Configure" tab
  2. Locate "FEATURE_IMAGE" Region
  3. Check the "No Block" and "No Format" boxes to revert the Region to its default setting
  4. Click "Save and Submit" in the vertical ellipsis
  5. Click "Edit" in the page's top toolbar again
  6. Uncheck the "No Block" and "No Format" boxes in the "FEATURE_IMAGE" Region
  7. Select "Save and Submit" in the vertical ellipsis
  8. Edit the page to add a feature image

Back to Top