Showcase: Image Guidelines

Images are key to displaying reports and categories on the showcase page. The following article will outline guidelines on how to get the best out of your images applied to your showcase.

Images can be applied via the reports or category admin area using the showcase image option.

Images can also be applied via an API endpoint. 

Responsive Design

The showcase page has been developed and designed so that all images are responsive to the page size. This allows for images to work in all sizes and shapes.

See examples below of how images may behave when the browser size changes:

Full-size browser screen around 1912 x 954 pixels

Medium-sized browser screen, around 693 x 534 pixels

Mobile / smallest browser screen size around 492 x 534 pixels

There should be design considerations while constructing your showcase page.

Please take a look at our guidance for each of the sections.

Hero Section Image

If possible, we recommend images suitable for banners, such as patterns and abstract compositions, as they are safe in all ratios and work well for banners.

Images that contain large, centrally focused items may not appear as well due to the height of the hero section in full-screen browser size.

For example, an image containing a centralised object as shown below:

When applied in a full-screen browser.

It will only become clear when the browser is much smaller.

Avoid adding text to the hero images themselves, as this may not appear correctly if the browser ratio changes or may not be visible with the required content search bar.

Notice that the text in the image is not fully visible in full screen.

The image text may only become visible when the browser size has changed.

Text can be applied over the hero image separately in the admin section.

The height of the Hero section image is controlled by the text applied. There is a maximum of 150  Character's that can be applied if needed.

See the example below.

Advertisements

Upload a landscape ratio image for desktop, or a portrait image for mobile. 

The mobile image will automatically display on smaller screens under 600px wide. If no image is uploaded for mobile, the desktop image will be displayed for all screen sizes. 

Recommended image size for Adverts W:1920px * H:(min 400)

Landscape Images are best used when you wish to apply the banner style advertisements which stretch across the whole section.

See the example below:

Portrait images are best used when creating an advertisement where part of the section is occupied by text and a primary, secondary colour.

See Below:

Content and Category Images

Image Quality Guidelines