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.
Image Gallery with push-in thumbnails
Pop-out images
Add class "pop-out" to each image
Content slider
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.