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