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:

Using the Image Field module and Views Table Grid for display.
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:

Album Photos: https://www.drupal.org/project/photos
Crop API: https://www.drupal.org/project/crop
Image Widget Crop: https://www.drupal.org/project/image_widget_crop
Image Effects: https://www.drupal.org/project/image_effects
Colorbox:https://www.drupal.org/project/colorbox

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

Cropper:https://github.com/fengyuanchen/cropper

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

Libraries API:https://www.drupal.org/project/libraries

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:

ImageMagick:https://www.drupal.org/project/imagemagick
File Metadata Manager: https://www.drupal.org/project/file_mdm

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

Colorbox:https://github.com/jackmoore/colorbox/archive/master.zip

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. 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. 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. 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. 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.