HowTo: Use Colorbox Module in Drupal 8

Microsoft picture manager displays pictures and so does Google's Picasa. But I think most of us will agree that Picassa does enhance the user experience by a huge margin because of the way the pictures are presented to the user. Stock Drupal too doesn't do justice to the way the images get displayed. The animation is somewhat dull as compared and it does not provide many functionalities.

As an option, we can use Colorbox in Drupal 8 which is a lightweight customizable lightbox entities and views formatter. It is used to extend the jQuery javascript library to include extra functionalities in an HTML document. We can build picture galleries, implement various effects to the images that we upload.

Well, the usage of colorbox just doesn't end with displaying uploaded images in a fancy manner. It can also be used along with colorbox load module to display node pages, user pages, views pages, web forms etc inside colorbox. 

In this article, we will discuss how we can use colorbox to make our websites more elegant and intuitive. 

How to use Drupal Colorbox module?

Install the Module - Using Composer

composer require drupal/colorbox

Using drush

Drush dl colorbox

Then enable the module using

Drush -y en   colorbox

You can install it by using drush 

Drush colorbox-plugin

This will install the colorbox plugin in your libraries folder. Or you can download the library from this link

https://github.com/jackmoore/colorbox/archive/1.x.zip

And rename the folder as colorbox and place it in the libraries folder 

After that, you are ready to use the colorbox module.

After installing  the module you can change the effects and styling option of colorbox by going to Configuration> Media > Colorbox Settings 

The library is required for making the colorbox module work

Therefore, let's start by making an image gallery.

1. After downloading and installing the colorbox module along with the required libraries, we head to the colorbox configuration menu by following, Structure/Content Types/Manage Fields.
   
   From the drop-down menu, we add an image field, choose a label name and click on save and continue.

   

2. The succeeding screen lets configure the field settings. We can set a default image for when no images are uploaded. An alternative text for accessibility purpose and a title. 

   

3. The Allowed number of values setting decides the maximum number of files that can be uploaded. To set it, select the desired option from the drop-down menu.
   
   Click on save field settings.
    
4. In the next window, we scroll down and set the supported image formats. The file directory defines where the uploaded images will be stored. By default, Drupal stores them in folders categorized monthwise. We can also configure the maximum and the minimum resolution and the size that a user will be allowed to upload. 

   

   TIP:  To avoid pixelation of images, set the minimum eligible resolution to a respectable value.
    
5. Now, we navigate to Structure/Content Types/Manage Display and scroll down to the Field created for using colorbox and from the format drop-down menu select Colorbox.
   
   Clicking on the gear next to the format option will enable us to customise how the image will be displayed, the effects that will be applied, how the image will be rendered in colorbox, the caption that will be displayed etc.. After updating all information with the desired options, we need to click update and hit save for the configurations to take effect.

   

6. Finally, we can add contents by clicking on add contents. To add images to the gallery, we need to scroll down and add images. We can change the order of the pictures by altering the weights which are numbered in ascending order by default. 
    
7. Hit save and head back to the site. Do you like what you see? I bet you do.

   

8. Well, that is not all. Colorbox can also be used to display linked objects as popups using colorbox inline. 

Using Colorbox Inline

To use Colorbox inline to display linked items as popups, we would also require IMCE module to be installed.

1. After installing the required modules, navigate to Configuration/Content Authoring/Text formats and editors.
   
   Scroll below to search for the Full HTML row and click on Configure as shown in the figure below.

   

2. Navigate to Toolbar Configuration and drag the IMCE link manager and image manager icons from the available buttons to the Active toolbar. After the configuration process, click on save the configuration button.

   

3. Now we can start to add contents by going to the add content menu. When we are in the CKEditor, we need to change the text format from Basic HTML to Full HTML (highlighted in green in the figure below)

   

4. To insert an image, we need to click on the insert image icon. This would bring up the IMCE file manager menu. Clicking on the upload icon would open up a window to select the desired files to be uploaded. When the upload finishes, the uploaded file should be displayed in the CKEditor. We click on the file and click on the insert link icon which will again pop up the IMCE file manager.
    
5. Follow the upload procedure as above to select the file to be linked. Finally, we need to add class="colorbox" just in front of the href tag in the HTML code (highlighted in yellow in the figure above) which can be exposed by clicking on the source icon (highlighted in blue in the figure above).

   

Using Colorbox Load

Colorbox load module requires the ng lightbox module as a dependency. This can load any kind of content, node, form etc. in a colorbox module. Setting up of this module is fairly quick and simple. All one needs to do is go to Configuration/media/NG Lightbox. This would open up a window to insert the path of the desired entities for example, /user/node 7 and click on save. Now, when the node 7 is being accessed, it should open up in Colorbox instead of opening up in a new tab.

Elegant animations would definitely enhance the user experience. Users are less likely to get confused navigating in case the contents are too similar. To scroll through pictures, making a Colorbox gallery available is much better because a user doesn't have to leave the current window to load the next image which can be done by using the navigation arrows.

Additional information about images can be displayed by linking images with the information file. The convenience factor does get boosted with the use of the Colorbox module. 

TIP: Clearing cache solves a lot of issues.

Integrating Colorbox with Drupal Views

In some cases, you might want to list the images of your article with a certain content type. This is possible only with the help of Views.  Here's how you can integrate colorbox module with views. 

1. Go to Structure > Views > Add new view
2. Select the content type. Here I am choosing the basic page. Choose you to output your block or page as a view or you can select both according to your requirement.
3. Add the Field for the image. And then configure (the field) by clicking on it. 
4. This will open a window like shown in the image below. 
5. Update the "Formatter" to be "Colorbox" and add the image style according to your choice. 
6. Click on save and your colorbox gallery is ready.