Seventh > Blocks > Image

Image

The Image block displays an image with optional linking and the possibility to zoom. Perfect for adding photos, graphics, illustrations, or any visual content to your sections and cards.

What it does

This block displays an image with:

Image upload and display
Optional link functionality
Automatic responsive sizing
Placeholder when no image is selected
Natural aspect ratio preservation
A "zoom" image that opens the large image in a modal popup

Block Settings Explained

Image

Upload or select an image to display
Supports common image formats (JPG, PNG, WebP, etc.)
Image displays at natural aspect ratio
Placeholder appears if no image is selected

Link

Enter a URL to make the image clickable
Can link to products, collections, pages, or external URLs
Leave blank to display image without link

Open Link in a New Tab (Only appears when Link is set)

When enabled: Link opens in a new browser tab
When disabled: Link opens in the same tab
Default: Disabled

Common Use Cases

Create promotional banners for sales or announcements
Link to collections, products, or landing pages
Display marketing visuals or campaign graphics
Ideal for hero sections and homepage highlights

Media galleries

Create image galleries or lookbooks
Showcase photography or visual collections
Display portfolio or editorial-style content
Optionally link images to product pages or full-size views

Display user-generated content from social media
Highlight Instagram, TikTok, or community imagery
Reinforce authenticity through real people and products
Often paired with calls to action like “Follow us” or “Shop the look”

Tips for Success

Image Quality

High resolution - Use high-quality images for best results
File size - Optimize images for web (balance quality and file size)
Format - Use WebP or JPG for photos, PNG for graphics with transparency

Image Sizing

Natural aspect ratio - Images maintain their original proportions
Responsive - Images automatically resize for different screen sizes
Consistent Sizing - Use similar image dimensions for uniform appearance

Linking

Relevant links - Link images to related content
New tab - Use "Open in New Tab" for external links
User experience - Make it clear when images are clickable

Accessibility

Alt text - Add descriptive alt text when uploading images
Context - Ensure images add value to the content
Placeholders - Replace placeholders with actual images