File inputs

Last modified: March 27th, 2024

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

These inputs allow editors to upload new files, select existing images, and add external links. Enterprise customers can even configure an external digital asset manager for their team.

File#

File select input with controls to enter external links and upload new files. Does not filter by file type when choosing files.

File inputs are shown for inputs configured with the type file, or for input keys matching:

  • path
  • *_path
Screenshot of file input field with a CSS file selected
Naming convention
copied
extra_styles_path: /styles/screen.css
Naming convention
copied
{
  "extra_styles_path": "/styles/screen.css"
}
Naming convention
copied
extra_styles_path = "/styles/screen.css"
Input configuration
copied
path_to_css: /styles/screen.css
_inputs:
  path_to_css:
    type: file
Input configuration
copied
{
  "path_to_css": "/styles/screen.css",
  "_inputs": {
    "path_to_css": {
      "type": "file"
    }
  }
}
Input configuration
copied
path_to_css = "/styles/screen.css"

[_inputs.path_to_css]
type = "file"

Image#

Image select inputs with controls to enter external links and upload new image files. Filters files available to choose to files with image extensions.

Image inputs are shown for inputs configured with the type image, or for input keys matching:

  • image
  • *_image
  • image_path
  • *_image_path
Screenshot of image upload field with an image file selected
Naming convention
copied
background_image_path: /images/background.png
Naming convention
copied
{
  "background_image_path": "/images/background.png"
}
Naming convention
copied
background_image_path = "/images/background.png"
Input configuration
copied
image_file: /images/background.png
_inputs:
  image_file:
    type: image
Input configuration
copied
{
  "image_file": "/images/background.png",
  "_inputs": {
    "image_file": {
      "type": "image"
    }
  }
}
Input configuration
copied
image_file = "/images/background.png"

[_inputs.image_file]
type = "image"

Document#

Document select inputs with controls to enter external links and upload new document files. Filters files available to choose to files with document extensions.

Document inputs are shown for inputs configured with the type document, or for input keys matching:

  • document
  • *_document
  • document_path
  • *_document_path
Screenshot of Document input field with a PDF file selected
Naming convention
copied
newsletter_document_path: /documents/2016/newsletter.pdf
Naming convention
copied
{
  "newsletter_document_path": "/documents/2016/newsletter.pdf"
}
Naming convention
copied
newsletter_document_path = "/documents/2016/newsletter.pdf"
Input configuration
copied
path_to_newsletter: /documents/2016/newsletter.pdf
_inputs:
  path_to_newsletter:
    type: document
Input configuration
copied
{
  "path_to_newsletter": "/documents/2016/newsletter.pdf",
  "_inputs": {
    "path_to_newsletter": {
      "type": "document"
    }
  }
}
Input configuration
copied
path_to_newsletter = "/documents/2016/newsletter.pdf"

[_inputs.path_to_newsletter]
type = "document"

Options#

File path inputs are configured with options inside an _inputs entry.

Input configuration
copied
image_file: /uploads/image.png
_retina_image_file: /uploads/image-2x.png
_inputs:
  image_file:
    type: image
    options:
      paths:
        uploads: uploads
      accepts_mime_types:
        - image/png
        - image/svg+xml
        - image/jpeg
      width: 400
      height: 300
      resize_style: crop
      mime_type: image/jpeg
      expandable: true
      prevent_resize_existing_files: false
      sizes:
        - size: 2x
          target: _retina_image_file
Input configuration
copied
{
  "image_file": "/uploads/image.png",
  "_retina_image_file": "/uploads/image-2x.png",
  "_inputs": {
    "image_file": {
      "type": "image",
      "options": {
        "paths": {
          "uploads": "uploads"
        },
        "accepts_mime_types": [
          "image/png",
          "image/svg+xml",
          "image/jpeg"
        ],
        "width": 400,
        "height": 300,
        "resize_style": "crop",
        "mime_type": "image/jpeg",
        "expandable": true,
        "prevent_resize_existing_files": false,
        "sizes": [
          {
            "size": "2x",
            "target": "_retina_image_file"
          }
        ]
      }
    }
  }
}
Input configuration
copied
image_file = "/uploads/image.png"
_retina_image_file = "/uploads/image-2x.png"

