Create a Drupal Image Gallery with Colorbox module

Web design trends may come and go, yet a visually-appealing image gallery never gets outdated! So, learning how to create a Colorbox Drupal image gallery in Drupal 8 is crucial if you aim to “dazzle away” your visitors!

And before we delve deep into our step-by-step guide on putting together your gallery, we feel like stressing this out: Colorbox for Drupal 8 is an image field formatter in entities and views! Nothing less, nothing more!

But one that:

• pairs with the Insert module
• easily incorporates image styles and image field
• it's ideally customizable
   

Now let's get straight to the core of our tutorial, which will take you from installing to key setups, to customization and all the way to theming your Drupal image gallery with CSS:

Step 1: Install The Colorbox Module and Its Libraries

Installing Colorbox will be a two-step stage, in fact:

1. First, you download and install the module itself
2. Next, you install the resources-loaded library that your module won't actually work without

And it seems that “2” is your “lucky number” in this process, for there are 2 possible ways of installing the Colorbox module on your Drupal 8 site:
 

1. you either download it to your PC, then navigate to the “Extend” page and hit the “Install new module” button
2. or you right-click the module's download link, copy its location, paste it on your Drupal 8 site's “Extend” page (logging into your admin panel, obviously) and then... hit the “Install new module” button

The choice is yours, the result is the same!

And you're almost done! “Almost”, for you still need to install your library in the “sites/all/libraries” folder on your Drupal site. Just access the same link on Drupal.org, go to “Dependencies” and click on the first link that you have there: “The Colorbox plugin 1.x“

Luckily, Drush saves the day, once again (and your time, as well) providing you with a simple command to install your library: drush colorbox-plugin. Easy peasy!

Note: since we're at the installing phase, we seize the chance to suggest you go ahead and install a Bootstrap-based theme, as well!
 

Step 2: Create Content for Your Future Drupal Image Gallery

Now that everything's successfully installed on your computer and ready to be leveraged, let's create some content for our virtual gallery, shall we?

Here are the easy steps to take:

• Structure > Content types
• Create a new content type for your Colorbox image gallery
• Set up a new Image field for your newly created content type 

Now it's time to run a quick test on our gallery and you'll need content for this; “dummy” content accepted, too! 

But first things first: name your new gallery! Then manually upload some of the images that you've already prepared for your gallery or use the Devel module for generating dummy content.

News alert: you get to leverage the MultiUpload option added to Drupal 8 and enter all your images at once (instead of one at a time, like we used to do it)!

Now let's go to the next key step of this tutorial on how to create a Colorbox Drupal image gallery in Drupal 8: creating the image style!
 

Step 3: Configure The Image Style

Now have some fun configuring those images to your liking:

• Navigate to Configuration > Image styles (it's right under “Media”)
• Name your image style
• Hit the “Create new style” button
   

Great! Next, it's time you added a new effect to your newly created image style so that your images get sized the way you need them to.

For this:

• Go to Effect
• Select the Scale and Crop effect setting the width and height of your choice
• Hit “Update Style”
   

Step 4: Put Together a View When You Create a Colorbox Drupal Image Gallery

You must be looking at the images in your gallery getting all piled up one under the other right now, with... no Colorbox effect whatsoever!

No need to despair! It's perfectly predictable and easy to “fix”: you just need to create a view: Structure > Views > Add new view!

Note: once you choose your new content type to keep in mind to select the “Gallery” type and to have your block displayed as a “View”, not as a “Page”!
 

Next “Add the Field” for your image. Then:

• Enter your class type: Block > Style Options > “Row class”
• Name your class: Block > CSS class > CSS class name(s)
• And finally “Save” your view
   

Step 5: Place Your New View/Block

And it's time you placed your newly formatted block (or “block displayed as a view”, if you prefer), a step you can't overlook when you create a Colorbox Drupal image gallery: 

• Go to Structure > Block layout
• Hit the “Place block” button and select your new block
   

Note: your view might not look exactly visually-enchanting right now. Yet, no need to worry, for we'll be applying CSS to it later in this tutorial. Also, at this stage of the process, you can't preview it in Views; you can only visualize it once it's live, on your website.
 

Step 6: Make The Due Adjustments to Your View 

Since your view is not yet “ready to be shown off to the world”, you need to go back and edit it:
 

• Choose the “Content: title” field > “Rewrite results”: here type in your title tag as {{ title }} (you'll then be able to style the title text and to move it, as well)
   
• Choose the “Content: image” field> “Formatter” field > set it to “Colorbox” > “Image style for content”> set it for the image style that you've already created at Step 2
   

Step 7: Add Some CSS Styling 

And it's about time that you “beautified” your new Colorbox gallery! Define the way your images and text will get displayed by theming it with CSS! For instance: you might fancy its title to be displayed over the images in your gallery, as a caption. 

The location of your CSS file will depend greatly on the theme you'll choose to use!

The END! How about putting into practice all these info, tips and tricks here to create a Colorbox image gallery in Drupal 8? One to upgrade your current content and to impress your site's visitors with!