Search code examples
hugocloudcannon

How do I get Cloudcannon image inputs to work with Hugo image processing?


I'm trying to use Cloudcannon as a CMS for a Hugo-based website. For some of my content types, I use Hugo's image processing, which means I store those images that need to be processed under assets/ rather than static/.

Cloudcannon allows for image inputs to be configured with a custom upload directory, which I need to go to the correct subdirectory of assets/images/ for each content type. That works fine--the images are uploaded to the right location. The problem is that then the frontmatter path for the image includes the assets/ part of the directory path, which doesn't work for Hugo.

My configuration is as follows, allowing images uploaded for different content types to go in different subdirectories of assets/images/.

collections_config:
  news:
    schemas:
      default:
        path: schemas/news.md
        name: News post
    path: content/english/news
    _inputs:
      image:
        type: image
        options:
          uploads_dir: assets/images/news
  clients:
    schemas:
      default:
        path: schemas/client.md
        name: Client listing
    path: content/english/clients
    _inputs:
      image:
        type: image
        options:
          uploads_dir: assets/images/clients

Is there any way to set the fontmatter output path to exclude assets/? Maybe there's a separate option from uploads_dir I haven't found?

Help greatly appreciated!


Solution

  • You can set a static path here. The static path is used when uploading new files, but is not saved as part of the path for the front matter field. It's set globally, and defaults to your Hugo --staticDir command line option (defaults to static).

    Here's how you would set it up for your code example:

    Create or add to /cloudcannon.config.yml:

    paths:
      uploads: assets/images/[collection]
      static: assets
    

    Uploading a new file called cat.png on an input in the news collection here is sent to: /assets/images/news/cat.png. The value saved in the front matter is /images/news/cat.png.

    I've also set a global uploads path here with the [collection] placeholder, which will have the same result as your uploads_dir options - and you won't have to set it multiple times.