![alt text](oliver-floricke-w-VEMWG8rmk-unsplash.jpg "title text")
{% include 'picture.html.twig' with {
'image': '/user/pages/01.home/nousnou-iwasaki-myPzH34VYK4-unsplash.jpg',
'ratio': 0.33,
'alt': "alt",
'class': 'img-fluid foobar',
'loading': 'eager'
} %}
OR with object (more common)
{% include 'picture.html.twig' with {
'image': object.header.img,
'ratio': 0.33,
'alt': object.header.title,
'class': 'img-fluid foobar',
'loading': 'eager'
} %}
Preset
- Name: 50p
- Ratio: 0.45
- MaxWidth: 636
- Breakpoints: [ 768: 768, 480: 480 ]
- Loading: inherit
- Class: inherit
{% include 'picture.html.twig' with {
image: '/user/pages/01.home/dj-johnson-YDHpNIj1TgQ-unsplash.jpg',
ratio: 0.33,
alt: "alt",
preset: '50p'
} %}
![alt text](undraw_coffee_re_x35h.png?preset=50p "title text")
Preset is only attribute read by image-server. No custom settings for a editor
{{ picture()|raw }}
{{ picture(page.media['john-schaidler-9V3Q2W_mRLE-unsplash.jpg'].url, "alt attr", null, "lazy", 0.5)|raw }}