Introduction: Cropping Image Uploads to Thumbnail Sizes
This Tutorial will guide Drupal 8 users through the steps required to install Image Thumbnail Crop features to uploads using JavaScript. Set Image Thumbnail sizes and crop uploaded files manually to guarantee the proper balance & focus for frames.
In order to add the crop feature to image galleries in Drupal 8:
- The Libraries module must be installed to host third-party JavaScript.
- The Image Widget Crop module & prerequisites must be installed.
There are additional options to automate cropping, integrate cropping with popular page editor scripts, and implement the functionality on Drupal CCK Fields on content types. Before starting, make sure you have a good Drupal hosting.
Step One: Install the Library Module & Create New Directory
Begin by downloading the required module files from drupal.org for the installation. Then navigate to admin/modules/install and install the files by uploading the zip/gzip packages or use another method like FTP, Git, Drush, etc. for the process as usual.
Required Modules – Download Links:
- Libraries API:(download files)
Configuration: After installing the Libraries API module, open File Manager in cPanel and create a new directory in the root of the Drupal 8 installation (address:. ../libraries).
In the next step, it is required to upload a set of JavaScript files to the /libraries folder.
Step Two: Upload the Cropper JavaScript Files to Web Server
Navigate to the GitHub page of the Cropper JQuery project that will be used in Drupal 8 for managing the image uploads. The JQuery files are required for the Drupal module.
Required Modules – Download Links:
- Cropper:(download files)
Configuration: After downloading the Cropper JQuery files from GitHub, unpack the archive & upload the /dist folder to /libraries/cropper/dist on your web server.
Note: Keep all of the JQuery files that are found in the /dist folder in the original state.
After installing the Libraries module & the Cropper JQuery files, all of the prerequisites for running the Image Widget Crop module on Drupal 8 websites are complete.
Step Three: Install the Image Widget Crop Module for D8
To install the image cropping functionality, two modules are required for Drupal 8. As with the Libraries module, install these according to choice of FTP, Git, Drush, etc.
Required Modules – Download Links:
- Crop API: (download files)
- Image Widget Crop: (download files)
Configuration: In the configuration section for the module, located at:
- Administration: /admin/config/media/crop-widget
confirm that the modules have been installed correctly & set the thumbnail settings.
Note: If the crop type does not appear, set an image style. Click the checkbox to warn users when images will be used in multiple settings, & save the configuration values.
Step Four: Set Image Thumbnail Sizes in Drupal Admin
In order to build a custom image thumbnail setting in Drupal 8, navigate to: admin/config/media/image-styles and click the button to “add image styleâ€.
Name the setting and then select “Crop†from the menu under “Effects†and click “Addâ€. Enter numerical values for the length & width of the Crop in pixels & save the settings.
Set the pixel values for the master image & then save. The Image Thumbnail settings must them be applied to an image field on one of the content types in Drupal 8 for use.
Step Five: Configure Image Field Settings for Content Types
Finally, navigate to the Drupal 8 content types section and enable the different Thumbnail Sizes for use on the website. You can keep different values for each node type, such as Articles & Blogs, to build a multimedia publishing system with the CMS.
Configuration: Navigate to admin/structure/types & review the image field settings for each content type. Where the image field is in use, set the thumbnail size accordingly.
Click on the “Manage Fieldsâ€link and proceed to the “Manage Display†tab. Review the settings for the image field and change the display to the image thumbnail size required.
Conclusion: Upload & Crop Images to Thumbnail Size
With this system, web publishers can manually crop any image upload for articles, blogs, products, etc. in Drupal 8 according to a fixed thumbnail size using Cropper JQuery.
This method allows content creators more control over the final appearance of images in web pages. Works with tools like IMCE, CKEditor, Bootstrap, Entity Browser, etc.
Check out these top 3 Drupal hosting services:
- Want to get top recommendations about best hosting? Just click this link!
