Introduction: Image Field, Views, & Photo Album Solutions
- 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
- 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.
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
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.
Check out these top 3 Drupal hosting services:
- Click this link and all your queries to best hosting will end.