Gallery Template

Galleries are something that you can use to feature several images in one block on your page, such as from a past event.

Getting Started Tips

  • Always format your images for the web before uploading them.
  • Galleries can be used on their own or inside of a grid, although they are designed to be used by themselves. If using in a grid, add the grid first, then add the gallery in one of the grid items.
  • Consider where your users will interact with your gallery as they often stop further progress down the page.
  • Note: All gallery images on a page will show up when scrolling through the image pop-up window so it is best to only use one gallery per page to avoid user confusion.

Guidance

  • Always make sure the image alignment is set to "None" as otherwise it can cause display issues.
  • Make sure all of your photos have Alt text for each image.

To add a gallery to your content, place your cursor in the spot where you want the new gallery to be and click the template icon:

screenshot showing the template icon in WYSIWYG editor

This will bring up the Insert Templates pop-up window. Choose the option labeled "Gallery" and click the "Select Gallery Options" button.

screenshot showing how to add a gallery template

Under Gallery Style, select "Gallery" again and click the "Insert Template" button. It will automatically insert a new Gallery that is ready to be filled with the images of your choice.

screenshot of gallery style to insert

Adding Images to Your Gallery

Right click on any of the placeholder images to select (the image will have a blue box around it when selected) and click the insert media icon in the WYSIWYG editor. That icon will bring up the media browser popup box that you see when you add new images and will function exactly the same, except you are replacing the existing placeholder image with a new one. Follow the same steps as adding a new image and the old image will be replaced by a new one. Make sure you select the "None" alignment and not right or left as it can cause display issues.  

screenshot showing how to add images to gallery

To add more images to your gallery, right click next to the last gallery image and select the "Edit Gallery" option to bring up the sidebar editor.

screenshot showing how to edit a gallery

From the sidebar menu, select "Add," then "Gallery." Click "Add Item" to add additional images to your gallery.

screenshot showing how to add additional gallery images

To exist out of the sidebar, click the "X" button in the top right.


Galleries automatically default to the gallery style of "Standard." You can change the style by bringing up the sidebar menu (by right clicking next to the latest image in your gallery and clicking "Edit Gallery"). From the sidebar menu, select "Style," then "Gallery." From here, you can select one of the three styles. 

screenshot showing how to change a gallery style

Standard Gallery Style

This style shows all images as the same size ratio, although this means that the vertical images will display at a different height than the horizontal ones.

Feature Gallery Style

This style shows the first image as one large featured image with a set of small thumbnail images beneath.

Button Gallery Style

This style only shows the first image as a clickable photo button.       
Note: There is currently a bug in this template option.


To add or change the background color of a gallery, bring up the sidebar menu (by right clicking next to the latest image in your gallery and clicking "Edit Gallery"). From the sidebar menu, select "Color" then "Gallery." This will bring up a color swatch. Click on the color you want to use and it will be applied to your gallery background. 

screenshot showing how to change the background color of a gallery

Move Gallery Items

To move or rearrange gallery items, bring up the sidebar menu (by right clicking next to the latest image in your gallery and clicking "Edit Gallery"). Select "Move Items" then click on the item you want to move and then click on the item you want to move it to. For keyboard users, press tab to highlight the item you want to move, press the left or right key to shift it over, and press enter again to drop it into place.

screenshot showing how to move gallery items

Delete Gallery Items

To delete items in a gallery, bring up the sidebar menu (by right clicking next to the latest image in your gallery and clicking "Edit Gallery"). Select "Delete Items" then click on the item you want to delete (the item will appear in the color red when you hover over it). For keyboard users, press tab to highlight the item you want to delete and press enter to delete it.

screenshot showing how to delete gallery items

Delete a Gallery

To delete a gallery, bring up the sidebar menu (by right clicking next to the latest image in your gallery and clicking "Edit Gallery"). From the sidebar menu, select "Delete All" then "Gallery." Click the "Delete All" button to delete the entire gallery.

screenshot showing how to delete an entire gallery

Add a Space or New Paragraph Before or After a Gallery

To add a space or new paragraph before or after a gallery, bring up the sidebar menu (by right clicking next to the latest image in your gallery and clicking "Edit Gallery"). From the sidebar menu, select "Insert Paragraph" then "Gallery." Click "Insert Para Before" to insert a space or new paragraph above the gallery. Click "Insert Para After" to insert a space or new paragraph below the gallery.

screenshot showing how to insert a space before or after a gallery

If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email webservices@uoregon.edu to ask for assistance.

Ask for Assistance