Photo Layout Examples

There are several options for adding photos to a page.  Below are a few recommend options with instructions.

Photo Carousel Block

Example 1

This example uses the setting to show three images at a time and there are 4 slides so there is an arrow on desktop and on mobile.  The Active highlight is turned on and autoplay is also turned on.

Photo Carousel Block

Example 2

This example uses the setting to show three images at a time and there are only 3 slides so there is no arrow on desktop but would be on mobile.  The Active highlight is turned off.

Steps to create a carousel block:

• Choose the folder you want to add the block to (a folder in the Content Hub blocks or the "For this Page" folder), click the three dots next to the folder and select the New Block option.
• Name your block 
• Select the Carousel block type
• Use the Select Content option on the block and select the Create New Block option. This is the option that allows you to add your photos so you will add one for each photo to include in the carousel.
  • Use the Image field to add your image and add the Image Alternative Text.  There is also an option to add a Caption.
  • Click on the Publish option once you have added the image details.
  • Repeat the steps above for each image.
• Choose the Settings for your carousel block on the Settings tab.
  • Slides to Show:  recommend setting to 3
  • Active Slide Highlight: checking this will add a highlight on the slide that is active.
  • Autoplay:  checking this option will autoplay the slides for the user. 
• Once you have added all of your photos and chosen the settings, Publish your block.  
• You can now add the block to the Main body of your page. You can drag the block to where you want to place it on the page or you can use the select option from the editor tools and search for it. 

Single Photo Example

Steps to add a single photo:

• Option 1: You can drag a photo from the media library to place the photo on the page.  Add alt text and resize by using clicking on the photo and using the Insert/Edit photo option from the toolbar.
• Option 2:  Use the Insert/Edit photo selection option from the toolbar.
• Once the photo is on the page, you can use options in the style options to add rounded corners or align the photo left or right.

Template Option Examples:

Template option by adding a Row using four 1/4 Templates

Template option by adding a Row using Three 1/3  Templates

Template option by adding a Row using Two 1/2 Templates

For ease of use, highlight this paragraph and replace or delete.