Drupal Media Library as a Photo Album

Submitted by Kevin on

With the release of Drupal 8.7, the built-in Media Library module has become robust enough that it's possible to build some interesting components with it now.  The following gives some semi-technical details for how to configure your own photo album system that takes advantage of the Media Library to handle image uploads and automatic resizing (no more 5 MB files being sent to the browser only to be squished down to 250px X 250px on the screen).

The process is still not super simple and does require at least a little knowledge of doing custom CSS for Drupal.  However, I can imagine someone in the not too distant future creating a third party module to do a lot of this configuration for you, so that anyone can have highly functional photo albums without having to do any under-the-hood coding at all.

Creating a Photo Album System

Step One: Create a Media Type

  1. Under Structure -> Media types, select Add media type

  2. Give your type a useful Name and Description

  3. Select "Image" for Media source

  4. You can leave the rest of the options at their defaults.  The Field mapping section is for storing technical data about an image.

  5. Select Save settings to create your media type

  6. Switch to the Manage display tab for your new media type

  7. Drag "Image" down into the Disabled section, and drag "Thumbnail" and "Name" up to the enabled section (anywhere above the Disabled line)

  8. Select the cogwheel icon at the far right end of the "Thumbnail" line and

    1. Configure the "Thumbnail" using an Image Style that produces a relatively small image (Medium is a good default choice, but you can also create custom Image Styles under Configuration -> Media -> Image styles

    2. Change Link image to to "File"

    3. Select Update to save your field display changes.

  9. Scroll down and Save your changes

Step Two: Create a Custom Block Type

  1. After creating a custom block type in the standard way, add a field to it of type Media (found under the Reference) heading

  2. Configure the new field to use only the media type that you created in step one above.  Leave Sort by set at none to allow for custom ordering of images as they are added to an album

  3. Select Save settings to save your changes

  4. Switch to the Manage display tab for your new media type

  5. Change the label setting on your Media field to hide the label, and make sure the Format is "Rendered entity"

  6. Save your settings

Step Three: Test Your Work

Create a block of your new type (either as a traditional block placement, or an inline block on a Layout Builder enabled page.  You should be able to upload images to it and their thumbnails should display on the rendered page one after the other vertically with the image name under the thumbnail.  Selecting an image should open the full image (on a separate page).  If you make another block placement of your new type, you should be able to select existing images or upload new ones when adding images to your new block.

Step Four: Enhancements

Your first enhancement will likely be getting the images to display in a grid.  This is pretty straightforward to do using CSS Grid and/or CSS Flexbox.  Look at the HTML source to find the class name for you custom block type and tie your rules to it.  The general consensus these days is to use CSS Grid with a fallback to CSS Flexbox for older browsers, but if you don't care about older browsers, you could just do CSS Grid.

Other enhancements are possible, such as implementing a method to have the full-size image display in a modal instead of switching to a new page (which requires the user to use the "Back" button to go back to the original page.)  There are some existing third-party modules that may be able to do this for you, but I haven't tested any yet.

If you want to go even further down the rabbit hole, you could add formatting to the gallery (borders, etc.) or even create a custom template to rewrite the output so that the link encompasses both the image and its title.  (I've done this last one -- it just involves creating a custom template for the Media Type.)

Slide Show Concept

This same base configuration can be used to create a manual or even automatic slide show.  You'll probably want a separate Media Type and Block Type for slides and slide shows, just to keep things organized better and to allow for control over how slide images appear versus album images.  The challenging part is that after you get through Step Three above for your slide show components, you would need to create or obtain a JavaScript library that could take the set of images and add formatting and controls so that they operate as a slide show.  I had a library I had written for my Paragraphs based layout system, so I just repurposed it for this Media Library based system and it worked like a charm.

One other addition I made to my slide show system is that I added a custom template for my slide Media Type, and used the template to allow the image and image name to be wrapped in a custom link.  This allowed the slide show to work in a very simple "news" context where the content manager wanted each slide to link to some other part of the website.  Obviously, if you wanted anything more than a single link wrapped over a full slide image, you'd need to create a more complex system outside of the Media Library system.