Edit Images

You can edit the crop and focal point for all images you upload to the Govstack Content Management System. This will determine how the image will appear when used in content components.

Crop an image

Image crops determine the height and width ratios for an image. There are 21 crop options that you can select from for an image. Each crop option corresponds to a matching configuration option when the image is added to a non-Text component. For example, when the "2:1" crop is saved, any use of the image configured with an "image style" of "2:1" will inherit that crop. In a component's "Image style" property, the "Original" option renders the image according to the file that was uploaded.

To crop an image, you need to:

1. Select the 'Media' tab from the Govstack main menu
2. Select the folder that contains the image you want to crop
3. Select the image's file name (not the image icon itself)
4. Next to 'Image', select the new crop ratio you would like the image to have
5. Use the slider control to zoom in and out. Drag the image to the correct position
6. If you are happy with the crop, select 'Done'. If not, you can select 'Reset crop' to start over or select 'Undo edits' to undo the last change you made
7. Click 'Save' to save the new image crop

Please note

There are image crop options available within certain content components, so it isn't always necessary to crop the original image in the 'Media' tab.

Set the image focal point

You can only set an image's focus point when editing images in the 'Media' tab. The focal point is a bulk-way of cropping images for each predefined crop without having to do so manually for each one. When a predetermined crop is set manually, changing the focal point does not override the manually-set crop.

To set the focus point for an image, you need to:

1. Select the 'Media' tab from the Govstack main menu
2. Select the folder that contains the image you want to set the focus point for
3. Select the image's file name (not the image icon itself)
4. Next to 'Image', drag the red dot in the centre of the image to where you would like the focus point to be
5. If you still want to adjust the focus point, you can drag the red dot again or select 'Reset focal point' to return it to its previous position
6. Once you are happy with the position of the focus point, select 'Save'

Using a WebP file

To use a WebP file, you will need to use a Photoshop plug-in to make sure the image is compatible with Govstack. You can download and install the WebPShop plug-in directly from Google. WebPShop is also available on GitHub under an Apache 2.0 license.

• Get it from Google

• Get it from GitHub

To install the plug-in, please follow these steps:

1. The downloaded plug-in can be installed to the following location:
   1. Shared Creative Cloud Location: Will load the plug-in for all installed versions of Photoshop without having to reinstall the plug-in
   2. Windows: \Program Files\Common Files\Adobe\Plug-Ins\CC
   3. macOS: /Library/Application Support/Adobe/Plug-Ins/CC
2. Run Photoshop

When adding a WebP file to Govstack, you will not be able to preview the content. Please use 'save and preview' to check that the file has been prepared and uploaded correctly. If you are still experiencing issues, Github has an issue log where you can check for more solutions. 

To learn more, GitHub has an article on the WebP file format plug-in for Photoshop.