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

Last updated

Was this helpful?