Skip to content

Support for `renderDimensionAttributes`, `width`, `height`, `loading` and `format` resp. `formats`
Compare
Choose a tag to compare
@mficzel mficzel released this 23 Oct 14:41
v6.0.0
35e194c
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

Kaleidoscope will now render width and height attributes whenever possible by default and thus help to prevent content reflow when images are loaded. This can be controlled via renderDimensionAttributes. Additionally the loading attribute can be used and width, height and format can be defined on the prototypes directly.

Sitegeist.Kaleidoscope:Image:

  • renderDimensionAttributes: render dimension attributes (width/height) when the data is available from the imageSource. Enabled by default
  • loading: (optional) loading attribute for the img tag
  • width: (optional) the base width, will be applied to the imageSource
  • height: (optional) the base height, will be applied to the imageSource
  • format: (optional) the image-format like webp or png, is applied to the imageSource

Sitegeist.Kaleidoscope:Picture:

  • renderDimensionAttributes: render dimension attributes (width/height) for the img-tag when the data is available from the imageSource
    if not specified dimensions will be enabled automatically for pictures that only use the formats options.
  • formats: (optional) image formats that will be rendered as sources of separate type (string or array)
  • loading: (optional) loading attribute for the img tag
  • width: (optional) the base width, will be applied to the imageSource
  • height: (optional) the base height, will be applied to the imageSource

Sitegeist.Kaleidoscope:Source:

  • format: (optional) the image-format for the source like webp or png, is applied to imageSource and type
  • width: (optional) the base width, will be applied to the imageSource
  • height: (optional) the base height, will be applied to the imageSource

In addition all Sitegeist.Kaleidoscope:Source rendered inside of a Sitegeist.Kaleidoscope:Picture
will inherit the values imageSource, srcset, sizes, width and height.

Assets 2