Lesson 4: Landing Page Blocks: Captioned Image Gallery

This block type utilizes the new Drupal Media Library system to make it easy to create a mobile-friendly image gallery. As you create one of these blocks, you will be able to upload your images via the Add media button. You should try to give each image a meaningful name – otherwise, the image file name will be shown, which may not be very informative or even understandable. After images have been uploaded, you can drag and drop them to reorder them as you prefer. Once you save your block, thumbnails of each image with the name underneath will be rendered in a gallery format, four images per row. A site visitor can select any image to open the full-size version for better viewing.

You can always edit one of these blocks to further rearrange the images, remove existing images, or add new ones. Do keep in mind, though, that just like in WordPress, these images are ultimately stored as part of the site's master media library, which brings a couple of caveats:

  • You cannot change the name of an image while editing a page. Instead, go to Content on the administrative toolbar, then select Media to view your site's media library. From there, you can edit any of the images in your library

  • Removing an image from a gallery on a page does not remove it completely from the website. If you find you need to purge an image completely so that no one can get to it (e.g. due to a privacy or copyright concern), contact the college web developer for assistance to ensure the image is fully removed from the website.