| Drupal

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

Enter the composer command

  • 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

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.

Download the Intense library

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

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 Manage fields

  • Click Add field
  • Select Number (decimal)
  • Give the field a proper label
  • Click Save and continue

Click Save and continue

Click Save field settings

Click Save field settings

  • Check this field as Required
  • Add the prefix ‘$ ‘ (don’t forget the quotation marks)
  • Click Save settings

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

Click Update

  • Place the Price field right over the Comments field
  • Click Save

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.

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

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.

You should see a cross over the image

Click the image, it will zoom and cover the whole screen.

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.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.