Skip to main content

Settings

Base settings

Inheritance

Image attributes over preset, Preset over Default. You can overwrite one setting from a preset in a template.

General

Replace images in markdown

Default: yes

Turn replacment of images in markdow on or off.

Remove p wrapper

Default: yes

Parsedown adds a <p></p> around every <img /> tag. This option will remove that wrapper.

SVG support

Default: yes

Set class, lazy & <picture> wrapper to get consistent output for all images on the page. This only will be applied to svg loaded via <img />. Height and width should be calculated and added by grav in Markdown

Filter generated images and themes for Markdown

Default: 'no'

Sometimes theme or plugin images shouldn't be changed. To avoid issues installing plugin, these option is disabled by default.

Usgae & Support on caniuse

info

Every <img /> wrapped in a <picture /> won't be processed.

Lazy loading images

Default: lazy Options: eager, lazy, none

Loading behavior is supported by all major browsers with eager and lazy. None will not include a lazy attribute.

Standard class

Default : empty

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.

Markdown

Classes won't overwrite or extend existing classes in markdown

Log

Log missing images

Default : yes

Missing images will be logged as notice to grav.log. Information includes the website path and image.

Show error image

Default : no

Shows an <img> inline svg and file path to missing image. This setting is for development.

Density & Quality

Important

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.

Additional:

  • 4 density with 1920 maxWidth needs a 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
Default config
default:
- density: 1
quality: 82
- density: 1.5
quality: 70
- density: 2
quality: 65
- density: 3
quality: 60
- density: 4
quality: 50

Density's generated

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

info

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

Breakpoint

Breakpoints are in pixel, because binary images are pixel based and also every display works in pixel.

Image width

Image width to breakpoint.

Max page/image width

Default: 1280

Set your default max width. Cna be overwritten in templates or presets for full width images reaching outside the content.

Configure presets

info

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.

Preset name

Name your preset without spaces or special chars.

noImageServer Preset

Add noImageServer to disable image server for a specific image to avoid getting processed.

Breakpoints inherited

Default: yes

Disable inherited breakpoint on a preset from default.

Ratio

Default: empty - bigger > 1.0 will be vertical - smaller < 1.0 will be horizontal

Set a fixed ratio for an image.

Example usage

Blog listing and all images should be Max image with 600px and 250px high needs a 0.04166... ratio.

Max Width, loading, class, Density&Quality and Breakpoints

Look at base section for hose option and empty will inherit from base.

environmental_study