Skip to content

Latest commit

 

History

History
119 lines (86 loc) · 4.8 KB

DOCUMENTATION.md

File metadata and controls

119 lines (86 loc) · 4.8 KB

Installation

  1. Simply copy the Imagekit folder into site/addons/.
  2. Configure your default settings.
  3. Take a well deserved break.

Default Settings

Head to Configure -> Addons -> ImageKit in the CP and configure your default settings.

Values configured here will be saved in site/settings/addons/imagekit.yaml.

domain: ik.imagekit.io
id: starwars
identifier: characters
debug: false

Debug Mode

Set debug: true to make the {{ imagekit }} tag output the original image path instead of the ImageKit URL. This might come in handy when developing locally without an internet connection or if your machine isn’t setup for local testing.

Basic Usage

Single Image

We have an asset URL saved in the YAML and want to resize the image to 300x200.

image: /assets/starwars/mandalorian.jpg
{{ imagekit :src="image" w="300" h="200" }}

<!-- Use the nicer shorthand syntax: -->
{{ imagekit:image w="300" h="200" }}

https://ik.imagekit.io/starwars/characters/tr:w-300,h-200/assets/starwars/mandalorian.jpg

Multiple Images

Loop over a list of asset URLs to generate ImageKit URLs for each one. Reference the URL of the current asset in the loop using {{ value }}.

images:
  - /assets/starwars/mandalorian.jpg
  - /assets/starwars/baby-yoda.jpg
{{ images }}
  {{ imagekit:value w="300" h="200" }}
{{ /images }}

https://ik.imagekit.io/starwars/characters/tr:w-300,h-200/assets/starwars/mandalorian.jpg
https://ik.imagekit.io/starwars/characters/tr:w-300,h-200/assets/starwars/baby-yoda.jpg

HTML Attributes

Pass the following parameters to generate the respective HTML attribute.

Name Type Description
src String The URL of the image. You can also use the shorthand syntax instead, e.g. {{ imagekit:image }}.
tag Boolean When set to true, this will output an <img> tag with the URL in the src attribute.
alt String When using the tag parameter, this will insert the given text into the alt attribute.
title String When using the tag parameter, this will insert the given text into the title attribute.
class String When using the tag parameter, this will insert the given text into the class attribute.

Settings Parameters

You may want to override the default addon settings for a specific image. You can do this with the following parameters.

Name Type Description
domain String Override the default domain setting.
id String Override the default id setting.
identifier String Override the default identifier setting.
debug Boolean Override the default debug setting.

Passing an empty string to domain, id or identifier will remove the default setting.

ImageKit Parameters

You may pass any transformation parameters straight from the ImageKit API. For example, {{ imagekit:image w="300" }} will use the width transformation parameter. There’s only a few parameters that are not supported by this addon.

Category Supported Parameters Unsupported Parameters
Resize, crop and other common transformations w h ar c cm fo q f bl e-grayscale dpr n pr lo t b cp md rt r bg orig di
Overlay oi obg ofo ox oy oh ow oit ot ote otw otbg otp otia otc otf ots ott oa
Image enhancement & color manipulation e-contrast e-sharpen e-usm

Chained Transformations

You can take advantage of Chained Transformations by adding a : at the end of a given parameter. For example, {{ imagekit:image w="300" h="200:" rt="90" }} will first resize the image to 300x200 and then apply a rotation of 90 degrees.

Lazyloading with lazySizes

If you’re using lazySizes to lazyload images, chances are you’re using the lazySizes RIaS extension. You can leverage the power of the {width} and {quality} placeholder by setting the value of the w and/or q parameter to auto.

{{ imagekit:image w="auto" q="auto" }}

https://ik.imagekit.io/starwars/characters/tr:w-{width},q-{auto}/assets/starwars/mandalorian.jpg