The Image block lets you add visuals to your guidelines to enrich the user experience and showcase your brand’s visual style. Built using Brand SDK technology, it offers flexible customization so your visuals can be on-brand and consistent.
Adding an image block
In Edit mode, click the add option.
Select Image block from the list.
Upload an image from your computer, or choose one from your Frontify environment via the asset chooser.
Once uploaded, you can rename the image within Frontify by clicking in the name field and typing a new display name. This does not change the actual file name upon download, only how it appears inside Frontify.
Block item/image toolbar
Click the toolbar icon on the right side of the image to access editing options:
Replace image: Swap the current image with another from Frontify or your computer.
Add attachment: Attach an additional file from your computer or from your Frontify environment.
Layout
You can control the appearance of your image within the block:
Image ratio: Choose from predefined aspect ratios or set a custom ratio (e.g., vertical 9:16).
Image alignment: Align the image horizontally and vertically within the block.
Padding: Adjust spacing around the image.
Auto sizing:
None: Maintains the original resolution of the uploaded image.
Fit or fill: Scales the image, including beyond its original resolution, for a consistent look across blocks.
Text position: Place text to the left, right, above, or below the image.
Conditional text ratio setting
Note: For a detailed explanation of how image resolution works in Frontify, see our Image Resolution help article.
Focal point control (DAM assets only)
When an image is sourced from the DAM, you can set a focal point so the most important part of the image stays visible when cropped or resized.
Define the focal point in the DAM by dragging the marker to the desired spot.
Any crop or resize will respect this focal point.
Focal point settings override alignment options when enabled.
Style
Background color: Set a background color for transparent images.
Border and corner radius: Apply or customize these to fit your brand.
Security
Follow your global security settings for assets, or set custom download permissions per block.
Linking images
In edit mode, select the image and open Settings.
Add a link to a page/document within Frontify or to an external URL.
Optionally open the link in a new tab.
Titles and descriptions
Double-click the title or description to open the rich text editor, choose from your predefined text styles, and ensure everything is on-brand.
Summary of capabilities
With the Image block, you can:
Upload or link assets from your computer or Frontify DAM.
Maintain or override image ratios with custom or predefined settings.
Use auto sizing to fit or fill images consistently.
Control horizontal and vertical alignment.
Apply custom padding.Set focal points for DAM assets.
Add background colors, borders, and corner radius.
Manage security settings and link images to other content.
If you have any questions, please feel free to contact us.