In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, 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

Drupal Commerce vs. Magento - Who Wins the Battle for eCommerce?
  In 2021, it is expected that about 27.2% of the world population will shop online at least once.  A lot of potential customers out there, right? As eCommerce is becoming the new norm, digital businesses seek out ways to thrive in this competitive landscape and position themselves as leading trend-setters.  To do that, companies need to realize the power of digital transformation and how they can embrace it in order to support the modern demands of speed and accessibility that customers require today.  This starts with leveraging the right tools for building robust digital assets. One of these tools is represented by eCommerce platforms, which are getting increasingly popular for businesses that seek to deploy an eCommerce system.  Drupal Commerce and Magento are two of the leading eCommerce solutions on the market and are often seen as direct competitors in the industry.  This article provides a side-by-side comparison of these two platforms in regards to technical capabilities, development, costs, scalability, security, and mobile responsiveness. Hopefully, this information will help you narrow down your choice in order to ensure that you choose the best fit for your business needs.    Key eCommerce Capabilities Enabled by Drupal and Magento Drupal Commerce was released in 2011 and offers an open-source application framework that supports retailers in building and managing inventory, track orders, or handle payments.  Magento's initial release was in 2008. This PHP-based eCommerce site provides high levels of PayPal protocol integration and supports 12 worldwide payment gateways.  Both platforms offer, through native features or third-party add-ons, the following benefits: Intuitive, easy-to-use user interface and control panels. No technical knowledge is required to customize and edit basic features. Full-featured CMS that supports social sharing. Business-centric structure for online stores. Native integration of inventory-driven advertising material Integration capabilities with third-party analytics, invoicing, or quoting solutions One thing to keep in mind is that neither of these eCommerce platforms is a "plug and play" solution and making the most out of their potential may require further expertise.    Headless eCommerce The headless version of Drupal Commerce has been in the spotlight in the last few years. This new initiative is an eCommerce solution that stores and delivers content without a front-end delivery layer. It's an API-driven implementation that transforms eCommerce functionality, making it available across a wide range of potential host environments.  A headless eCommerce model inclines towards a more SaaS-oriented, platform-agnostic solution that allows for better employee adoption and considerable time savings across IT departments.  When it comes to Magento, the open-source eCommerce platform, headless eCommerce is equally prioritized. Both Drupal Commerce and Magento are supporting headless models as the future of eCommerce.    Pricing Drupal eCommerce's technical cost of entry is free. However, depending on scope and scale, the costs of developing and maintaining performant and secure eCommerce servers might reach tens of thousands of dollars.  Drupal Commerce project costs are directly proportional with a business needs for specific development architecture, module integrations, custom theme styling, or particular feature integrations.  Magento's newer modules are not offered as open-source and upgrading from Magento Open Source to Magento Commerce might be challenging.  From this financial point of view, Drupal Commerce seems to be a clear winner.    Scalability Drupal Commerce has relevant capabilities of staying highly performant at scale. However, this CMS platform does not provide out-of-the-box database sharding and it can only be implemented on a third-party basis.  Drupal Commerce has lower requirements than Magento Commerce when it comes to the web server—the minimum required RAM for PHP is 64 MB and production systems usually require 128 or 256 MB.  Drupal Commerce-based implementation splits the eCommerce experience across three related Drupal domains. As a result, scaling is better, bottlenecks are eliminated, and the content and purchasing experiences are efficiently separated.  On the other hand, Magento's cloud hosting solves a large number of scalability issues, although at a higher price. The minimum RAM requirement of 2 GB will probably not scale well and distributed networks or caching may need to be deployed with greater care to keep up with the heavy load.    Security Drupal is proven to be the most secure CMS and Magento's infection rate is much higher than Drupal's. From the point of view of security, Drupal Commerce is a winner for businesses that want to prioritize secure platforms.  Source: Sucuri.net   Mobile Responsiveness As most websites transition to a mobile-first approach, eCommerce platforms that prioritize mobile responsiveness are a must.  Fortunately, both Magento Commerce and Drupal Commerce provide robust mobile capabilities to satisfy the need for accessibility and performance.  Drupal Commerce's themes allow building a fully responsive design for eCommerce websites and offer screen flexibility for creating versatile experiences. The most popular themes like Corolla or eStore provide: Multi-level responsive header menus Custom layouts and color options Box shadow and background textures Custom field additions Magento Commerce is close to Drupal when it comes to mobile optimization capabilities. Its responsive web design features help users create optimal viewing experiences for multiple devices. Magento Blank or Luma are out-of-the-box themes that deliver a fully responsive design.   Who's the winner for eCommerce? While both Drupal Commerce and Magento Commerce are reliable options for a digital company that wants to thrive in the eCommerce market, every business has its own unique needs and requirements. Choosing the software that best supports these needs is a process that involves a lot of research and planning.  If you want to speed up this process and ensure that you reach the right decision, don't hesitate to contact Optasy for professional advice and support.  Discover which platform is most suited to provide a robust eCommerce experience for you and your customers.  Photo credit: Mark Konig on Unsplash.   ... Read more
