Image attributes over preset, Preset over Default. You can overwrite one setting from a preset in a template.
Replace images in markdown
Turn replacment of images in markdow on or off.
Parsedown adds a
<p></p> around every
<img /> tag. This option will remove that wrapper.
Set class, lazy &
<picture> wrapper to get consistent output for all images on the page. This only will be applied to svg loaded via
Height and width should be calculated and added by grav in Markdown
Filter generated images and themes for Markdown
Sometimes theme or plugin images shouldn't be changed. To avoid issues installing plugin, these option is disabled by default.
<img /> wrapped in a
<picture /> won't be processed.
Lazy loading images
Loading behavior is supported by all major browsers with
lazy. None will not include a lazy attribute.
Most frameworks use a standard responsive class to get them responsive and no vertical scrollbars. In Bootstrap CSS it is
img-fluid and Object Fit classes in tailwind. You can also define your own class. Multiple classes can be added.
Classes won't overwrite or extend existing classes in markdown
Log missing images
Missing images will be logged as notice to grav.log. Information includes the website path and image.
Show error image
<img> inline svg and file path to missing image. This setting is for development.
Density & Quality
We provide a default set in the plugin. In most cases you should sort out down to maybe 1 and 2x and not all options, because all those images need to be generated per breakpoint. We added so maybe, because deleting them is easy. Quality in high density needs to be low (smaller and looks better).
(Yesviz devices insights)(https://yesviz.com/devices.php) has a nice overview of different devices and the pixel density (ratio). Viewport is the CSS size and Resolution the real pixel. Highest is 4x at the moment.
- 4 density with 1920
7680pxwide source image
- 2 breakpoints + default + 1 Fallback images with 5 density's will result in 16 images
- Lager source images need more resources in php to be generated and takes longer
- density: 1
- density: 1.5
- density: 2
- density: 3
- density: 4
Sort the density's low to high
Pixel density on the display. The images are only be generated, if the source image is large enough.
Quality for set density
Image quality for JPEG. Less quality for higher density
Breakpoint to image width
In default set most values are 1:1 (e.g.
360px breakpoint to 360px image width) or maybe few pixel less because mobile has a border left and right
Breakpoints are in pixel, because binary images are pixel based and also every display works in pixel.
Image width to breakpoint.
Max page/image width
Set your default max width. Cna be overwritten in templates or presets for full width images reaching outside the content.
Presets can be used in templates and markdown and allows defining sets for editors or changing a setting on all used places of code and markdown at once.
Name your preset without spaces or special chars.
noImageServer to disable image server for a specific image to avoid getting processed.
Disable inherited breakpoint on a preset from default.
> 1.0will be vertical - smaller
< 1.0will be horizontal
Set a fixed ratio for an image.
Blog listing and all images should be Max image with
250px high needs a
Max Width, loading, class, Density&Quality and Breakpoints
Look at base section for hose option and empty will inherit from base.