The Intense Drupal 8 module provides a nice whole screen zoom of the images on your site. Keep reading if you want to learn how to install and use this module with a practical example.
Step #1. Download and Install the Required Modules
- Open the terminal application on your PC
- Go to the root of your Drupal installation (the composer.json file is inside this directory)
- Type the following command:
composer require drupal/intense
- Click Extend
- Scroll down, search and check the following modules:
- Blazy UI
- Intense images
- Click Install
- The System will install the core Media module, which is required
- Click Continue
After installing the modules, it is necessary to download, unzip and place the required libraries in place.
- Create a libraries directory on the root of your Drupal installation (the core directory is there)
- Download the Intense library from this GitHub page.
- Place the zip file inside the libraries folder
- Extract it
- Rename the extracted directory to intense
- Repeat the process with the Blazy library
- Rename it to blazy
- At the end you should have the following file structure:
Step #2. Add a Field to the Article Content Type
Our site is promoting fishing trips, so a price field is required.
- Click Structure > Content types > Article
- Click Manage fields
- Click Add field
- Select Number (decimal)
- Give the field a proper label
- Click Save and continue
Click Save field settings
- Check this field as Required
- Add the prefix ‘$ ‘ (don’t forget the quotation marks)
- Click Save settings
Step #3. The Intense Image Configuration
- Click Structure > Content types > Article > Manage display
- Look for the Image field Format and select Blazy from the dropdown
- Click the cogwheel on the right
- Select the Media Switcher option and choose Image to Intense
- Click Update
- Place the Price field right over the Comments field
- Click Save
If you want to have this effect on the teasers of your articles, just edit the Teaser view mode with the same configuration options.
Step #4. Create Content
- Click Content > Add content > Article
- Write proper content
- Upload an image
- Click Save
You should see a cross over the image if you hover with your cursor over it. The cursor will turn itself into a cross too.
Click the image, it will zoom and cover the whole screen.
You can pan over the image by moving your mouse. The image closes when clicking once again.
I hope you liked reading this tutorial and putting it in practice (of course)!
Thank you and stay tuned for more Drupal content.