Pages - Changing contact page image crop

Pages such as the Contact page or the Text & Image page allow you to add an image simply by adding it to the corresponding set.

This image scales to look great on all devices, but standard 3:2 aspect ratio images can make information underneath them fall "below the fold".

DPG allows you to change the aspect ratio of any images added to this page and adjust their crops. You can use this to create a banner style image, which looks great on contact and information pages. The original image always stays the same and you can change the crop any time.

Follow the guide below to change the aspect ratio and crop on a Contact page. The image shown is cropped to 16:9.

Add to set

Select your chosen image and add it to the correct set. In this example, we're adding an image to the Main Image set inside the Contact page set.

Preview the site

If you check your site now, you'll see the image appear at the top of the page. It's looking rather large, so let's change the aspect ratio.

Change aspect ratio

Go into the Contact set which now contains the image. Open the Image Profiles panel and click on the Version drop down menu. You will see several versions that were created for this set. The two versions that you need to change are:

  • Website image
  • Website image @2x

Select the Website image version from the drop-down. Scroll down to the Aspect ratio menu. Choose your desired one. Click Update and wait for the page to load.

Repeat the process with the Website image @2x version.

The standard and @2x versions work as a pair, you must change both to the same aspect ratio for the image to scale correctly.

Adjust the crop

Once you've changed the aspect ratio of the versions, you can adjust the crop of the image.

Open the Crop panel and toggle the Show crop tool switch to the on position. Adjust the crop and click the Crop button.

The result

Refreshing the same contact page now, we'll see the newly cropped 16:9 image.

Previewing versions in the admin

You can view the different versions of any image right inside the admin. Just select the version from the dropdown in the toolbar.