Skip to content

Usage Examples

Image Link Formatter in action - linked image display

Real-World Scenarios

Example 1: Simple Ads Block

Objective: Create a flexible ads block with image and custom URL.

Setup:

  1. Create Custom Block Type: Settings → Block types → Add block type - Name: "Featured Ad" - Machine name: featured_ad

  2. Add fields: - field_ad_image (Image) - field_ad_link (Link)

  3. Configure display: - Go to: Manage Display for featured_ad - Select field_ad_image formatter: Image wrapped within link field - Configure: Link image to → field_ad_link

  4. Create ads: - Create instances with image + custom URL - Drag block into region - Images link to configured URLs

Result: Reusable ad blocks with linked images and full translation support.

Objective: Build flexible content carousels with multiple linked images.

Setup:

  1. Create Paragraph Type: Manage Paragraphs → Add Paragraph type - Name: "Product Carousel" - Machine name: product_carousel

  2. Add fields: - field_carousel_images (Image, unlimited values) - field_carousel_links (Link, unlimited values)

  3. Configure display: - Formatter: Image wrapped within link field - Link image to: field_carousel_links

  4. Use Paragraphs in content: - Add paragraph to article/page - Fill images and corresponding links - Frontend displays linked image carousel

Bonus: Use Paragraphs Translation for multi-language carousels.

Result: Flexible, granular content blocks with linked images per language.

Example 3: Product Showcase

Objective: Display product images linked to product pages or external vendors.

Setup:

  1. Content Type: Article - field_product_image (Image) - field_product_url (Link) — Can link to another product node or external URL

  2. Display configuration: - Formatter: Image wrapped within link field - Link to: field_product_url

  3. Optional enhancements: - Use Image styles for responsive sizing - Add Link Attributes module for target="_blank" - Use Link Target module for open-in-new-window option

Result: Product images automatically link to product pages or vendor sites.

Example 4: Multi-Language Linked Images

Objective: Support linked images in multiple languages.

Setup:

  1. Enable Content Translation module

  2. Create Node Type with: - field_image (Image, translatable) - field_link (Link, translatable)

  3. Configure as above (Link image to: field_link)

  4. Translate content: - Add node with image + link in English - Translate to Spanish with different image + link - Formatter respects language-specific values

Result: Language-specific linked images with full i18n support.

Integration Tips

With Other Modules

Link Attributes + Image Link Formatter: - Add custom HTML attributes to links wrapping images - Useful for CSS classes, data attributes, etc.

Link Target + Image Link Formatter: - Set links to open in new window - Works automatically with image wrapping

Paragraphs + Image Link Formatter: - Create flexible page layouts with linked image blocks - Reuse across multiple content types

The formatter works with any Link field, enabling creative setups:

  • Link to other nodes (entity reference through Link field)
  • Link to external URLs
  • Link to media library items
  • Link to taxonomy terms

All are supported as long as they're stored in a Link field.

Troubleshooting Examples

A: Check that image and link fields have the same delta values (position).

  • Image field value 0 → Link field value 0
  • Image field value 1 → Link field value 1
  • etc.

A: Not with this module (delta matching). Instead, use Linked Field module or custom code.

A: Not directly. Workaround: Add multiple copies of the link field.

Next Steps

→ Developer Guide: Architecture