Gallery Block

The Gallery Theme block is our supported method to display a group of photos together. There are two different layouts for the Gallery panel.

1. The modal layout features a text on one side and a few images on the other.
2. The mosaic layout option provides for additional images and is in a vertical format.

Gallery Block Guidelines

• Use for an image gallery.
• Follow all Image and Media Requirements and Best Practices.
• Review the Recommendations for Accessible Theme Blocks page to learn more about requirements for headings, images, links, and media published in this block.
• Use of this block for an undocumented purpose or in a non-standard way is discouraged and may not be supported.

How to Configure the Gallery Block

• In the block editor, click on the blue box with the plus sign located at the top left of the page. The alternative text for this link is called “toggle block inserter”. This will open a menu of available blocks to select from.\

• A list of blocks sorted into 6 groups will be displayed. Scroll down to the group called THEME and click on the block called Gallery. This will add the block to your page.
• Each block comes with its own toolbar that appears on top of the block. The buttons change depending on the block you are editing. This is what the gallery toolbar looks like:

• Note: To move your block text fields from the narrow right column to the middle of your editor, go to the block’s toolbar and click on the pencil icon. This will move the fields to the middle of the page. If you want to preview the page as you are building it, click on the monitor icon and the text fields will move back to the right side of the editor. You can toggle between these two options.

Content Fields

• Title: This is a text field. Content entered here will appear as the block header text.
• Accent Title: This is an optional text field. This content appears in a smaller font above the block’s title.
• Description: Enter an optional description of the gallery. For design purposes, keep this brief.
• Image Gallery: This is an image upload field for multiple files. The first three images will be used as the images displayed in right-side column, if you choose the modal layout. Additional images will be used if you choose the mosaic layout. Optimal image size is 1300px x 687px, but you can upload various sizes and ratios – just make sure they are not too small.
• Alternative Text: Since galleries are primarily visual include a description of what’s going on in the image in the alternative text field on the image details. Alternative text is only visible to users who can’t see the image.
• Captions: You may consider adding additional context to your images by adding a brief caption on the image details page. Captions are visible to all users so they should be different than the alternative text description. If you add a caption you should also include a brief alternative text description that is different from the caption text.

Settings Fields

• Custom Language: The default language is English. Language options will generate markup signifying that content as being in the selected language.
• Title Size: The default size is normal.
• Gallery Layout: The default layout is Modal. The Modal choice opens the gallery in a modal window for the gallery images. The Mosaic choice displays all images in a grid layout on the page. The layout is prescriptive; the first image will be full width in the column, the second and third images 50% each in the second row and the remaining images 25% width for each row thereafter.
• Link to External Gallery: The default section is No. If you change it to Yes, you will need to enter the link for the external gallery.
• External Gallery Link: Click on Select Link button and enter the full URL to your external gallery, the Link Text (link label that will appear on your page), and check the box to “Open link in a new tab”. It’s very important to the user experience that you check that box because you are adding a link that points to a location not on the Boise State website. External galleries could include a shareable Google Drive folder or a personal website hosted on an external domain, for example.
• Heading Size: The block title will appear on the page as H2. Do not change this to H1 unless otherwise directed.
• Add Top Padding: Defaults to Yes, which means there is the standard empty space above the block. You can change it to No if you want less empty space, but the recommendation is to leave it set to Yes.
• Add Bottom Padding: Defaults to Yes, which means there is the standard empty space below the block. You can change it to No if you want less empty space, but the recommendation is to leave it set to Yes.