File List with Thumbnails

  • Add a new File List component to the page where you want it to appear

  • Set the rendering variant to “Image List With Thumbnails”

  • Add a new item to the file list

    • Each item in the list consists of 2 fields that need to be edited:

    • The thumbnail image, which displays on the page

    • The file itself, which is what will be downloaded

    • Keeping them separate allows us to have a thumbnail image that fits the page design (e.g., how the image is cropped), while still allowing us to provide the full-size image via the download link.

  • Continue to add files as needed. If you want to create a separate section with its own title, sometimes it’s better to stop adding files to the current list and create a new File List component. Then you can add a rich text component in between the file lists and enter your title there. This will give you more control and flexibility over the final design.

  • To enable the lightbox when a thumbnail is clicked:

    • Add a Plain HTML component anywhere on the page. The exact position doesn’t matter since it will be hidden. Directly underneath the file list is usually a good place.

    • Click “Change associated content”. This will allow us to select an existing HTML component so we don’t have to build it from scratch.

    • When the content browser appears, select the Image Modal

    • Save and publish the page