By: Bikash
May 22 2018

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?

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.
    adding a new image field
    Adding a new image field
  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. 
    Image Field configuration
    Image field configuration
  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. 
    Settings for the uploaded images.
    Settings for the uploaded images
    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.
    The menu appears after clicking the gear icon
    The menu appears after clicking the gear icon
  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.
    Image gallery
    Image gallery
  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.
    Full Html row
    The Full Html row
  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.
    Highlighting the IMCE link manager and image manager icons
    Highlighting the IMCE link manager and image manager icons
  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)
    CKEditor where changes are made in the highlighted areas.
    The CKEditor where changes are made in the highlighted areas.
  4. To insert an image, we need 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).
    Colorbox inline in action
    Colorbox inline in action

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.

Bikash is fond of lines of code that does magic. He loves listening to techno and is a budding car-geek. Likes spending his time browsing through tech sites. Bikash is a big-time Batman fan and believes that Batman can beat anyone.