Build a Responsive Colorbox Gallery in Drupal 8 (With Overlay Captions)

drupal 8 responsive colorbox gallery with caption text

An OSTraining member asked how to make a gallery with Colorbox in Drupal 8.

We’re going to walk you through the process of creating a beautiful Colorbox gallery with text overlaying the images.

Step #1. Install the Modules and Libraries

For this tutorial, you will need the following modules, themes and libraries

Step #2. Create the content for the gallery

  • Go to Structure > Content types. Create a new content type, specifically for this gallery
Creating a content type for a Drupal colorbox gallery
  • Create a Image field that is attached to your new content type.
  • Also, because this is just going to be a gallery, I removed the Body field from this content type.
Add fields for a Drupal colorbox gallery

Finally, create some content that you can use to test the gallery. You can enter some images manually, or use the “Generate Content” feature in the Devel module.

Step #3. Create the Image Style

  • Go to Configuration > Image styles
Create a Drupal image style
  • Create an image style with the Scale and crop effect. I choose 300 pixels wide and 300 high, but you can choose any size you want for your gallery.
Create a Drupal image style with scale and crop

Step #4. Create the view

  • Go to Structure > Views > Add new view.
  • Select your new content type and choose the “Gallery” type.
  • Choose you output your block as a view, not page.
  • Choose an ‘unformatted list’ of 9 ‘Items per block’
Creating a Drupal view
  • Add the Field for the image.
  • In “Format settings” add this to the “Row class”, as in the image below: ‘col-sm-4’. This comes from the Bootstrap theme.
Adding CSS style to a Drupal view
  • Now in “Advanced Settings” for the view add a CSS class ‘container-fluid’.
Adding CSS to a Drupal view
  • Save the View.

Step #5. Place the block

  • Go to Structure > Block layout.
  • Click “Place block” and choose your new view/block.

At the moment the view won’t look very good. However, we’re going to apply CSS to the view, and it’s not possible to see that inside the Views preview. We need to see the view live on the site.

Step #6. Edit the view

  • Go back to edit your view.
  • Select the “Content: title” field.
  • In the “Rewrite results” area, add the title tag as {{ title }}. This will allow us to style and move the title text.
Rewrite results for a Drupal field
  • Select the “Content: Image” field.
  • Update the “Formatter” to be “Colorbox”.
  • Update “Image Style for content” to use the style you created in Step 2.
Adding an image style to a Drupal field

Step #7. Add the CSS

Now because I called the view ‘Gallery Block’, if we add CSS to .view-gallery-block it will apply the CSS only to that view. I added some CSS that will allow the title to be displayed over the image as a caption. The image below shows the gallery grid:

images inside a Drupal Colorbox gallery

This next image shows an individual image inside a Colorbox pop-up:

The image inside a Colorbox pop-up

Here is the CSS I used:

 .view-gallery-block {
margin-top: 1em;
.view-gallery-block img {
width: 100%;
border: 3px solid #337ab7;
padding: 3px;
border-radius: 10px;
.view-gallery-block img:hover {
border-color: #ddd;
.view-gallery-block a {
color: ##28df35;
text-decoration: none;
.view-gallery-block p {
margin: 0 0 10px;
display: inline;
position: relative;
bottom: 60px;
left: 6px;
background: rgba(17, 17, 17, .5);
color: #fff;
padding: 0.4em;
border-radius: 10px;


0 0 votes
Article Rating
Notify of

Newest Most Voted
Inline Feedbacks
View all comments
7 years ago

Thank you for this tutorial.

I follow all the steps you mentioned but in stage 6 is not showing me the colorbox settings, where I can sellect gallery image grouping.

6 years ago
Reply to  Abu-Safiyya

Which version are you using?

Fareed Agbaje
Fareed Agbaje
6 years ago

Thank you for the tutorial. It was really helpful.

6 years ago

On Step 4, shouldn’t that read “Choose you output your view as a block, not page.” instead of “Choose you output your block as a view, not page.”?

6 years ago

Hi, and thank you. Why do you choose block and no page?

6 years ago

could you give us more details how to insert the CSS syntax? in which file?

Richard V
Richard V
2 years ago
Reply to  Hermann

Had to look myself but this explains how to do it..

5 years ago

This seems a bit cumbersome, or I’m doing it wrong. The only way I found to add photos is to create content for each photo. If I have 100’s of photos that seems quite unwieldy. Am I missing something?

Would love your thoughts, please comment.x