Field Types / Image field

Note: You are currently reading the documentation for Bolt 5.0. Looking for the documentation for Bolt 5.2 instead?

Simple image upload/select field.

Basic Configuration:¶

        cover:
            type: image

Example usage in templates:¶

{{ record.cover|showimage() }}

or

{{ record.cover|thumbnail(1368, 1026)|showimage }}

or

<img src="{{ record.cover.path }}" alt="{{ record.cover.alt|default(record|title) }}">

or

{{ record.cover|popup() }}

See Bolt Template tags for more info.

Options:¶

The field has a few options to change the appearance and functionality of the field.

• extensions Allows you to restrict users to only be able to upload files with certain file extensions.
• alt Can be used to set to true to create a field for the image alt attribute.
• upload Allows you to upload files for this field into a specified directory so they remain grouped. See also the upload_location setting.
• extra (Since Bolt 5.2) Allows you to set additional fields similar to alt. You can specify a label and a placeholder for each.

        cover:
            type: image
            alt: true
            extensions: [ gif, jpg, png ]
            upload: portfolio
            extra:
              title:
                label: Title
                placeholder: This is the placeholder for the title
              caption:
                label: Caption

Media attributes¶

For each uploaded image you can manage the associated Metadata, like "Title", "Description", "Copyright" and more. You can edit these from the Content Edit screen via the "Edit attributes", in the pull-down next to "Upload". Alternatively, you can locate the image under "File Management" > "Uploaded Files", where you can find all previously uploaded files.

You can access this Metadata in templates by using the media filter on an Image:

    {{ dump(record.image|media) }}

The output is a Media object, holding all the Metadata

Bolt\Entity\Media {#13211 ▼
  -id: 183
  -location: "files"
  -path: "stock2"
  -filename: "image_64619.jpg"
  -type: "jpg"
  -width: 1280
  -height: 1024
  -filesize: 158628
  -cropX: null
  -cropY: null
  -cropZoom: null
  -author: Proxies\__CG__\Bolt\Entity\User {#12559 ▶}
  -createdAt: DateTime @1564307887 {#13122 ▶}
  -modifiedAt: DateTime @1559370827 {#13123 ▶}
  -title: "Ullam earum quibusdam illum neque consequatur."
  -description: """
    Soluta quis ea corrupti iusto nisi earum quidem. Eum et eaque totam. Eaque aut saepe porro assumenda rem veniam cumque.
    """
  -originalFilename: null
  -copyright: "© Unsplash"
}

Another example:

    {% set media = record.image|media %}

    Copyright: {{ media.copyright }}

You can call these in your templates by using {{ record.values.image.alt }} or {{ record.values.image.caption }} and they will also be automatically used by Bolt's image functions.