Drupal 10/11 Image Gallery using Views and Custom Twig Templates – Part 2

In the previous chapter we created the foundation of our gallery system.
We created a content type, added an image field,
and created a Drupal View to display gallery images.

However, the default output generated by Drupal Views is usually not suitable
for professional websites. Drupal renders HTML with many nested wrappers and
generic markup. For a modern gallery layout we must customize the output.

This is done using Twig template overrides. Twig is the
templating engine used by Drupal to render HTML output.

By overriding View templates we can completely control:

• HTML structure
• CSS classes
• Grid layout
• Custom markup

⭐ Understanding Drupal Template Overrides

Drupal allows developers to override templates based on the entity or view being displayed.
For Views, Drupal provides multiple template suggestions such as:

views-view.html.twig
views-view-unformatted.html.twig
views-view-fields.html.twig

We will override two templates:

views-view-unformatted--image-gallery.html.twig
views-view-fields--image-gallery.html.twig

These templates correspond to our View machine name:

image_gallery

Drupal automatically converts underscores to hyphens when generating template suggestions.

⭐ Step 1: Create Template Directory

Inside your custom theme create a Views template directory:

themes/custom/yourtheme/templates/views

Your theme structure should look like this:

themes/custom/yourtheme
│
├── css
│   └── style.css
│
├── js
│   └── script.js
│
└── templates
└── views

⭐ Step 2: Override the View Container Template

Create the following file:

views-view-unformatted--image-gallery.html.twig

Add the following code:

This template loops through each row returned by Drupal Views and renders the content inside
a container with the class custom-gallery.

Each row is wrapped in a gallery-item element which will later be styled using CSS.

⭐ Step 3: Create Row Field Template

Next we override how individual fields are rendered.

Create the file:

views-view-fields--image-gallery.html.twig

Add the following code:

This template displays:

• Image field
• Title field

Each gallery item now contains a clean structure that is easy to style.

⭐ Step 4: Create CSS Grid Layout

Now we create the responsive grid layout for the gallery.

Open your theme stylesheet:

themes/custom/yourtheme/css/style.css

Add the following CSS:

.custom-gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:30px;
}

.gallery-card{
position:relative;
overflow:hidden;
border-radius:10px;
}

.gallery-image img{
width:100%;
height:250px;
object-fit:cover;
display:block;
}

The property auto-fit automatically adjusts the number of columns
based on screen size, making the gallery responsive.

⭐ Step 5: Add Hover Animation

Next we add a hover zoom effect that makes the gallery look modern.

.gallery-image img{
transition:0.4s;
}

.gallery-card:hover img{
transform:scale(1.1);
}

When users hover over an image it slightly zooms in, creating a subtle interactive effect.

⭐ Step 6: Add Title Overlay

Now we add an overlay that displays the image title when hovering.

.gallery-title{
position:absolute;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.6);
color:#fff;
text-align:center;
padding:10px;
opacity:0;
transition:0.3s;
}

.gallery-card:hover .gallery-title{
opacity:1;
}

This creates a professional gallery overlay where titles appear smoothly
when hovering over images.

⭐ Step 7: Clear Drupal Cache

Whenever new Twig templates are created, Drupal cache must be cleared.

vendor\bin\drush.bat cr

Alternatively you can rebuild cache using the browser:

http://localhost/drupal10/core/rebuild.php

📌 Summary of Part 2

In this chapter we customized the Drupal gallery output using Twig templates.
We created custom templates for the view container and the individual gallery items.

We also implemented a responsive CSS grid layout and hover animation effects
to improve the visual appearance of the gallery.

In the next chapter we will enhance the gallery further by adding
JavaScript zoom functionality so that clicking an image opens
a fullscreen lightbox viewer.