[M 502] 8 col text on image/bg, 4 col text on image/bg
[M 502] 6 col text on image, 6 col text on image
[M 502] 4 col text on image/bg, 8 col text on image/bg
[M 502] 8 col text on image/bg, 4 col text on image/bg (transparent background)
[M 502] Flexible image height variations
Image Sizes
Module |
Image |
Editor crop |
Editor note |
Srcset type(Display Density,Width Descriptor) |
WCMS src and srcset definition |
Sizes attribute |
|---|---|---|---|---|---|---|
| [M 502] 4, 6, 8 col - Text on image, video | Note: In WCMS is a toggle to switch between "fix height: yes / no". If yes, use the given heights for cropping. If no, the height can be choosen flexibly. | |||||
| 4 col | w: 800 h: 800 |
Above 1010px vw: fix height of 400px. The height of the grey/orange box adapts to the current height of the image. Note: if you add content to the box, please check the layout on all viewports. |
WD | src="600" srcset="400 400w, 600 600w, 800 800w" |
sizes=(max-width: 520px) 100vw, (max-width: 1010px) 30vw, 21vw | |
| 6 col | w: 1230 h: 800 |
Above 1010px vw: fix height of 400px. The height of the grey/orange box adapts to the current height of the image. Note: if you add content to the box, please check the layout on all viewports. |
WD | src="923" srcset="615 615w, 923 923w, 1230 1230w" |
sizes=(max-width: 520px) 100vw, (max-width: 1010px) 45vw, 35vw | |
| 8 col | w: 830 h: 400 |
Above 1010px vw: fix height of 400px. The height of the grey/orange box adapts to the current height of the image. Note: if you add content to the box, please check the layout on all viewports. |
WD | src="623" srcset="415 415w, 623 623w, 830 830w" |
sizes=(max-width: 520px) 100vw, (max-width: 1010px) 62vw, 45vw | |