How to Create an Image Gallery Using Views in Drupal 8?


Introduction: Image Field, Views, & Photo Album Solutions

This Tutorial will show how to create an Image Gallery with support for responsive thumbnails & mobile themes for Drupal 8 using Views, CCK Fields, and Colorbox JavaScript support.

In order to build the gallery, the Tutorial will discuss two methods:

  1. Using the Image Field module and Views Table Grid for display.
  2. Using the Photo Albums module and Colorbox JavaScript for display.

The first method requires the set up of a custom Drupal 8 content type for the Images with fields, while Photo Albums has this pre-installed with crop & image effect options on uploads.

To get started, you'll need a Drupal hosting service (i.e., a hosting service that supports Drupal).

Step One: Install the Required Modules & Dependencies

Start: Download the required module files from Drupal.org and install them at: admin/modules/install using the zip/gzip files or similar method (FTP, Git, Drush, etc.).

Required Modules - Download Links:

Note: In order to install the crop functionality, the files from Cropper must be installed.

Prerequisites: If not already installed on the Drupal 8 CMS, install the Libraries API module.

Configuration: Download & move the Cropper JavaScript files to the /libraries folder on the web server after the Libraries API is installed on Drupal 8 & check reports for confirmation.

How to Create an Image Gallery Using Views in Drupal 8?

Prerequisites: The Image Effects module also requires ImageMagick & the File Metadata Information manager module to run correctly. Install the Drupal 8 module files from:

Configuration:  Review the Permissions settings for the newly enabled modules at admin/people/permissions and make any required changes for User Roles.

Configuration: Download the JavaScript files for Colorbox & move to the /libraries folder.

Finish: Run a diagnostic check at admin/reports/status to verify the installation was successful.

Step Two: Create a Custom Content Type for Images

Start: Since the Photo Album creates a Photos content type with a custom gallery widget, Drupal 8 developers who only use this module do not need to repeat the step or create Views.

  • Navigate to:admin/structure/types & click on the link “Add New Content Type”.

Next:Drupal 8 developers who are building an independent gallery can create a new Content Type named “Gallery Image” (gallery_img) and then add an ImageField to the form.

  • Navigate to:admin/structure/types/manage/*/fields & add the Image Field.

Next: Add Taxonomy Tags or other Fields to the Gallery Image node as required & save.

How to Create an Image Gallery Using Views in Drupal 8?

Configuration: Manage the settings for the Photos node field at: admin/structure/types/manage/photos/form-display & review display order for the form.

How to Create an Image Gallery Using Views in Drupal 8?

Next: The form settings for image upload can then be accessed at node/add/photos or node/add/* depending on which method of Image Gallery is implemented on site.

Configuration: Navigate to admin/config/media/image-styles & review the site-wide Image Thumbnail settings. Create unique values for your Drupal 8 theme regions & responsive views.

How to Create an Image Gallery Using Views in Drupal 8?

Finish: Go to the node/add/photos or node/add/* page and upload 8 to 10 photos to your website, adding description & taxonomy keyword tags in the form. Publish the nodes.

Step Three: Build a Views Display with Image Gallery

Start: After uploading images to the CMS, navigate to admin/structure/views and click the “Add View” button. Follow the initial steps to set up your page with a unique filter & gallery display.

How to Create an Image Gallery Using Views in Drupal 8?

Configuration: Select “Content of type Gallery Image tagged with --- sorted by Newest first” & save the settings with a unique name for the View. Proceed to customize the gallery page.

  • Settings: Create a page & choose a display of “Grid” with “Node Fields”.
  • Settings: Set a page title & URL such as “Image Gallery” (/image-gallery)

Next: Click on the button to “Save & edit”. On the Views configuration page, under the Fields category, add the Field to the View for the Gallery Image files, (i.e. Content:gallery_img).

How to Create an Image Gallery Using Views in Drupal 8?

Next: You should now be able to see a live preview of the View with the Gallery Images as well as node titles, description, taxonomy tags, & other Fields that are added to the display page.

How to Create an Image Gallery Using Views in Drupal 8?

Finish: Adjust the number of images in the display, the sort order, the thumbnail size, & other variables according to the requirements of your Drupal 8 theme and save the view to publish.

Step Four: Configure the Photo Album & Upload Files

Start: With the Drupal 8 Photo Album module, you create a page first that functions as a single album for a smaller subset of photos. Add an Album for every event & image upload.

Configuration: Navigate to node/add/photos and create a new Photo Album page. Save the settings and then use the tab navigation to add a batch of photos to the Album with tags.

How to Create an Image Gallery Using Views in Drupal 8?

Next: After creating the Photo Album page, use the tab navigation to upload a group of images that will be displayed in a Colorbox pop-up screen. Choose the Image Thumbnail sizes.

How to Create an Image Gallery Using Views in Drupal 8?

Configuration: Set the number of uploaded images permitted per Photo Album in the administrations setting page. Allowed image upload file types: jpg gif png jpeg zip

How to Create an Image Gallery Using Views in Drupal 8?

Display: The Photo Album module uses the Colorbox JavaScript to display the image files in a pop-up lightscreen with navigation through the image files provided by buttons & arrows.

How to Create an Image Gallery Using Views in Drupal 8?

Configuration: Navigate to admin/config/media/photos to set the thumbnail image sizes, storage path, privacy, global display, album image sizes, etc. in Photo Album administration.

Finish: The Photo Album module should now be working successfully, allowing Drupal 8 administrators to create Colorbox image galleries that are grouped together on node pages.

Step Five: Enable Colorbox Display on Node Image Fields

Start:Colorbox Image Gallery display in lightbox animation or with interactive navigation can be enabled on any Drupal 8 node or content type by adding Image Fields in the administration.

Next: Navigate to the Content Types section and select the node type that will be used. Click on “Edit” & “Manage Fields” to navigate to the tab where the Image Field can be added.

How to Create an Image Gallery Using Views in Drupal 8?

Configuration: Select “Colorbox” display for the Image Field & enable multiple files to be added to the node. Save the settings & navigate to the node/add/* page to test the form display.

Finish: Review the Page & Teaser views for the Content Type under the “Manage Display” tab. Make sure that “Colorbox Gallery” is selected as the image display for both options.

Conclusion: Use Responsive Drupal Theme Region CSS

Summary: Using a custom Drupal 8 Content Type with Image Field and comparing it to the Photo Album module options will show the differences between the two methods for images.

Recommendation: The grid View works best with a large number of image files, while the Photo Albums are better for organizing smaller sets of image uploads with Colorbox navigation.

Check out these top 3 Drupal hosting services:

Was this article helpful?