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 has been uploaded – if you need to change its name, 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 that is provided to the right of it.

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

It gives you the option to replace the image with 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 on 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: Do you need a background color? This is useful for transparent images. You can set it here.

Downloadable: If you turn 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. 

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. 

Image Block and Image Grid block description

The Image and image Grid block description will allow you to add extra information to your individual images.

Rich text capabilities of the Image Block and Image Grid block descriptions

In the description of the image, you can add

Buttons

On-brand font styles, links, bullet points, and text alignment

Simply select the words or words you would like to change using the rich text bar and add all the different options available.

If you have any questions, please feel free to contact us.