# Digital Asset Managers

Configure Digital Asset Managers to delegate the transformation of images

Added in v0.24.0 

Hinode uses Hugo’s [image processing](../content/images-and-figures)
 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](https://cloudinary.com), [ImageKit.io](https://imagekit.io), and [Imgix](https://imgix.com) 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](https://cloudinary.com). When no match is found, Hinode uses Hugo's image processing instead. Hinode uses the following configuration by default:

```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](/docs/advanced-settings/server-headers)
 for more information.

```toml
[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 [](../components/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:

```math {class="mb-4"}
\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:

```toml
[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):

```math
\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](/docs/about/contribute/)
 to find out more.

You can configure additional Digital Asset Managers by adding an adapter to the folder `layouts/_partials/assets/adapters/`. For example, the adapter for [Cloudinary](https://cloudinary.com) 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 | Description |
| --- | --- | --- | --- | --- |
| `absolute-url` | bool |  |  | 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 |  |  | Height of the image in pixels. |
| `image-width` | int |  |  | 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 |  |  | 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 |  |  | 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 |  |  | Host of an URL. For example, the host of the URL 'https://example.com/first/second/third.webp' equals 'example.com'. |