Skip to main content

Image server plugin

The image server plugin allows you to add responsive images via config without extra elements.

Features​

  • Drop in - no extra config for basic usage
  • WebP Images
  • Lazy loading via attribute
  • Responsive images
  • Retina images in different quality levels
  • Adds width and height
  • Add default class (often needed for responsive images)
  • Configure sets
  • Allows adding different breakpoints and max width per set
  • Add a ratio e.g. header or teaser image
  • Overwrite loading and class
  • Used via parameter or twig/template
  • Works in Page Content (Markdown), templates (via twig or helper template)
  • All that is helpful for faster websites especially on mobile

Example​

Markdown​

Basic image
![alt text](test.jpg "title text")
![alt text](test.jpg "title text")

Template​

Exmaple tempalte with preset
{% include 'picture.html.twig' with {
'image': object.header.img,
'alt': object.header.title,
'preset': 'myPreset'
} %}
Exmaple tempalte with parameters
{% include 'picture.html.twig' with {
'image': object.header.img,
'alt': object.header.title,
'ratio': 0.33,
'class': 'img-fluid w-50 border-radius',
'loading': 'eager'
...
} %}

Result​

<picture>
    <source media="(min-width: 769px)" srcset="image.webp 1x, image.webp 2x, image.webp 3x" type="image/webp">
    <source media="(min-width: 481px)" srcset="image.webp 1x, image.webp 2x, image.webp 3x" type="image/webp">
    <source srcset="image.webp 1x, image.webp 2x, image.webp 3x" type="image/webp">
    <img alt="alt text" title="title text" loading="lazy" src="images.jpeg" class="img-fluid" width="1296" height="864">
</picture>

Installation​

Requirements
  • PHP 8.0 and newer
  • Grav 1.7.32 (we submitted patches to grav adn grav admin. Should work before as well)
  • NO Windows filesystem support - Docker/WSL should work
  • No IE support - IE would need a polyfill for <picture>

Like any other normal plugin, and it uses internal image processing.

Support​

For live chatting, please use Discord Chat Room - username xf for discussions directly related to the plugin.

For bugs, features, improvements, please ensure you create issues in the GitHub repository.

process