Tutorial: Adding a zoom effect

You can configure an Image to Intense option on your Developer Portal to give a zoom effect to your images.

Adding a zoom effect to the images on your Developer Portal can enhance the user experience.

Before you begin

You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial. The tutorial Creating the Portal explains how to enable the portal if you have not already done so.

About this tutorial

In this task, you configure the image field of Article content types to use the zoom effect. Then, create an Article that uses an image, and test the zoom effect.

Before you begin, ensure that the Intense images module is installed and enabled:
  1. Log in to your Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Click Extend.
  4. In the text box, enter Intense images in the Block description.
    Note: If the Intense images module does not appear in the list see, Installing custom modules.
  5. Check the Intense images box, click Enable.
This tutorial takes you through the following steps:
  1. Configure the image field of Article content types to use the zoom effect.
  2. Create an Article with an image.
  3. Test the zoom effect.

Configure the image field of Article content types to use the zoom effect

  1. Log in to your Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Navigate to Structure > Content types > Article > Manage display.
  4. In Image field Format, select Blazy from the drop-down.
  5. Click the edit icon Settings icon.
  6. In Media Switcher select Image to Intense, then click Update.

    Setting image to intense

  7. Click Save.
You changed the Image field Format for Article content types to use the zoom effect.

Create an Article with an image

  1. If the administrator dashboard isn’t displayed, click Manage to display it.
  2. Navigate to Content > Add content > Article.
  3. Enter a title for your article, upload an image, and provide Alternative text for the image. Click Save.
You created an article and added an image.

Test the zoom effect

  1. If the administrator dashboard isn’t displayed, click Manage to display it.
  2. Click Content.
  3. Click the Article that you created.
  4. Hover your cursor over the article's image, the cursor turns into a cross, and if you click the image it enlarges.
You tested the zoom effect on the article that you created.

What you did in this tutorial

You successfully configured the image field of Article content types to use the zoom effect. Then, created an Article that uses an image, and tested the zoom effect.