Please ensure Javascript is enabled for purposes of website accessibility Modal Image Gallery | University of West Florida
Skip to main content

Modal Image Gallery

Our new and significantly easier to use modal image gallery. No more uploading your own thumbnails!


Important Information

Images uploaded to the media library after Oct. 1, 2021 will automatically have a thumbnail variant created by T4 and the Modal Gallery: Image Item content type will automatically pull the correct variant for your gallery after you select your original, full size image. We recommend 1200 x 900px as your starting point for the full size image dimensions, but you can use larger or smaller dimensions as needed. It is more important to keep each image under 500kb to ensure the page loads quickly. Vertical and horizontal orientations can be mixed and matched without issue.

Multiple galleries can exist on a single page, simply add a new placeholder each time you want a new gallery to start. Arrange each Modal Gallery: Image Item underneath the Modal Gallery: Placeholder that starts your gallery. Headings are not included in the content type, you must add those using a different content type such as a [2] General: Content.

At a Glance

  • Requires Placeholder: Yes
  • Placement: Almost anywhere
  • Special Setup: None
  • Image Sizes:
    • Dimensions: 1200 x 900px

Replacing Old Galleries

These are brand new content types and are separate from the old Media Gallery: Placeholder and Media Gallery: Image Item content types. The old versions do not work in the new website designs and must be deleted and replaced with the new content types. 

Additionally, all images contained within old galleries were uploaded before T4 was set to automatically create the proper thumbnail variant, so all images must be re-uploaded as a new entry into the media library for the thumbnail to be created so they will work in the new content type.

Modal Gallery content types contain the following elements:

Modal Gallery: Placeholder

  • Name - Used in Sitemanager only. This does NOT show up on your webpage.
  • Number of Columns - You can use either 3, 4, or 6 columns, for the layout of the image gallery.

Modal Gallery: Image Item

  • Name - Used in Sitemanager only. This does NOT show up on your webpage.
  • Image - Use this to select an image from the Media Library.
  • Teaser Text - Text that shows up under each image when the gallery is expanded. Not required.

Modal Gallery: Image Item Example