Raluca Olariu / Apr 06'2021
Drupal DevOps Best Practices for 2021
  Today, businesses interact with their customers in many forms of digital services on all kinds of devices. As the digital world is more and more present in our lives, delivering streamlined experiences at the tip of your customers' fingers is the key to success.  A vital role in delivering rapid, accessible IT services is played by DevOps, a set of practices that brings software development and IT operations together. And when it comes to Drupal web development, DevOps represents a valuable instrument that can maximize the potential of Drupal-delivered projects.    How does DevOps work and what benefits does a DevOps model deliver? DevOps, the culture that encompasses most digital businesses today, uses automation and advanced tech stacks to add a new layer of velocity to a company's infrastructure. “DevOps represents a change in IT culture, focusing on rapid IT service delivery through the adoption of agile, lean practices in the context of a system-oriented approach. DevOps emphasizes people (and culture) and seeks to improve collaboration between operations and development teams. DevOps implementations utilize technology — especially automation tools that can leverage an increasingly programmable and dynamic infrastructure from a life cycle perspective”. - Gartner, Inc. Businesses that incorporate a DevOps model into their workflows see benefits like:   Scalability. Fundamental processes like infrastructure and development are operated at scale, which allows for a more efficient approach to developing, testing, and producing environments in a repeatable and streamlined way. Faster and more reliable delivery. The modern customer's need for speed is real, and DevOps can support organizations in their quest to speeding up feature releases, bug fixes, and other types of upgrades. Continuous integration and delivery are two critical practices that can automate the release process. High velocity. Adopting an efficient DevOps model allows professionals to build digital innovations faster and keep up with the trends imposed by ever-changing markets. Security. When adopting DevOps, you don't have to compromise on safety as DevOps models provide automated compliance policies and configuration management mechanisms.   DevOps best practices To make the most out of DevOps, there are some key practices to follow when implementing your model:   Leverage microservices architecture, which allows breaking down large systems into more specific, independent projects. As a result, developers and architects have more flexibility over managing these projects, and applications are more pliable and allow faster innovation. Install minor updates on a regular basis to solve issues and fix bugs quicker. The DevOps model aids companies in deploying updates more often and constantly optimizing their ongoing processes. Use continuous integration and continuous delivery to overcome operational challenges in complex development workflows.  Don't forget about infrastructure as a code, as automating your infrastructure provides better computing resources and higher responsiveness to possible alterations.    DevOps for Drupal development Implementing a DevOps model into your Drupal development workflow will not only accelerate your development cycle and delivery but will also contribute to better user experiences and business outcomes.  As more companies are adopting DevOps models (according to a recent report, 60% of businesses are using or are considering DevOps for their organization), it is expected that DevOps will gradually become even more essential for any digital business. With this growth will come better opportunities for building future-ready Drupal deployments and web experiences suited for the modern customer’s complex needs.    Wrapping Up DevOps continues to grow in new industries, opening possibilities for enhancing security, product monitoring, development, and cluster computing. As it will become the new norm, DevOps will continue to integrate more departments, improve solutions and designs.  As we've seen, DevOps models can also support a Drupal development team that focuses on improving project timelines and delivery. Optasy is the right partner for fostering digital innovation and can help you create customized Drupal digital experiences.  What do you need support with?  Photo credit: PCB-Tech on Pixabay.   ... Read more
