Incorporating images into your pages and blocks can help improve your user experience by breaking up the text and data driven elements of your app. By blending functionality with visual appeal, adding visuals will make your Frontly apps more vibrant and easy for your users to engage with.
Uploading Images Into Your Frontly Account
There are many image hosting services available around the web, but if you would prefer to keep them in-house with your Frontly account, Frontly does provide a simple image hosting service. To access this service, while you're on your home page, click on your email on the top right corner and select 'Assets'.
From the 'Assets' page, click the '+ New Asset' button and an upload modal will appear. Choose from uploading an image from your files or via a web address if a public URL for the image is available.
Note: There is a size restriction of 5 mbs for all images assets uploaded into Frontly. If you have an image that exceeds this limit, you will need to have it downscaled.
Once successfully uploaded, click 'Done' and the image will be listed with your other image assets. From there, the image URL can be retrieved by either clicking the image thumbnail or by clicking the three dots and selecting 'Copy Link'.
Preparing your Spreadsheet with Image URLs
Frontly has many blocks that support images. With exception to the Image block, all blocks will require the image URLs to be formatted into your spreadsheet. The image URLs must line up with the rows and data they correspond with and must be defined in a single image column.
Click here to read up on how you can generate generic text and image data easily.
Block Setup
For Kanban Block and Grid Block
Blocks that have the capability of surfacing row image links as image cards, like the Kanban block and Grid block have an 'Image' dropdown that allows you to reference the column with your image URLs. Note that upon linking a spreadsheet with one of these blocks, our platform will automatically detect and populate a column with images for you.
Click here to learn more about the Kanban block .
Click here to learn more about the Grid block.
For Edit Form Block, Table Block and InfoList Block
Blocks that have the capability of showing the row image in the form of a thumbnail can be displayed through editing their field type. Clicking the column header (for Table block) or field header (for Edit Form or Infolist Block) will allow you to change the type to 'Image'. Ensure the column or field you're editing is the one with the image URLs.
Click here to learn more about the Form block.
Click here to learn more about the Table block.
Click here to learn more about the InfoList block.
For Image Block
Set up for the image block is very simple as they aren't directed linked to a spreadsheet. Simply enter the image URL or inject a dynamic variable that can reference the image URL, such as through a Custom Detail View.
Note: You may have noticed from inputting an image URL into the URL field that the image does not display in your edit mode. Don't worry though, once you preview your live app - the backend will retrieve the image and they will show!
Click here to learn about the Custom Detail View and how to set one up with Custom a dynamic Image block.