1. Kanga
  2. Components

Img

Img is an Eleventy shortcode. It does not require a Nunjucks import statement.

Standalone images should be called using the Img component and never hardcoded in HTML. Img does some behind-the-scenes stuff to transform pictures and adds a unique security identifier required to call images from ImageKit.

Open this example in a new tab
View the code for this example 
{% img {
  url: '/assets/images/articles/brownhills/middleton-bridge.jpeg', 
  attrs: {
    'class': 'example-class',
    'data-this': 'that'
  },
  transform: 'square_small',
  isLocal: false
} %}

Shortcode arguments

Call the shortcode like so:

{% img {
  url: '/path/to/img.jpg', 
  attrs: {
    key: 'value',
    key: 'value'
  },
  transform: 'named transform',
  isLocal: false
} %}
Argument Type Description
url string The url of the image.
attributes object A set of key: value pairs to pass into the img tag as attributes.
transform string A transform name from the set of available image transformations
isLocal bool Set to true to disable remote image fetching via ImageKit. Defaults to false.

Transformations

Name Properties
default width: 780
wide width: 1200
card width: 410, height: 275
og width: 1280, height: 680
square_large width: 600, height: 600
square_small width: 420, height: 420
square_tiny width: 220, height: 220
rss width: 500