Paragraph Picture

The “Picture” paragraph allows editors to insert images or graphics into pages and content sections. It supports targeted delivery of different versions for desktop and mobile/app, ensuring the appropriate image format is displayed on every device. Editors retain full control over image selection and placement—for optimal presentation and performance.

Features & Benefits

• Integration of images with different versions for desktop, tablet, and mobile
• Responsive image display depending on device
• Support for modern WebP format (automatic conversion)
• Option for lazy loading to optimize performance
• Full control over alt text and image title for SEO and accessibility
• No central image database—upload directly at the desired location

Backend Configuration

Steps

1. Create ContentType.
2. Insert the “Picture” paragraph.
3. Upload image(s) in the desired fields and configure settings.

Notes on Image Preparation

Tip

• Before uploading, export images using graphic software at 90% JPG, 72 DPI, no additional compression.
• Desktop: max. 1140px (e.g. 570px for 50/50 layout)
• Mobile: max. 640px (dedicated mobile image variants recommended)
• For tablet, a separate image can be uploaded; otherwise, the standard image is used.
• Images are uploaded directly during editing; Drupal automatically assigns new names for duplicate filenames.
• Animated images must be provided as WebP beforehand (no GIF support).
• For Sketch: Import only images with 72 DPI.
• WebP format is generated automatically, ensuring small file sizes with high quality.

Notes on Lazy Loading

Tip

• Enabling the “lazy loading” option improves performance as images are only loaded while scrolling.
• Images in the immediately visible area should not use lazy loading—otherwise, warning messages will be sent.

General Configuration Options

Field	Description
Image - Standard	Use the “Select file” button to upload an image directly from your hard drive.
Image - Tablet	Optional: image specifically for tablet—otherwise, the standard image is displayed.
Image - Mobile	Optional: image specifically for mobile—otherwise, the standard image is displayed.
Alternate Text	Image description for SEO and accessibility.
Title	Additional text information for the image (appears as a tooltip layer on mouseover).
Lazy loading	The image is only loaded while scrolling (performance optimization).

Field	Description
Spacing Type	none | page width | page width with mobile spacing | window width
Alignment	None/Standard | Left | Center | Right
Vertical Alignment	None | Top (flex-start) | Bottom (flex-end) | Stretched (stretch) | Top | Center | Bottom
Link	Target (_self, _blank), bonus number, anchor, highlight, search filter
Tracking	Campaign ID, type, category, detail, name
Tooltip	Activate/deactivate tooltip, position, promotion text or content snippet
Personalization	Display for specific user groups (anonymous, logged-in customers, bonus program, credit affinity)
Accessibility	Activate skip link, freely nameable
Replace Content	Content can be dynamically replaced using Dynamic Yield ID
Time Control	Control visibility of the image by time (from/until)

Buttons & Actions

• Collapse: Collapse section
• Add above: Add new section above
• Remove: Delete section
• Duplicate: Duplicate section
• Add to library: Save section as template

---