PXL Crop and Resize

Most images 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. If any cropping occurs PXL will crop from the middle of the image.

For each content type that uses an image you will find guidance on the minimum dimensions of an image to upload, the rest is done for you.

Example - PXL Crop and Resize

If a design requires an image that is 1000px x 845px, then it is recommended that the uploaded image is at least 1000px x 845px. The image can be any size, and any aspect ratio.

If you uploaded a landscape image that is 2000px x 1000px, after PXL resizes the height to 845px 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 1000px x 2000px, here 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 1000px x 845px images cropped and resized from the originals.

Example - Different Image for Mobile

Some content types have images where on smaller screens like mobile devices we need to use an image that is a different aspect ratio to the image we show on larger desktop screens. 

For example, if a content type is visible on a desktop with the screen being wide, the image would have a landscape orientation. PXL would create a portrait orientation version of that image for use on smaller screens, from the full size image you upload. It is important that the focus of the image is in the centre, as starting from the middle point of the image PXL crops the new image required, as seen in the previous image.

WYSIWYG Guide

Add WYSIWYG content to a page including text, links, buttons, lists, tables and inline images.

How to use

WSYIWYG areas across many content types use the TinyMCE editor, find out more about using TinyMCE in the T4 documentation.

Copy and Paste

When pasting in content from another web page or document (e.g., Word document or PDF) recommend to use the Paste as text option from the edit menu. This avoids any hidden code or formatting being added which could impact how your content is displayed on the page.

Link Text

Link text should be descriptive, giving information about the link's destination. If link text is generic and non-descriptive, like “Click here” or “Read more,” people may open the wrong link, or need to go back to read the paragraphs surrounding each link to try to find out where the link will go. If using generic link text of this nature ensure that the title attribute is set to provide additional details by adding the title in the modal when adding or editing a link, e.g.:

Use of Headings

Headings are ranked heading 1 (h1) through to heading 6 (h6). Use headings hierarchically, with the heading 1 representing the most important topic of the page. Each page should have only 1 heading 1, this is added using a masthead content type or content type that has built in masthead. Organise content on the page with heading 2 (h2) level headings. Those areas can be divided with heading 3 (h3) level headings, and so on.

Do not skip heading levels to be more specific, e.g., do not skip from heading 2 (h2) to heading 5 (h5). You can skip headings in the other direction though if required, e.g., from heading 4 (h4) to heading 2 (h2).

Do not use a heading based on its appearance. Select the appropriate heading level rank for the hierarchy on the page.

Do not make text bold instead of using a heading. A common accessibility mistake is to make text bold when a heading is required. The text is highlighted and visually may look like a heading, however the HTML code behind it is not a heading, and it will not be picked up by assistive technology like screen readers.