Image server plugin test

Example overview

Markdown

More Markdown examples

JPG

![alt text](oliver-floricke-w-VEMWG8rmk-unsplash.jpg "title text")
alt text

Template 

{% 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'
} %}
alt

Grid 50%/50%

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 
![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
alt text

Twig/Template

NOT recommended
Use the helper template for your theme. The template needs no specific order of parameters and less likely to ever experience breaking changes. 
{{ picture()|raw }}

Twig force ratio 0.5

{{ picture(page.media['john-schaidler-9V3Q2W_mRLE-unsplash.jpg'].url, "alt attr", null, "lazy", 0.5)|raw }}
alt attr