| Drupal

How to Pin Images in Drupal 8

The "Imagepin" module allows you to create pins inside an image and display descriptive text when you hover over those pins.

This is useful because the image will not appear clogged with lots of descriptive text. From the other hand, since users like (unconsciously) this kind of interaction, it will help promote your content and increase the click rate of the “calls to action” of your page.

How to Pin Images in Drupal 8

Let’s start!


Step #1. - Install the Imagepin Module

If your Drupal installation is not based on Composer:

  • Download the module, uncompress it and place it in the /modules directory.

If your Drupal installation is based on Composer:

  • Open your terminal window
  • Go to the root (where the core folder is) of your Drupal installation and type

composer require drupal/imagepin

  • Click Extend, enable the module and click Install.

This module has no additional dependencies.


Step #2. - Create a Content Type

For the purpose of this tutorial, you will create a content type called Shoes. This content type has 5 fields (listed as they are displayed to the user):

  • Shoe image (image field type)
  • Body (text field type)
  • Color (list field type)
  • Price (number-decimal field type)
  • Buy link (link field type)
  • Click Structure > Content types > Add content type.

  • Click Add field in order to add the image field
  • Click Save field settings and Save settings
  • Click Add field
  • Select List (text)
  • Click Save and continue
  • Enter proper allowed values in the format key|value. The key part is intended for the machine to associate this field to the database. The value is the human-readable name when editing the node form and presenting the content
  • Click Save field settings
  • Click Save settings.

After the “color selection” field, you need to add the price field.

  • Click Add field
  • Select Number (decimal) from the dropdown
  • Click Save and continue
  • Leave the defaults (Precision 10, Scale 2)
  • Click Save field settings
  • Scroll down to the Prefix option and enter a dollar sign followed by a space ‘$ ‘ (without quotes)
  • Click Save settings.

  • Repeat the process with a Link field.

This will be the button that adds the item to the cart (in this particular example).

Your fields configuration screen should look like this:

  • Click the Manage display tab
  • Hide the labels for all fields
  • Click Save.


Step #3. - Configure Imagepin

  • Click the cogwheel on the right of the image field
  • Click the checkbox “Enable users to pin widgets on this image
  • Click Update
  • Click Save.


Step #4.- Add Pins to Your Images

  • Click Content > Add content > Shoes
  • Enter a title, description, price, link text, and a link
  • Upload an image
  • Click the button Pin widgets on this image.

  • An overlay with the image will appear
  • Scroll down, in order to create a new widget
  • Enter a proper text
  • Click Add.

  • Repeat this procedure to create as many widgets as you need
  • Click the first widget in the AVAILABLE section
  • You will see an orange dot at the top left part of the image
  • Drag it and place it where you see the text fits
  • Repeat the process with the other widgets
  • Click Save these positions.

You go back to the node edit form by closing the overlay or by clicking the Esc key on your keyboard.

  • Click Save in order to save the node.

Take a look at the image and hover your mouse over the pins.

Well done!

The Drupal 8 "Imagepin" module allows you to place visual hints (pins) with descriptions on images. It can be applied to a countless group of use cases. Add this module to your site builder’s toolbelt.

Thanks for reading!


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.