In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Create a Drupal Image Gallery with Colorbox module

Create a Drupal Image Gallery with Colorbox module

by Adrian Ababei on Aug 25 2017

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 

Create a Colorbox Drupal Image Gallery: add a new image field

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

     

Create a Colorbox Drupal Image Gallery: create an image style

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”!

 

Create a Colorbox Gallery in Drupal 8: add a gallery content type

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!      

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 2)
Ready to compare the features of 5 other best headless CMS in 2020? We've got them ready for you to just dive in and: survey the key reasons why you'd choose one over the other discover each one's main use cases narrow down your options … and pick the one that matches your requirements. What Is the Best Headless CMS in 2020? 5.6. Directus An open source tool for managing and delivering content across an entire network of platforms and devices. And here are some of the top reasons for choosing Directus: it provides your editorial team with an easy to use admin app for managing content it can be in the cloud or self-hosted it provides API for your development team to fetch content 5.7. Netlify CMS  One of your top 10 headless CMS options, an open source one, that you get to add to any static site generator of your choice. A React single-page application that provides you with an easy to use UI, playing the role of a… wrapper for your Git Workflow. Basically, when using Netlify CMS your content gets stored in your web app's git repository (as markdown files), close to your codebase.   "How does a Netlify CMS Gatsby setup work?"   It's pretty straightforward: You enter your content via that user-friendly interface, then Gatsby uses it to come up with the right pages for your web app. Why would you use it? it fits both large and small-sized projects, with fewer pages to create, to add content to, to edit, and to manage you get to review/preview your content and make changes in real-time, and even control entries status in editorial workflow mode it provides you with an easy-to-use UI, with just 3 tabs: workflow, media, and content you're free to use it with any static site generator you get to extend its functionality: add your own UI widgets, editor plugins, customized previews, etc. 5.8. GraphCMS     An API-first content management system, a GraphQL-native one, that allows you to distribute content across multiple digital platforms. And not just anyhow, but… within minutes. Your developer team gets to create content APIs in no time, whereas your content team gets all the tools they need for a smooth editor experience.   Source: capterra.com GraphCMS vs Contentful: Main Differences GraphCMS works best for enterprise and mid-market companies, enabling them to build highly scalable applications GraphQL is its underlying technology: an open source query language for APIs, that's been growing more and more popular among developers Contentful targets top global brands, helping them distribute digital content experiences across complex networks of markets and channels REST is its underlying technology: a programming paradigm for distributed systems And here are 2 good reasons for choosing GraphCMS as your go-to headless content management system:  you get a CMS that's client-side and JAMstack compatible you get to tap into the benefits of a JAMstack approach to development (JavaScript & Markup & API) 5.9. Cosmic A cloud-hosted headless content management system that provides you with both GraphQL and REST APIs. But what makes Cosmic one of the best headless CMS in 2020? Why choose the Cosmic Headless CMS?  it ships with features like content modeling, media management, localization, and webhooks it grants you a smooth editor experience with its WYSIWYG  editor, that you can use to incorporate (by embedding code) third-party services like Typeform and GitHub. it integrates smoothly with AWS, Slack, Algolia, Stripe, HubSpot 5.10. Kentico Kontent A cloud-based content delivery API that turns your structured content into content that's easy to be "consumed" by any device or digital platform that you might use as a front-end delivery layer.  Why would you choose it over other great options of headless CMS? you get an AI chatbot when using Kentico Kontent it provides webhooks and custom elements that make third-party integrations a lot smoother you get content management API enabling content consumption And we've come to… the END of the list of 10 best headless CMS in 2020. Which one checks the most features off your list? Now, if you're facing a "Headless Drupal 8 vs Contentful" dilemma, we're here to: help you identify the one that works best for your business and your requirements make your headless CMS-based project work Just drop us a line!   Image by tdfugere from Pixabay   ... Read more
Adriana Cacoveanu / Sep 26'2020
10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 1)
Overwhelmed with options? Are you building your first (e-commerce) headless CMS and you don't know what headless CMS platform to choose?  What are the best headless CMS in 2020, so you can at least narrow down your choices and start... somewhere? Which system matches most of your feature requirements? Here's a top 10: 1. But First: What Is a Headless CMS, More Precisely? Relax, I won't bore you with too many details — we already have an in-depth post on the differences between headless and traditional CMS. So, if we were to sum up the concept in just a few words, we could say that: A headless content management system is an architecture where content is separated from the presentation layer (the client-side front-end). Meaning that you get to create, store, and edit "raw" content (with no design or layout) in the backend and deliver it wherever needed —wearable, mobile app, website — via API. In short, what you get in a headless architecture is: a database to store your content in a dashboard for editing your content Source: Zesty.io As for the "head" that serves your content to the end-user : you're free to build your own front-end, from the ground up … and even multiple front-ends, if needed, that will all use calls from the API to retrieve and display content 2. … Then What's a Decoupled CMS? Headless CMS vs decoupled CMS: what's the difference? And why headless over decoupled? The role that the API plays… That's what makes the difference (and why you'd want to go for a headless approach): If, in a decoupled architecture, the API plays the role of an intermediary between back-end and front end, in a headless architecture the API can be used by any of the front-end portions for pulling data. In other words, a decoupled CMS does come with a built-in front-end delivery layer, that you can rely on, but a headless approach is an API-driven content repository. Which gives you more flexibility for delivering content to any type of display layer. … to multiple "heads". You're free to distribute it wherever it needs to get displayed. 3. Why Choose a Headless CMS? Top 9 Benefits Before I "divulge" the best headless CMS in 2020 to you, here's a shortlist of the key advantages of using a headless CMS software: you get to engage your customers with personalized content across an entire network of digital channels, at different stages in their journey you can deliver richer digital experience, tailored to each channel you gain platform independence you're free to choose your technology of choice you benefit from cross-platform support you get to manage your content from a central location and distribute it to multiple platforms/IoT-connected devices, in a universal format you're free to manage all your platforms from one interface your development team gets to choose the development framework of their choice, integrate new technologies and, overall… innovate you're free to redesign as often as you need to, without the dread of re-implementing your entire CMS from the ground up     4. … And When Should You Use It? 5 Best Use Cases  How do you know for sure that you need to adopt this approach? You know it because your scenario describes one of the following use cases for headless CMS: you're building a site using a technology you're familiar with you're building a website with a static site generator you're building a JS-based website or web app you're building a native mobile app you're building an e-commerce site and you know that the commerce platform you're using won't… cut the mustard as a CMS; or you need to enrich product info in your online store 5. What Are the Best Headless CMS in 2020? Top 10 "Which CMS should I use?" you wonder. "The one that meets most of your requirements…" So, you should start by pinning them down. What features are you looking for in a CMS? Maybe you need a system that should: be straightforward and easy to use for the marketers/non-technical people in your team be built on… Node be highly customizable and editable for your content team to be able to change overlay text, logo, background video/image be simple to set up integrate easily with Gatsby support multi-site setups not be tied up to (just) one specific database provide ease of content entry and rich-text support provide a granular permission system provide native support for content types What are the features that your project couldn't live without? Now, with that list of "mandatory" features at hand, just drill down through your top headless CMS options in 2020. Here they are: 5.1. Storyblok A purely headless CMS that ships with a visual editor, as well. Why would you go for Storyblok? What makes it one of the best headless CMS in 2020? it provides the experience of a page builder for all those non-technical users in your team: editors get to manage content via a more user-friendly interface it grants your developers easy access to the APIs they need 5.2. Prismic Its major selling point? It allows you to choose your own language, framework, technology… And these are the 3 good reasons to go with Prismic as your headless CMS: it allows you to model your content schema and to add your content you're free to choose whatever framework that meets your feature needs: React, Vue, Next, Nuxt, Node, Gatsby… you're free to choose either GraphQL or RESTful API to query content 5.3. Drupal 8 Headless CMS   Another great option is to exploit Drupal's headless capabilities and pair them with the JavaScript framework of your choice. Here are some of the best reasons why you'd use a Drupal 8 API-first architecture: Drupal's a mature and enterprise-level headless solution backed by a wide community, used by more than 1 million sites globally; you get to tap into its massive module collection and even create new custom ones to extend your website's functionality its JSON:API follows the JSON:API specification; developers in your team can start using the API even if they're not experts in working with Drupal you get to load your GraphQl schemas straight from your Drupal content repository; there's a specialized module for this: the GraphQL module you get to use all of  Drupal's famed features (granular access to content, processes, workflows, modules, etc.) right away; you get them out-of-the-box since the REST API is… rooted deep into Drupal 5.4. Strapi, One of the Best headless CMS for Gatsby. It's an open-source Node.js headless CMS, a "host it yourself" one, that allows you to build Node.js apps in… minutes. Why would you use it? because it generates available RESTful API or uses GraphQL shortly after installation, making data available via customizable API because it allows your developers to invest all their resources in writing reusable app logic (instead of having to use some of that time to build an infrastructure) because it's fully JavaScript because it supports plugins that extend the platform's functionality because it's open-source: you'll find the entire codebase on GitHub  5.5. Contentful  Looking for a platform-agnostic solution? A… content delivery network that would enable your development team to manage and distribute (and reuse) content to multiple channels? Then this is the API-driven headless CMS you're looking for. Here are 6 other reasons why you'd want to put Contentful on your shortlist: consistent APIs easy to set up you're free to create your own models easy to use: ships with a robust, non-technical, user-friendly UI you get to add custom plugins quick and easy you get to set your own schemas to get displayed the way you want them to, across different apps Good to know! There's even a Shopify extension available. What it does is connect your online store to your content, stored in Contentful. And if you'll need help with building, fine-tuning, and integrating your content hub, we're ready to tweak Contentful to your needs.  END of Part 1! Stay tuned, for there are 5 more candidates for the title of "the best headless CMS in 2020" waiting in line.  Image by Couleur from Pixabay ... Read more
Adriana Cacoveanu / Sep 25'2020
Drupal 9 Modules Readiness: How Hard Is It to Find Compatible Modules and Build a Website in Drupal 9?
Is it (still) too early to give Drupal 9 a try? To start fresh and build a website from scratch in the latest version of Drupal? Should you stick to Drupal 8 for... a little longer and upgrade later? How difficult will it be for you to find compatible Drupal 9 modules (and themes)? Let's find out: 1. But First: Why Drupal 9? What are the biggest benefits of Drupal 9 over Drupal 8? Why would you choose precisely this version of Drupal to build your new website with? because of the automated updates that it makes possible because of the headless support that it ships with because of the robust multilingual capabilities because of the improved performance: your web pages will load faster thanks to the BigPipe technology because it removes a lot of the legacy code because of its layout features because of its extensibility: you get to incorporated third-party systems quick and easy because of its media library and robust media functionality because of the new, Twig-based theme engine because it's easier to use: you can make the most of its in-place editing (CKEditor) And particularly because there will be no more major re-builds (aka "major pains to upgrade"). Instead, a set of new features gets released every 6 months, including new improvements and additions to be incorporated seamlessly into your Drupal 9 build. 2. Most Drupal 9 Modules Don't Change at All So, stay assured: you won't be having a hard time finding compatible modules for your new Drupal 9 website. Many of the modules on Drupal.org have been, are being made, and will be made compatible with Drupal 9. There's a collective effort coming from the Drupal community in this direction. And where do you add that the process is pretty straightforward:  Same code, but without the deprecated APIs. 3. But What About Those that Do Need Changes? For there have been changes under Drupal 9's hood. Changes in coding with a direct impact on some modules and APIs. Which means that some modules have turned from Drupal core modules to... outside dependencies: this is good news, considering the performance gains you get but also a challenge if you were relying precisely on those modules for your Drupal 9 website Luckily, you have at least 2 helpful tools at hand that you can use to: identify the Drupal modules that still need to get updated apply the fixes needed to make those modules compatible with Drupal 9 3.1. The Upgrade Status Module Why use it? Because it offers you a view of all that has been changed in Drupal.  Source: Drupal.org You have links to the modules' pages there, that you can access to review those changes. 3.2. The Upgrade Rector Module The great thing about this tool is that it provides you with automated code fix suggestions to help you make your target modules Drupal 9 compatible. Source: Drupal.org 4. Some Module Get Removed from Drupal 9 Now, there are a few Drupal modules that didn't get the chance to grow into Drupal 9 modules. And I'm talking here about: Simple Test, that's now replaced by PHPUnit Place Blocks, now replaced by the Layout Builder  As you can see, in both cases you get to use better alternatives. So, it's just a matter of favoring more powerful solutions. Good to know! Expect other modules and themes (i.e. the Classy theme, the Stable theme) to get deprecated and removed by the time we reach Drupal 10. 5. What About the Contributed Modules? What if you need more than the out-of-the-box Drupal 9 modules to build your new website? What if you depend on particular contributed modules? Or on... many contributed modules? Well, then things get a little more challenging... Because many of the contributed Drupal modules still need to be made compatible with Drupal 9. They need some time to catch up with the new version of Drupal. Take for instance: updating tests to PHPUnit or updating deprecated API usages. Now, what you can do is give a helping hand to accelerate the updating of these modules. And the steps/best practices to follow are pretty simple, as suggested in this guide on Drupal.org : use the patch referred to here, create an issue in the module project (first, make sure it doesn't exist already), and choose a title suggestive enough to let the maintainer know that it needs to be tested for Drupal 9 deprecations add an explanation for the signaled issue ... and follow all the other steps suggested in that Drupal.org guide. Tip! Ask that contributed module's maintainer how he/she would like to address the issues you're signaling. Because the guidelines available for Drupal core aren't always relevant for addressing contributed module issues, as well. The END! Now, assuming that: you only need a limited no. of contributed modules for your new Drupal 9 build it's not a heavily customized website that you're building ... how do you get it up and running in? We're here to help. Just drop us a line! We've been building Drupal websites since... Drupal 5. Image by Siggy Nowak from Pixabay   ... Read more
Adriana Cacoveanu / Aug 28'2020