Image Property
The Image Property allows you to add an Image to a component, to name it, to set a Default image, to choose an URL and choose a simple (static) or advanced (static and dynamic) type.
Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
Select the Image Property you wish to configure.
Input required information such as Name and Default.
Choose Type as required, simple or advanced.
Connect
The Image Property needs to be connected for it to be applied to the canvas.
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
Select the Component to which you want to connect the Image Property.
Select "Modify" in the toolbar or the Block Inspector.
This will open the component in the navigator so you can access the required block.
Select required block.
In the Block Inspector, find the Image Property and click the Component logo.
Choose required block in the Source dropdown.
The Image Property will now become green.
If the Image property is correctly connected, you should see something like this when in "Customise".
Click Image panel to open the Media modal.
Select required image and click "Select".
The selected image will now be visible in the Image field of the Block Inspector.
Name
The Name property allows you to input a suitable name for your Image property.
Input a suitable name.
Once connected, the chosen name will now be visible in the Block Inspector.
Default
Allows you to set a suitable default image to your component.
Open the Components Properties.
Select required Image property.
Open Settings tab.
Click "Set Default Image" field or input URL.
Select a suitable image.
Click Select.
Once selected, you should be able to visualise the selected default image in the component Properties modal.
The image will appear by default on the canvas.
Simple Type
The Simple Type property means that your image property is static.
Open the Components Properties.
Select required Image property.
Open Settings tab.
Select Simple as Type.
You will now be able to add a link to a static image.
Advanced Type
The Advanced Type property allows you to add dynamic or static content to your image field as required.
Open the Components Properties.
Select required Text property.
Open Settings tab.
Select Advanced as Type.
A Dynamic icon is now visible in the Block Inspector that will allow you to toggle on/off Dynamic content.
In the Block Inspector, toggle dynamic on for dynamic content.
This will open the Dynamic Image modal.
Input settings as required.
Last updated
