Image Styles

Create the following Image Styles:

Name

Machine name

Dimensions

Effect

16:9 285x160

16_9_285x160

285 x 160

Scale and Crop

16:9 450x253

16_9_450x253

450 x 253

Scale and Crop

16:9 570x320

16_9_570x320

570 x 320

Scale and Crop

16:9 900x506

16_9_900x506

900 x 506

Scale and Crop

16:9 1200x675

16_9_1200x675

1200 x 675

Scale and Crop

16:9 2200x1238

16_9_2200x1238

2200 x 1238

Scale and Crop

Create the following Responsive Image Styles:

Name

Machine name

Breakpoint Group

Fallback Image

Movie Card

movie_card

Responsive Image

16:9 450x253

Hero

hero

Responsive Image

16:9 1200x675

Apply the following configuration under 1X Viewport Sizing

Movie Card

Type

Select multiple image styles and use the sizes attribute.

Sizes

(min-width: 768px) 50vw, (min-width: 1040px) 33vw, (min-width: 1200px) 25vw, 100vw

Image Styles

16:9 1200x675

16:9 2200x1238

16:9 285x160

16:9 450x253

16:9 570x320

16:9 900x506

Fallback Image Style

16:9 450x253

The beauty of these image styles is that they are aspect ratio-based rather than specific image dimensions. When possible, this is recommended as this makes the image styles more reusable and therefore reduces the number of image styles to be created and maintained.

Last updated