Attachments

The attachments shortcode displays a list of files attached to a page with adjustable color, title and icon.

Attachments
Warning

This shortcode is deprecated in favor of the new the resources shortcode. See migration instructions below.

Migration

While this shortcode will still be available for some time, it does not receive support anymore. Start to migrate early, as it will be removed with the next major update of the theme.

The resources shortcode leverages Hugo’s resource feature for page bundles. It has all the same parameter as the attachments shortcode but applies the pattern directly on a resources Name attribute.

To migrate your pages apply the following steps:

  1. If a page is not already a page bundle convert it
  2. Move your files to a valid destination inside of your page bundle (depending if you have a branch or a leaf bundle)
  3. Change the calls from the attachments shortcode to the resources shortcode and adjust the pattern parameter to the new directory layout and the resources Name attribute.

Multilanguage features are not supported directly by the shortcode anymore but rely on Hugo’s handling for resource translations.

Usage

Warning

Since Hugo 0.112.0 this only works for leaf bundles. Branch bundles and simple pages must be switched to leaf bundles or you are currently locked to a Hugo version < 0.112.0.

While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.

​
{{% attachments sort="asc" /%}}
{{ partial "shortcodes/attachments.html" (dict
  "page" .
  "sort" "asc"
)}}

Parameter

Name Default Notes
style transparent The style scheme used for the box.

- by severity: info, note, tip, warning
- by brand color: primary, secondary, accent
- by color: blue, green, grey, orange, red
- by special color: default, transparent, code
color see notes The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color
title see notes Arbitrary text for the box title. Depending on the style there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: Attachments

If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
icon see notes Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: paperclip

If you want no icon, you have to set this parameter to " " (a non empty d with spaces)
sort asc Sorting the output in ascending or descending order.
pattern .* A regular expressions, used to filter the attachments by file name. For example:

- to match a file suffix of ‘jpg’, use .*\.jpg (not *.\.jpg)
- to match file names ending in jpg or png, use .*\.(jpg|png)

Setup

Single language

The shortcode lists files found in a specific folder. The name of the folder depends on your page type (either branch bundle, leaf bundle or page).

  1. If your page is a leaf bundle, attachments must be placed in a nested index.files folder, accordingly.

    • content
      • _index.md
      • page
        • _index.md
        • _index.files
          • attachment.pdf

  2. If your page is a branch bundle, attachments must be placed in a nested _index.files folder, accordingly.

    Warning This is only available for Hugo < 0.112.0

    • content
      • _index.md
      • page
        • index.md
        • index.files
          • attachment.pdf

  3. For simple pages, attachments must be placed in a folder named like your page and ending with .files.

    Warning This is only available for Hugo < 0.112.0

    • content
      • _index.md
      • page.files
        • attachment.pdf
      • page.md

Multilingual

Be aware that if you use a multilingual website, you will need to have as many folders as languages and the language code must be part of the folder name.

Eg. for a site in English and Piratish:

  • content
    • index.en.md
    • index.pir.md
    • page
      • index.en.md
      • index.pir.md
      • index.en.files
        • attachment.pdf
      • index.pir.files
        • attachment.pdf

Examples

Custom Title, List of Attachments Ending in pdf or mp4

{{% attachments title="Related **files**" pattern=".*\.(pdf|mp4)" /%}}
Related files

Info Styled Box, Descending Sort Order

{{% attachments style="info" sort="desc" /%}}
Info

With User-Defined Color and Font Awesome Brand Icon

{{% attachments color="fuchsia" icon="fab fa-hackerrank" /%}}
Attachments

Style, Color, Title and Icons

For further examples for style, color, title and icon, see the notice shortcode documentation. The parameter are working the same way for both shortcodes, besides having different defaults.