Style Guide Image Block

This article will show you how to use the image block, and its settings.

Start in the edit mode, click on the "Add" icon for the smart blocks to appear, locate the 'Media' option and then click on "Image".

You have the option to upload an image from your computer or choose one from your Frontify environment using the asset chooser.

Now that the image was uploaded – if you need to change the name of it, click in the field with the name, and overwrite it. The file name will not be changed when downloading it; only the name which will be shown in Frontify changes.

You have some setting possibilities on the image block.

There's an additional field for a description text is provided to the right of it.

When clicking on the settings icon at the right side of the image you will find several options to edit your image.

It gives you the option to replace the image from another image in Frontify or upload it directly from your computer.

@2x: If the image is blurred, you can use this switcher, to make it sharper.

In terms of appearance, you can select a mode you prefer such as having text in the different sides of the image.

Image alignment: if the image is small you can align it to the right, left or center of the page.

Border: With this switcher active, a border will be shown around your image.

Background Color: You need a background color? This is useful for transparent images. You can set it here.

Downloadable: If you turned off the switcher "Allow Image download" in the General settings – content. Then you can allow images, separately over this switcher, to be downloadable.

The paperclip on the right side is for "Adding Attachments" to this image block.

Link image

To add a link to an image, just upload the image on the image block by either uploading it from your files or choosing it from your Frontify libraries. When the image has been set, in edit mode head to the image settings where you will find the field 'Link'

A pop up screen will appear allowing you to link to a page or document within Frontify or a link to an external page. You also have the choice to open the link in a new tab by using the toggle.

Once you have linked it and while it's still in edit mode, the image can be clicked and it will redirect you to the image viewer mode.

And when you exit the edit mode and click on the image you will be redirected to the link you specified in the settings.