Image left – responsive image preset
Contao gives you the option to predefine image sizes for various screen sizes that are loaded depending on the width of the viewport. Try resizing your browser window to see the effect in action.
Linked image right with pop-out
Vestibulum non dictum ante, eleifend bibendum metus. Curabitur consequat eget tellus id efficitur. Integer euismod laoreet urna. Maecenas a vulputate turpis, quis fringilla diam. Nam iaculis, mi in varius tempor, est nisi ullamcorper lacus, eu condimentum ipsum ligula sed purus. Morbi porta imperdiet tortor in varius. Proin in lobortis nunc. Donec ipsum diam, feugiat in nunc eget, malesuada ultricies sem. Curabitur sed ornare velit, quis varius augue.
Add classes "pop-out" and "radius5"
Linked image left with push-in
Vestibulum non dictum ante, eleifend bibendum metus. Curabitur consequat eget tellus id efficitur. Integer euismod laoreet urna. Maecenas a vulputate turpis, quis fringilla diam. Nam iaculis, mi in varius tempor, est nisi ullamcorper lacus, eu condimentum ipsum ligula sed purus. Morbi porta imperdiet tortor in varius. Proin in lobortis nunc. Donec ipsum diam, feugiat in nunc eget, malesuada ultricies sem. Curabitur sed ornare velit, quis varius augue.
Add class "push-in"
Image round
Vestibulum non dictum ante, eleifend bibendum metus. Curabitur consequat eget tellus id efficitur. Integer euismod laoreet urna. Maecenas a vulputate turpis, quis fringilla diam. Nam iaculis, mi in varius tempor, est nisi ullamcorper lacus, eu condimentum ipsum ligula sed purus. Morbi porta imperdiet tortor in varius. Proin in lobortis nunc. Donec ipsum diam, feugiat in nunc eget, malesuada ultricies sem. Curabitur sed ornare velit, quis varius augue.
Add class "round"
Image top
Vestibulum non dictum ante, eleifend bibendum metus. Curabitur consequat eget tellus id efficitur. Integer euismod laoreet urna. Maecenas a vulputate turpis, quis fringilla diam. Nam iaculis, mi in varius tempor, est nisi ullamcorper lacus, eu condimentum ipsum ligula sed purus. Morbi porta imperdiet tortor in varius. Proin in lobortis nunc. Donec ipsum diam, feugiat in nunc eget, malesuada ultricies sem. Curabitur sed ornare velit, quis varius augue.
Pop-out images
Add class "pop-out" to each image
Responsive Video
Note: the included CSS has been optimised for Youtube videos with an aspect ratio of 16:9. For other sizes you will need to adjust the CSS code.