Introduction: Image Field, Views, & Photo Album Solutions
In order to build the gallery, the Tutorial will discuss two methods:
- Using the Image Field module and Views Table Grid 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
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.
- Libraries API:https://www.drupal.org/project/libraries
Prerequisites: The Image Effects module also requires ImageMagick & the File Metadata Information manager module to run correctly. Install the Drupal 8 module files from:
- 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.
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.
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.
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.
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).
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.
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
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.
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.