Colorbox

by Gisle Hannemyr

The Colorbox module XXXX.

Table of contents

Drupal extensions discussed in this chapter: Bootstrap5, Colorbox, Libraries, Views.

Introduction

Colorbox is a Drupal bridge module that provides integraton between Drupal and the colorbox jQuery library by Jack Moore.

The library page links to some nice demos. These are included in the library in the directories example1-5.

I recommend using a theme based on Bootstrap, e.g. Bootstrap5 to be able to use the Bootstrap grid system for layout.

There are many different ways to use the module. This note describes how to create a content type to hold multiple images (a "photo group", and to display those using Views as a gallery page.

Alterntives are:

  1. Just create a popup for a single image item.
  2. Create a block, using Views, to be able to embed the gallery on some page.

  3. Still use Views, but only have one picture per node. This let you use the Title as caption for each node.

Installing and enabling the module

Before installing the module, make sure Libraries are installed and enabled. You can do so with this pair of commands:

$ composer require 'drupal/libraries:^3.0@beta'
$ drush en libraries

Install the colorbox bridge module, enable it, and then use drush to download and install the library and place it in the directory /web/libraries below your site's webroot:

$ composer require 'drupal/colorbox:^1.8'
$ drush en colorbox
$ drush colorbox-plugin

noteThe module is not able to use composer to install the library, see DO issue: Discover colorbox library when installed with composer for details. Use this command instead. If you get the error 'Command "colorbox-plugin" is not defined.' from drush, the Colorbox is not enabled.

Create a Gallery content type

Start out by creating a content-type named "Gallery", using Drupal administrative GUI.

Add an "Image" field set up to hold an unlimited number of images. The set of images contained in a single node is called a "photo group".

colorbox_image.png
Add an image field.

If you're going to have more than one gallery, create a taxonomy called "Galleries", with a term for each gallery you plan to create.

Also, because this is just going to be a gallery, you may want to remove the "Body" field from this content type.

Create a square image style

Navigate to Manage » Configuration » Media » Image styles and create an image style with the "Scale and crop" effect, for example set to 200 × 200 pixels. Name it "Square (200x200), and machine name "square". We are going to use this style for the preview of a Gallery.

Create the first gallery

We're going to use the core Views module to create the first gallery.

Navigate to Manage » Structure » Views » Add new view.

Name the view "Gallery".

The name you give to the view is determining the class names that is wrapped around the elements and is what you need to use in the CSS. Example:

.view-gallery {
  margin-top: 1em;
}
views_cregallery.png
Add an image field.

technicalOne tutorial suggests visiting Format » Settings and setting "Row class" to "col-sm-4". This makes the gallery limited to 4 (out of 12) columns on large screens, and adapts to the sceen width on small. IMHO, this does not make sense.

Now, set up the view to show the Image field:

Naviagte to Fields » Content: Image Change the "Formatter" to "Colorbox" and change "Image style for content" to use the style you created earlier.

views_colorbox.png
Use "Colorbox" as the "Formatter.

There are few more settings here, but we shall leave those alone for now.

The default configuration is set use a comma (,) as a simple separator betweem multiple values. To remove it from the image field configuration. Scroll down and expand "Multiple field settings". Make sure that "Display all values on the same row" is ticked, that "Simple separator is ticked", and that the "Separator" field is empty:

views_remcommas.png
Remove the separator.

The separator is a hyperlink. Make it invisble using CSS.

.view-gallery a {
  text-decoration: none;
}

The finished gallery, displayed using Views, may look like this:

colorbox_album.png
A gallery created with Colorbox.

The SCSS used for the above gallery is:

// Colorbox

.view-gallery {
  margin-top: 1em;
} 

// Set the width to the image style width + 4 x border = 212.
.view-gallery img {
  width: 212px;
  border: 3px solid #337ab7;
  padding: 3px;
  margin: 6px 3px 6px 3px;
  border-radius: 10px;
}

.view-gallery a {
  text-decoration: none;
} 

.view-gallery 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;
}
Source: OSTraining.

Style the popup

Configure Colorbox by navigating to Manage » Configuration » Media » Colorbox settings.

Colorbox comes with nine preset styles for the popup.

cb_default.png
Default.

Plain:

cb_s-syndrome.png
Stockholm Syndrome.
cb_eks1.png
Example 1.

Example 2:

Example 3:

Example 4:

Example 5:

None:

Creating galleries

There are two ways you can use Colorbox:

  1. Add an image gallery to a node as multiple fields (Field Formatter)
  2. Create an image gallery using Views (Views Style Plugin)

Field-based galleries

To add galleries to individual nodes, and manage them individually, use the Colorbox field formatter. With this method almost any multiple-value image or file field can be displayed as a Colorbox gallery.

Allow an image or file field to hold multiple values. Add all the images you want to hold in a single gallery to the field. Visit the "Manage Display" tab for the content type. Select the "Colorbox Gallery" format option for the image or file field. You can tweak a number of formatter-specific options to your liking.

The Colorbox field formatter is also compatible with Media and File Entity, so file fields constructed through Media widgets (e.g. using reusable images from a global media library) can also become Colorbox galleries, and can even leverage file field data for titles and captions.

To tune the visual apperence, manage display for the field.

Colorbox library - lite config:

More: Using the Colorbox field formatter.

Views-based galleries

If you need to group image data from multiple nodes/entities/files into galleries, and leverage the flexibility of views to organize everything, you can use the Colorbox views style plugin. This method allows Colorbox to be adapted to more advanced media management setups where image data is stored in dedicated entities/content types and where more complex organizational tools may be needed (taxonomy and contextual filters, etc).

With this formatter any views that lists files, or content containing image/file fields can become Colorbox galleries. These views may be based on your own design and information-architecture, or be provided by other gallery-like modules such as Node Gallery.

More: Using the Colorbox views style plugin.

Final word

A collection of links about Colorbox:

Last update: 2022-03-09 for D7 [gh].