PXL Crop and Resize

The images for most content types are set up to use Terminalfour's CDN/PXL feature. The PXL service takes care of resizing and cropping for you. This allows you to upload a full size version of an image, PXL will resize and crop the image to the dimensions required for the content type.

Cropping will only occur if the original image uploaded is a different aspect ratio to the image required. If cropping occurs PXL will crop from the middle of the image after the resizing has occurred.

For each content type that uses an image you will find guidance on the minimum dimensions of an image to upload, the rest is taken care of for you. If a content type has different sized images for different layout or responsive imagery all the variations required are cropped from the single image uploaded.

Example

Using the Cards Section content as an example, the image for a card requires an image that is 700 x 500 pixels. There recommendation is image uploaded is at least 700 x 500px. The image can be any size, and any aspect ratio.

If an image that is the same aspect ratio is uploaded the image will just be resized, no cropping is required. If you uploaded an image that is 1400 x 1000px this would resize to 700 x 500px without any cropping required.

For images where the aspect ratio is different cropping is applied, with the crop starting from the middle of the image after the image is resized. 

If you uploaded a landscape image that is 3000 x 1500px, after PXL resizes the height to 500px the image is wider than the size required. PXL crops horizontally from the middle of the image to create an image the required aspect ratio.

If you uploaded a portrait image that is 2500px x 3000px, after PXL resizes the width to 700px the image is taller than the size required. PXL crops vertically from the middle of the image to create an image the required aspect ratio.

See screenshots below showing the original images on the left with a green outline showing where they will be cropped. On the right is the end the result: new 700 x 500px images cropped and resized from the originals used in the Card Section.

Below is the example of the Card Section with the different images added: