Image Element
An overview of the Image component
An image component is an image or an image placeholder that you can add to your page. It is not the same as a background image which is applied to other components such as Divs, Containers, LinkBlocks and so on.
Image component
In this tutorial you're going to learn:
- 1.Adding images
- 2.Image "Src" property
- 3.Image "Alt" property
- 4.Styling images
- 5.Dynamic images
The image component can be searched for and added to the canvas from the components panel.
Search and add an image component
When you add the image to your page, you will see an image settings box popup.
Image settings popup
Under the image settings you get two quick options (1) Src and (2) Alt. The Src allows you to set the image source. The image source is the location of the image that you want to display to your users. By default the image source is set to pull a placeholder image from the link http://www.w3.org/2000/svg.
To set a custom image, click the "T" symbol to the left hand side of the Src. This brings up a popup with four options on how to set a custom image. The four options are:
- Literal value
- Variable
- Formula
- Public Files
Adding a custom image
Let's take a look at how to use each of these options.
The literal value is a fixed location of an image somewhere on the internet. For example, if you go to Google and search for "Free Images" you will get a list of results like the ones below.
Google search results for "Free Images"
If you right click on any image and click on "copy image address" as below:
Copy image address
You can then take the image address and paste it into the literal value box:
Changing an images literal value
Using the Variable option, you can display images as variables. The most common example of when you would use this option is to show variable images for different user profiles. Another example is that you might want to display a list of blog posts, each with different images attached.
For a complete example of how to display variable user profile data read "displaying variable user profiles".
For a complete example of how to display a list of blog posts read "displaying a collection of blog posts".
Using the Formula option you can choose to conditionally display information base on different rules. For example, you might want to only display images that were uploaded after a certain date.
For a complete example of how to set this up, read "creating user profiles".
By clicking on the Public files option, this gives you the option to upload image files (PNG, JPG and SVG) that you want to display on your website or web app.
Adding a public file
Once added to the page, you are able to see that the image source has updated to display the source of the image that you've uploaded.
Image source has changed to read from the file upload
The image "Alt" property specifies an alternative text for an image if, for some reason, the image cannot be displayed. The most common reasons that an image might not be displayed are because of slow internet connection, an error in the "Src" property, or if the user uses a screen reader.
It is best practice to set a brief description of the image as an "Alt". This is helpful for both accessibility and for search engines to determine what the image is about.
You can specify the Alt property for each of your images from the Properties panel or from the Settings box.
You can style images using the Styles panel, the same way that you would style any other component.
Ditto Tip: Note, some styles do not apply to images such as background images or or the text properties.
Here are a few tips that you can use to style images.
Borders: borders can be used to give a stronger outline to your images.
Border Radius: with the border radius you can set the rounding of the corners of an image. For example, if you want to turn an image into a circle, you can set the border radius to 50%.
Drop Shadow: can be used to make the images look like they pop out of the page.
Image styles
Last modified 1yr ago