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 pixel sizes
The minimum recommended pixel size for images is based on the number of columns used in the page presentation. Fewer columns results in larger images, which need larger pixel counts to prevent pixelation and blurring.
In this table we present suggested widths only. Heights can be adjusted to best suite the presentation on the page. If you are unsure a good standard size for landscape-style images is a 3:2 ratio. Divide the pixel width of an image by 3, and multiply the result by 2 to get a height. For a 2700 pixel image this is a size of:
2700 / 3 = 900
900 x 2 = 1800
The suggested size equals 2700 x 1800
|
Suggested image pixel size by column width: Full width, banners, and 1-column row 2700px to 3200px 2-column row 1350px 3-column row 900px 4-column row 675px 5-column row 540px 6-column row 450px 7-column row 386px 8-column row 338px |
Optional image sizes
Here are some suggestions for specific pixel sizes. Please note that exact image sizing is not required in most Govstack components. These dimensions are provided as reference and for text areas only.
| Single column image sizes | ||||||||||||||||||||||||||||||||||||
|
Use these sizes if your image needs to fill the full width of your page.
* Sizes marked with an asterisk are not recommended due to their large pixel dimensions.
| ||||||||||||||||||||||||||||||||||||
| Two column image sizes | ||||||||||||||||||||||||||||||||||||
|
Use these sizes if your image is half the width of your page (such as when wrapping text) or you are building components with two columns.
* Sizes marked with an asterisk are not recommended due to their large pixel dimensions.
| ||||||||||||||||||||||||||||||||||||
| Three column image sizes (Recommended minimums) | ||||||||||||||||||||||||||||||||||||
|
Use these sizes if your image will be part of three column configurations. These sizes are also good as a minimum size in most applications.
|
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 |
Square |
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.
Add an image in a text component
Note that adding images directly to text components is not recommended. Images added to text components will 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.
Sizing images in a text component
When an image is inserted into a text component it will stretch to fill the full width of the content area without consideration for the original size of the image. This can cause pixelation in smaller images and may not provide the desired control over image layout. You can use an image style to control the size of your image with more precision.
To use an image's original size or to set it to a specific size in a text component use these steps:
- Select the image in the text component by clicking it. Small blue handles will appear at the image corners to indicate it is selected
- If you want the image to appear at it's current size, leave it as is. If you would like it smaller you can drag any corner handle until the image is the desired size. Do not drag images larger than their original size as this will cause a reduction in quality. Images will automatically retain their proportions when dragged to prevent distortion
- With the image selected open the style pull down in the tool bar and select Images > Image (max width). This will set the image to the size in the text editing window
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.