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

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

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

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

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'

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

• Now in "Advanced Settings" for the view add a CSS class 'container-fluid'.

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

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

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:

This next image shows an individual 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;
} 

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.