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.

setup wizard