Images - emjibay/arts-et-medias Wiki

Original URL:

Arts & Médias presents images that fit in only a few ratios. These ratios are mostly dependent on the breakpoint at which the site is viewed.

This documentation is presented here for editors to have a references, but also for people to know how to submit images to us (to ensure that the focal point of the image is visible on all breakpoints).

1. Specs

1.1 Technical Specs

1.2 Informational Specs

2. Contexts

Each context may present images with different ratios. Below are the details for each so you can prepare images properly so they work for each context.

2.1 Piece Details Page

The hero image for content pieces use the 2:1 ratio for all breakpoints.

2.1.1 Book Cover Image

Book covers are different in that books are most often in portrait. The details page of books stretches images to fit in a specific width, and shows the full height.

Below are the amount of columns in which the image is fitted:

2.1.2 Person Profile Picture

Profile pictures are presented as a square, so whatever width exceeds the square is cropped. In this case, ensure that the focal point fits within a square.

Below are the amount of columns in which the image is fitted:

2.2 Piece Index Tile

When a piece is previewed in a list, whether it's on the index page of the piece content or a feature page (e.g. home page, discover page, etc.), its hero image is presented using the 4:1 ratio.

This means there is only a slim band in the hero image that is visible.

This explains why logos—which are likely only used for some events or some organizations—are presented with a lot of whitespace around them. If it weren't the case, the logos would cropped, which should be avoided.

2.3 Featured Piece Tile

The featured piece tile is not often used. This component is sometimes present in the sidebar (e.g. the About page) or in some other contexts (e.g. the error template).

The featured piece tile may be visible at the top of the main index page of each content type if a sponsor choose to support that.

The home page and the articles main index page both showcase a featured piece tile, that of a featured article.

Below are the ratios used for the hero image per breakpoint:

2.3.1 Featured Article on Home Page

The home page's featured article makes an exception in that it presents the hero image with the following ratios:

2.3.2 Featured Book Tile

As discussed above, a book cover is a unique case. In this component, the book cover is fitted and centered in the amount of columns alloted to the component.

3. Ratios Used

The Photoshop file for this image—which contains guides—is available for download if you'd like to have a boilerplate file to prepare your images.