Docs

Digital Asset Managers

Last modified on June 23, 2025 • 5 min read • 916 words
Share via

Configure Digital Asset Managers to delegate the transformation of images

Configuring a DAM   Content Security Policy   Supported Providers   Cloudinary   ImageKit.io   Imgix   Rewriting Origin URLs   Adding a Custom DAM  
Added in v0.24.0   

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:

[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  

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

ImageKit.io  

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

Imgix  

Imgix Image
Imgix Image
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:

https://gaccount.blob.core.windows.net⏟origin hostaccount.blob.core.windows.net/gcontainer⏟containercontainer/dir/filename.jpg⏟path to assetdir/filename.jpg\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):

https://ik.imagekit.io⏟target hostik.imagekit.io/gaccount⏟accountaccount/dir/filename.jpg⏟path to assetdir/filename.jpg\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
absolute-url string v1.0.0      Defines if a local image should use absolute instead of relative paths.
anchor select Anchor of the image’s crop box, defaults to anchor value set in imaging section of the site configuration (usually Smart). Supported values: [TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, Smart].
format select webp Image format; leave empty for an auto format (if supported) or default format (usually webp). Supported values: [png, jpg, gif, tiff, bmp, webp].
image-height int v1.0.0      Height of the image in pixels.
image-width int v1.0.0      Width of the image in pixels.
img *resources.resourceAdapter Image resource to process. Must be set when handling local images.
transform select yes Image transformation. Supported values: [fill, fit].
url-dir string v1.0.0      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/’.
url-file string v1.0.0      The last element of an URL extension. For example, the file of the URL ‘ https://example.com/first/second/third.webp'  equals ’third.webp’.
url-host string v1.0.0      Host of an URL. For example, the host of the URL ‘ https://example.com/first/second/third.webp'  equals ’example.com’.
Name Type Required Default
absolute-url string
v1.0.0      Defines if a local image should use absolute instead of relative paths.
anchor select
Anchor of the image’s crop box, defaults to anchor value set in imaging section of the site configuration (usually Smart). Supported values: [TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, Smart].
format select webp
Image format; leave empty for an auto format (if supported) or default format (usually webp). Supported values: [png, jpg, gif, tiff, bmp, webp].
image-height int
v1.0.0      Height of the image in pixels.
image-width int
v1.0.0      Width of the image in pixels.
img *resources.resourceAdapter
Image resource to process. Must be set when handling local images.
transform select yes
Image transformation. Supported values: [fill, fit].
url-dir string
v1.0.0      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/’.
url-file string
v1.0.0      The last element of an URL extension. For example, the file of the URL ‘ https://example.com/first/second/third.webp'  equals ’third.webp’.
url-host string
v1.0.0      Host of an URL. For example, the host of the URL ‘ https://example.com/first/second/third.webp'  equals ’example.com’.
On this page: