Create a Functional yet Simple Image Gallery in Drupal 9

Check first for the output of this Image Gallery.


  • 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

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
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


and drag the Image Gallery field under Disabled.

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

Happy uploading!