Create a Functional yet Simple Image Gallery in Drupal 9

Check first for the output of this Image Gallery.

Requirements

  • Core Modules: Image, Block, Views
  • Contributed Module: Colorbox

Step 1: Install the Colorbox Module
Install Colorbox to /modules/ and enable it together with Image, Block and Views core modules. In order for the Colorbox to work, install the required library to /libraries/. You may need to mkdir libraries.

Step 2: Create a content type called Image Gallery
Go to /admin/structure/types/add
Name: Image Gallery
Description: Gallery of images

Step 3: Add an Image field to Image Gallery content type
Add field: Re-use an existing field = Image: field_image, Label = Image
Allowed number of values = Unlimited
Save and continue
Check the Required box
Uncheck the Alt field required box
Save settings

Delete Body field (optional)

Step 4: Create an Image Style for Image Gallery thumbnails
Go to /admin/config/media/image-styles
Add image style: Name = Gallery Thumbnail, Effect = Scale and crop
Dimensions: Height = 100, Width = 100

Step 5: Create a Gallery Block via View Module
Go to /admin/structure/views/add
Name: Image Gallery Block
Show = Content, Type = Image Gallery
Check the Create a Block box
Display format = Unformatted
Items per block = 1
Save and edit

Step 6: Fine tune the Image Gallery Block view
Configure the Content: Title to Exclude from display
In FIELDS, add a Content: Image
Save

Step 7: Format Content: Image with Colorbox
Click the Content: Image in FIELDS
Formatter = Colorbox
Gallery (image grouping) = Per post gallery
Click Apply to save

Step 8: Create a Contextual Filter
This step is necessary so that only the images in the current node will show in the block.
In ADVANCED tab, add Content: ID filter
WHEN THE FILTER VALUE IS NOT AVAILABLE = Provide default value
Type = Content ID from URL

Step 9: Assign a CSS class
Again, click ADVANCED tab
CSS class = container-fluid
Save the newly created view.

Step 10: Enable the Image Gallery Block
Go to /admin/structure/block
Scroll down to Content region and click Place Block
Look for Image Gallery Block then click the corresponding Place Block

Step 11: Configure Image Gallery Block
In the configuration page:
Display title = uncheck
Override title = uncheck
Content types: Image Gallery = check
Region = Content
Save Block

In the Block Layout page, scroll down to the bottom and click Save Blocks.

Step 12: Disable the display of images in nodes
Note that the goal is to display images in block not in node. Go to

/admin/structure/types/manage/image_gallery/display

and drag the Image Gallery field under Disabled.

Last Step: Add a content of type Image Gallery
Go to /node/add

Happy uploading!

Category