Add a Zoom Effect to Your Images in Drupal 8

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