Raluca Olariu / Apr 02'2021
Tips and Tricks for Building Drupal Websites
  "A successful website does three things: It attracts the right kind of visitors It guides them to the main services or products you offer It collects contact details for future ongoing relation." - Mohamed Saad   When embarking on the quest to building successful websites, developers and website builders face various challenges such as: Crafting the site without coding Designing a good structure and making it appealing to visitors Adding specific modules and features Fixing bugs and disrupted features Connecting your brand new website to services like Google Analytics   Sailing through the rough waters of web development can be tricky at times. However, you shouldn't be discouraged. There are plenty of tools and techniques that can help you navigate website creation more skillfully, and this article will guide you through leveraging some of them. More specifically, we'll focus on Drupal web development and outline some essential tips for crafting more successful Drupal websites.  What types of websites can you create with Drupal? If your new to using this CMS, then you might be asking what Drupal can do for you. Well, Drupal is an excellent choice for almost any type of project: Personal or business websites E-commerce sites Blogs, portfolio, art, social networking websites Forums and news sites, etc. As you can see, Drupal is a versatile software that can address a wide range of needs and requirements. You only have to know how to use it to your advantage.  Keep reading and get more familiar with the world of Drupal web development.   3 Elements to Consider When You Start   1. Drupal modules. From managing user accounts to organizing basic content, Drupal offers a wide range of functional modules. It's important to remember that Drupal is known for its fantastic customization capabilities. Take advantage of the suitable modules to build personalized sites that match the needs of your visitors.    "Optimizing for impact means creating software that works for everyone. In recent years, our community has prioritized accessibility for users with disabilities, and features like lazy loading of images that help users with slower internet connections. Drupal's priority is to continue to foster diversity and inclusion within our community so all voices are represented in building an Open Web." - Dries Buytaert, founder of Drupal.   2. Web hosting allows all your site content to be seen anywhere at any time. There are some key factors to consider when choosing your web hosting service:               - loading speed: consider a host that loads faster than the current average, 850 ms.               - uptime score: look for hosts that provide high uptime scores, preferably above 99.5%.              - customer support: collaborate with a host that provides high-quality, responsive, and reliable support.              - cost: choose a host that you can afford and count on for reliability and professionalism.   3. Environment. Drupal web development is a complex process that requires focusing on functionality, appearance, or code integrity. Many elements contribute to successful side building and the environment that revolves around your Drupal project is one of them. Good environments can foster growth and are usually dependant on the following factors:                - How big the project is. This allows you to plan more efficiently, especially when dealing with multi-project environments.                  - The size of your company. This is related to the growth of your business and is underpinned by elements like discipline, culture, management, knowledge, etc.                - How skillful your team is. Having a highly experienced team that is reliable and efficient is essential when it comes to the environment.    How to maintain your Drupal website   Proper website maintenance can be challenging. Here are some aspects to pay attention to. Status report This is a feature provided by Drupal that monitors your site's health. It checks folder permissions, disruptive modules, or libraries. The Status Report feature also helps with debugging technical support issues, providing excellent support for your maintenance practices.  Cron  This is an automated task that your Drupal website runs on periodically. It performs scheduled duties like cache clearing, sending emails, or reminders, and it doesn't involve any manual intervention. This tool also performs routine maintenance for the System Module and checks for available updates.  Caching In Drupal web development, there are two modules for caching: The Internal Dynamic Page Cache Module that aims to accelerate site speed. The Internal Page Cache Module which caches pages for anonymous users in the database.  Deployment Drupal deployment allows users to move content from one Drupal site to another. More precisely, when editing your Drupal site, it is helpful to use different environments to modify or test your content without harming the live site's performance. The changes are then deployed through an automated process.    When it comes to Drupal website maintenance, it often saves a lot of resources to hire a Drupal agency to do it for you.  Optasy can help you navigate the sea of challenges that come with your Drupal project. Be it your digital strategy, web design project, or maintenance services, count on us and leave your worries behind! Photo credit: Sam Dan Truong on Unsplash.  ... Read more
Raluca Olariu / Mar 23'2021