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

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:

Kamatera
£3.13 /mo
Starting price
Visit Kamatera
Rating based on expert review
  • User Friendly
    3.5
  • Support
    3.0
  • Features
    3.9
  • Reliability
    4.0
  • Pricing
    4.3
Hostinger
£2.34 /mo
Starting price
Visit Hostinger
Rating based on expert review
  • User Friendly
    4.7
  • Support
    4.7
  • Features
    4.8
  • Reliability
    4.8
  • Pricing
    4.7
FastComet
£1.40 /mo
Starting price
Visit FastComet
Rating based on expert review
  • User Friendly
    4.7
  • Support
    5.0
  • Features
    4.8
  • Reliability
    4.5
  • Pricing
    5.0
  • Click this link and all your queries to best hosting will end.

How to Create a Custom Content Type for Drupal 8 with Fields

This Tutorial will show how to create a database application for Drupal using cu
4 min read
Eliran Ouzan
Eliran Ouzan
Web Designer & Hosting Expert

How To Create Views in Drupal 8

This tutorial is compiled to help you create a view in your Drupal 8 platform.
3 min read
Elizabeth Grom
Elizabeth Grom
Hosting Expert

How to Create a Landing Page for Drupal Using Panels?

In this tutorial, we will build a Panels landing page for Drupal 8 with Views Bl
5 min read
Eliran Ouzan
Eliran Ouzan
Web Designer & Hosting Expert

How to Set Up a User Forum in Drupal 8?

How to Build a User Forum in Drupal 8 using core module functionality & Taxonomy
3 min read
Avi Ilinsky
Avi Ilinsky
Hosting Expert
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top