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

| Drupal
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;
} 


About the author

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