Digital Asset Managers

Share via

Link copied to clipboard

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.

Configuring a DAM

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:

config/_default/params.toml

[images]
    [images.cloudinary]
        host = "cloudinary"
    [images.imagekit]
        host = "imagekit"
    [images.imgix]
        host = "imgix"

Content Security Policy

Hinode has enabled access for Cloudinary, ImageKit.io, and Imgix by default. The following settings are set in the site’s parameters (usually hugo.toml). See the Content Security Policy for more information.

[params.modules.hinode.csp]
    frame-src = [
        "player.cloudinary.com",
    ]
    img-src = [
        "*.imgix.net",
        "*.imagekit.io",
        "*.cloudinary.com"
    ]

Supported providers

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.

Cloudinary

markdown

{{< image src="https://res.cloudinary.com/demo/image/upload/dog.webp"
    ratio="1x1" caption="Cloudinary image" wrapper="col-6 mx-auto" >}}

ImageKit.io

markdown

{{< image src="https://ik.imagekit.io/demo/default-image.jpg"
    ratio="1x1" caption="ImageKit.io image" wrapper="col-6 mx-auto" >}}

Imgix

markdown

{{< image src="https://assets.imgix.net/examples/bluehat.jpg"
    ratio="1x1" caption="imgix image" wrapper="col-6 mx-auto" >}}

Rewriting origin URLs

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:

\texttt{https://} \rlap{$ \underbrace{ \vphantom{g} \phantom{\texttt{account.blob.core.windows.net}} }_{\text{origin host}} $} \texttt{account.blob.core.windows.net/} \rlap{$ \underbrace{ \vphantom{g} \phantom{\texttt{container}} }_{\text{container}} $} \texttt{container/} \rlap{$ \underbrace{ \phantom{\texttt{dir/filename.jpg}} }_{\text{path to asset}} $} \texttt{dir/filename.jpg}

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):

\texttt{https://} \rlap{$ \underbrace{ \phantom{\texttt{ik.imagekit.io}} }_{\text{target host}} $} \texttt{ik.imagekit.io/} \rlap{$ \underbrace{ \vphantom{g} \phantom{\texttt{account}} }_{\text{account}} $} \texttt{account/} \rlap{$ \underbrace{ \phantom{\texttt{dir/filename.jpg}} }_{\text{path to asset}} $} \texttt{dir/filename.jpg}

Adding a custom DAM

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.

• Update CSP configuration for digital asset managers (82a91d6)

On this page:

Docs

Configuring a DAM

Content Security Policy

Supported providers

Cloudinary

ImageKit.io

Imgix

Rewriting origin URLs

Adding a custom DAM