Skip to main content
Image Block

Add images or GIFs to your flow and save them in your image library

Heyflow avatar
Written by Heyflow
Updated over a month ago

If you want to make your flow visually more appealing, the image block offers one opportunity to spice it up with your own image or GIF.

💡We support nearly all image formats with a file limit of 12 MB.


Adding the image block

  1. In the blocks tab, navigate to display and drag the image block into your heyflow

  2. Upload your image or photo and crop it if needed

  3. Adjust the settings such as alt label and size or enable a link to redirect to a different URL. Take a look here for more edit options.

  4. Just publish your heyflow, and you’re good to go!

💡 Tip: For a better flow performance, upload your image in a compressed format, without loosing quality. There are numerous online image compressors available!

❗ When uploading a GIF, make sure to upload it as original and not cropped.


Adding images from the image library

Heyflow’s image library speeds up your workflow by allowing you to manage and re-use your images across multiple flows, eliminating the need to upload the same image multiple times. Like our icon library, it is available in all your flows.

Simply click on "Choose from library" to browse and select your available images. Learn more about the image library here.


Edit Options

General

  • Alt label: Images should always have an 'alt' (alternative) text that is displayed when the image is not loaded.

  • Enable link: Specify whether clicking on the image should redirect to a website.

  • URL: Enter the URL of the website to which you want to be redirected.

  • Open in...: Specify whether a new window should be opened for forwarding or whether the same window should be used.

  • Remove empty variables: If a variable in the URL of the redirect has no value, you can remove it from the URL, including the preceding '&word='.

Spacing

  • Width: You can use this to adjust the maximum spread of the block and choose between S, M, L and maximum width.

  • Top, Bottom, Left and Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.

Appearance

  • Visibility: Here you can select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.

  • Background colour: You can select a colour to be used as the background for the block.

  • Corner radius: Set the rounding of the corners of your image using the slider or the exact number of pixels.

  • Size: Adjust scale of image.

❗ You can only adjust alignment of an image after scaling it down from 100%.

Did this answer your question?