Skip to content

Configuration

Basic Setup

After installation, configure the module on any entity with image and link fields.

Create an entity type (e.g., Node, Custom Block, Paragraph) with:

  1. Image field — Standard Drupal image field
  2. Link field — Standard Drupal link field

Step 2: Configure Manage Display

Navigate to the Manage Display page for your entity:

  • Example path for Page content type: /admin/structure/types/manage/page/display
  • Example path for Custom Block: /admin/structure/block/block-content/types/manage/block_type/display

Step 3: Select the Formatter

For the Image field:

  1. Click the Image field formatter dropdown
  2. Select one of: - Image wrapped within link field (standard images) - Responsive image wrapped within link field (responsive images, if sub-module enabled)
  3. Click Configure (gear icon)

Configuration interface showing Image Link Formatter settings

In the formatter settings form:

  1. Image Link dropdown — Select the link field to wrap the image
  2. Click Update

Formatter Settings

Image Formatter Options

All core image formatter settings remain available:

  • Image style — Apply responsive sizing or effects
  • Link image to — Select which link field provides the URL
  • Alt text — From image field's alt text

Responsive Image Formatter Options (Sub-module)

When using responsive_image_link_formatter:

  • Responsive image style — Use art direction breakpoints
  • Link image to — Select which custom link field provides the URL

Field Delta Matching

Important: Link fields are matched to images by delta (position).

Example with 3 image/link pairs:

Delta Image Link Field Value
0 Image 1 Link 1 URL
1 Image 2 Link 2 URL
2 Image 3 Link 3 URL

Each image uses the link at the same position.

Testing Your Configuration

  1. Create content with multiple images and links
  2. View the page — Images should be wrapped in link tags
  3. Inspect HTML — Should see: <a href="..."><img .../></a>

Common Configuration Examples

Simple Ad Block

Create a "Featured Ad" custom block type:

Block Content
├── field_ad_image (Image) → Formatter: Image wrapped within link field
└── field_ad_link (Link) → Referenced in formatter settings

Create a "Product" paragraph:

Paragraph
├── field_product_images (Image, multiple) → Responsive formatter
└── field_product_links (Link, multiple) → Matched by delta

Multi-language Support

Use Core's translation system:

  1. Enable Content Translation for your entity
  2. Configure translation fields for both image and link
  3. The formatter respects language-specific translations

Troubleshooting

  • Ensure the Link field is on the same entity as the image field
  • Check that the field is added to the same bundle
  • Rebuild cache: drush cr
  • Verify link field has values
  • Check that image and link deltas match (position 0→0, 1→1, etc.)
  • Inspect HTML to confirm <a> tag wraps <img>

Next Steps

→ Usage Examples