[_inputs.image_file]
type = "image"

  [_inputs.image_file.options]
  accepts_mime_types = [ "image/png", "image/svg+xml", "image/jpeg" ]
  width = 400
  height = 300
  resize_style = "crop"
  mime_type = "image/jpeg"
  expandable = true
  prevent_resize_existing_files = false

    [_inputs.image_file.options.paths]
    uploads = "uploads"

    [[_inputs.image_file.options.sizes]]
    size = "2x"
    target = "_retina_image_file"

File path inputs have the following options available:

paths - Object#

Paths to common folders. Each path is relative to global site source. The available keys are:

  • uploads for the default location of newly uploaded site files.
  • dam_uploads for the default location of newly uploaded DAM files.
  • dam_static for the location of statically copied assets for DAM files.

uploads and dam_uploads have a number of dynamic placeholders available.

accepts_mime_types - String or array of strings#

Restricts which file types are available to select or upload to this input. Optional, each file path input has a different default:

  • File: *
  • Image: image/x-icon,image/gif,image/jpeg,image/jpeg,image/png,image/webp,image/bmp,image/svg+xml
  • Document: application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation

If set as a string, the value should be a comma-separated (no spaces) list of the mime types you want to filter by. The string * by itself allows any type.

If set as an array, each item should be a string of a single mime type you want to filter by.

empty_type - String#

Set how an ‘empty’ value will be saved. Does not apply to existing empty values. Can be one of the following:

  • string - an empty value for this input will be stored as "".
  • null - an empty value for this input will be stored as a null value (default). This does not apply to TOML files.
allowed_sources - Array#

If you have one or more DAMs connected to your site, you can use this key to list which asset sources can be uploaded to and selected from.

You can refer to a DAM with the Reference Key field from the site-level DAM configuration.

You can refer to your site files with site-files. If this is omitted from the array, site files will not be available as an asset source for this input.

If the input allows for images, the following options are also available:

width - Integer#

Defines the width of the bounding box used in the resizing process defined with resize_style.

height - Integer#

Defines the height of the bounding box used in the resizing process defined with resize_style.

resize_style - String#

Sets how uploaded image files are resized with a bounding box defined by width and height prior to upload. Defaults to contain. Must be crop, contain, cover or stretch:

  • crop prompts the user to choose a region of the image that matches the bounding box
  • cover keeps aspect ratio and ensures the image covers the bounding box
  • contain keeps aspect ratio and ensures the image fits inside the bounding box
  • stretch ignores aspect ratio and resizes the image to the bounding box

If width and height are not set, contain, cover and stretch have no effect. For crop, width and height are both optional, controlling the minimum size of the crop region and resulting image. The aspect ratio of the crop region is also matched to these values.

mime_type - String#

Sets what format the image is converted to prior to upload. The extension of the file is updated to match. Defaults to keeping the mime type of the uploaded file. Must be one of:

  • image/jpeg
  • image/png
  • image/webp
expandable - Boolean#

Controls whether or not images can be upscaled to fit the bounding box during resize prior to upload. Defaults to false. Has no effect if files are not resized.

prevent_resize_existing_files - Boolean#

Enable to skip the image resizing process configured for this input when selecting existing images. Defaults to false.

sizes - Array of objects#

Definitions for creating additional images of different sizes when uploading or selecting existing files. Has no default. Each entry contains the following fields:

  • size is a number suffixed with "x" (relative size) or "w" (fixed width) for setting the dimensions of the image (e.g. 2x, 3x, 100w, 360w)
  • target is a reference to another input that is given the path to this additional image file

If the additional image cannot be created (i.e. the uploaded image is too small and would need to be upscaled), the target input's value is unset so references to previous files aren't mixed with new ones.

Valid values#

Documented below are the valid formats for file, image, and document inputs.

The lists of examples are non-exhaustive.

Empty/null value:

  • file:

Any valid string (quoted or unquoted):

  • file: ""
  • file: ''
  • file: path/to
  • file: "path/to"
  • file: 'path/to'

Any valid string:

  • file = ""
  • file = ''
  • file = "path/to"
  • file = 'path/to'

Null value:

  • "file": null

Any valid string:

  • "file": ""
  • "file": "path/to"
Open in a new tab