Digital Asset Managers
Configure Digital Asset Managers to delegate the transformation of images
Hinodes uses Hugo’s image processing to preprocess images on the server side. Hugo uses caching to reduce the build time. Despite the caching techniques, the image processing can take significant time, especially on larger sites. An alternative approach is to use a dedicated Digital Asset Manager. Most managers offer an API to transform images on the fly. The following paragraphs explain how to enable these Digital Asset Managers.
Hinode supports
Cloudinary
,
ImageKit.io
, and
Imgix
as Digital Asset Manager (DAM). You can configure these managers in your site parameters. Link a DAM to a specific URL by providing a regular expression that matches the domain name of the URL. For example, the host = cloudinary
matches the image https://res.cloudinary.com/demo/image/upload/dog.webp
to
Cloudinary
. When no match is found, Hinode uses Hugo’s image processing instead. Hinode uses the following configuration by default:
[images]
[images.cloudinary]
host = "cloudinary"
[images.imagekit]
host = "imagekit"
[images.imgix]
host = "imgix"
Hinode has enabled access for Cloudinary, ImageKit.io, and Imgix by default. The following settings are set in config/_default/server.toml
. Similar settings are defined in the netlify.toml
file provided in the repository’s root when deploying to
Netlify
. Revise the Content Security Policy as needed.
img-src: https://*.imgix.net https://*.imagekit.io https://*.cloudinary.com
You can include DAM-enabled images and figures using the regular
Image shortcode. Simply include the image’s URL in the src
attribute. The next paragraphs demonstrate the various available Digital Asset Managers.
{{< image src="https://res.cloudinary.com/demo/image/upload/dog.webp"
ratio="1x1" caption="Cloudinary image" wrapper="col-6 mx-auto" >}}
{{< image src="https://ik.imagekit.io/demo/default-image.jpg"
ratio="1x1" caption="ImageKit.io image" wrapper="col-6 mx-auto" >}}
{{< image src="https://assets.imgix.net/examples/bluehat.jpg"
ratio="1x1" caption="imgix image" wrapper="col-6 mx-auto" >}}
You can rewrite the URL of the image when using a different origin server. Currently, this feature is supported by the adapter for ImageKit.io. For example, when using Azure Blob Storage as origin, your input URL may look like the following:
Adjust your CDN configuration in the site’s parameters to include the hostname, account, and container of your origin server. Next, set rewrite = true
to trigger the adapter to rewrite your origin URL:
[images]
[images.imagekit]
host = "imagekit|windows"
account = "account"
container = "container"
rewrite = true
The resulting URL will look like this (notice the container name has been dropped from the URL):
Tip
Configuring an additional Digital Asset Manager? Please consider to contribute your adapter to the open-source community of Hinode. Review the contributing guidelines to find out more.
You can configure additional Digital Asset Managers by adding a adapter to the folder layouts/partials/assets/adapters/
. For example, the adapter for
Cloudinary
is available in cloudinary.html
. Hinode supports basic image transformations such as adjusting the dimensions and cropping. Hinode passes the following arguments to each recognized adapter:
Name | Type | Required | Default | Comment |
---|---|---|---|---|
absoluteURL | string | false | Defines if a local image should use absolute instead of relative paths. | |
anchor | select | Anchor of the crop box. Supported values: [TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, Smart]. | ||
dir | string | All but the last element of an URL extension. For example, the dir of the URL ‘ https://example.com/first/second/third.webp' equals ‘/first/second/’. | ||
file | string | yes | The last element of an URL extension. For example, the file of the URL ‘ https://example.com/first/second/third.webp' equals ’third.webp’. | |
format | select | Image format; leave empty for an auto format (if supported) or default format (usually jpg). Supported values: [png, jpg, gif, tiff, bmp, webp]. | ||
height | int | yes | Height of the image in pixels. | |
host | string | Host of an URL. For example, the host of the URL ‘ https://example.com/first/second/third.webp' equals ’example.com’. | ||
img | *resources.resourceAdapter | Image resource to process. Must be set when handling local images. | ||
transform | select | yes | Image transformation. Supported values: [fill, fit]. | |
width | int | yes | Width of the image in pixels. |