Learning Centre
Images
Images can help enhance the visual look and feel of your website and can be a great way to compliment your written content. Just remember that while images are great visual aids, they should never fully replace text.
Upload an image
Before you can add an image to a content page, you need to upload the image to the 'Media' area in the Govstack back office.
Image size and ratios
In most components you can select the size and shape of images in the Design & Layout tab under settings. Below we have provided a visual example of each of the size selections and how they would crop a typical image.
These settings are provided as ratios of width to height. So a 2:1 image would be 2 units wide and 1 unit tall. In the examples below we've added grid lines that represent these units. These grids are for explanation purposes only and will not appear on the final images.
The final size of your images is determined by 3 factors.
- What shape/size did you select in the componenet (1:1 square, 2:1, 3:4, etc.)
- How many columns you have selected, if the component allows for columns
- The available width on your webpage, usually based on if you have selected Full, or Left/Right for your layout
All images will be cropped to the selected size but you can use the focal point and cropping tools in the Media section to determine what parts of the image will be displayed.
Using the 'Original' size will keep the relative dimensions of your image file. This may not be desirable as images displayed will be different sizes if their original files do not have matching dimensions.
Original
1:1 Square
1:1 Circle
2:1
1:2
3:1
1:3
3:2
2:3
4:1
1:4
4:3
3:4
Add an image using the gallery component
The Gallery component allows you to add single or multiple images to a content page on your website. Explore the Gallery component to learn more.
Add an image in a text component
Note that adding images directly to text components is not recommended. Images added to text components with stretch to the full width of the editable area and ignore focal point, cropping, and zoom information. For better results consider using a Gallery, or using Pods with Text/Image components.
To add an image to a Text component, you need to:
- Place your cursor in the Text component where you'd like to insert the image
- Select the 'Media Picker' icon from the edit toolbar
- This will open the 'Media' folder
- From here, choose the folder that contains the image you'd like to add to the text area
- Select the image you'd like to insert
- This will open the 'Edit selected media' slide-out panel
- From here, you can add alternative text for the image in the 'alternative text (optional)' field and an image caption in the 'caption (optional)' field. Alternative text is required by the accessibility regulations in many jurisdictions.
- Choose the 'Select' button to insert the image
Before you close the text component, make sure to select the 'Submit' button to save any changes you've made.
Delete an image from a text component
If you no longer want to display an image in a text component, you can:
- Select the image that you'd like to remove
- Press 'backspace' on your keyboard
Before you close the text component, make sure to select the 'Submit' button to save any changes you've made.
Save and publish changes
After you've added an image to a content component, make sure to save, preview and publish the page.
Contact Us
GHD Digital Support
Primary +1-866-691-5528
Secondary +1-519-884-2476
Submit Online
Need Help?
