How to Quickly Adjust Image Heights in the Drag & Drop Editor
The drag and drop email editor is built to be unbreakable. Unlike using a HTML Editor, we’ve locked the Width of certain elements. This is to help with how the email responds in mobile view.
When using the 2 and 3 column blocks in the drag and drop, you should prepare neighbouring images at the same dimensions to ensure they are all level in the desktop view.
This may not always be feasible but with the drag and drop’s image editor, it’s easily fixed.
See example below:
First, choose one image which you will use as a guide to resize the other images. In this example I would like all images to be the same height as the middle one.
In order to do this, you will need the dimensions of this image. (All dimensions are in Pixels)
Click the pencil symbol to open your image editor
Click Resize on the left and take note of the exact dimensions (eg. 414px wide x 302px high)
Close this window and open the image editor for your next image. Again, go to the Resize option.
Keep in mind you are trying to match the dimensions of the previous image (414px x 302px)
In this case, this image is shorter than the previous image so you will need to adjust the height.
Change the height to match the original image (302px) then click in the space below to see the dimensions scale up, then Click Apply.
Go straight to the Crop section where you will change the width to 414. This will show below, how the image will be cropped. You can adjust the crop by dragging the box around the image.
Click Apply, then Save and choose whether you will Overwrite or Rename the file.
The Rename option will automatically save a new image and keep the original in your File Manager.
Repeat steps 3 and 4 for the last image bearing in mind this image drops lower than the other two so you will need to adjust the Width first in order to crop the height correctly later.
Click Apply, then Save your changes and you will now have all 3 images at the same height.