Contributors to this page
Last update:

Attachments

The Attachments shortcode displays a list of files attached to a page.

<div class="attachments-files">

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/BachGavotteShort.mp3" >
                BachGavotteShort.mp3
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/Carroll_AliceAuPaysDesMerveilles.pdf" >
                Carroll_AliceAuPaysDesMerveilles.pdf
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/adivorciarsetoca00cape.pdf" >
                adivorciarsetoca00cape.pdf
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/hugo.png" >
                hugo.png
            </a>
            (17 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/movieselectricsheep-flock-244-32500-2.mp4" >
                movieselectricsheep-flock-244-32500-2.mp4
            </a>
            (0 ko)
        </li>
	

<div>

Usage

The shortcurt lists files found in a specific folder. Currently, it support two implementations for pages

  1. If your page is a markdown file, attachements must be place in a folder named like your page and ending with .files.

    • content
      • _index.md
      • page.files
        • attachment.pdf
      • page.md
  2. If your page is a folder, attachements must be place in a nested ‘files’ folder.

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

Be aware that if you use a multilingual website, you will need to have as many folders as languages.

That’s all !

Parameters

ParameterDefaultDescription
title“Attachments”List’s title
style"”Choose between “orange”, “grey”, “blue” and “green” for nice style
pattern“.*”A regular expressions, used to filter the attachments by file name.

The pattern parameter value must be regular expressions.

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)

Examples

List of attachments ending in pdf or mp4

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

renders as

<div class="attachments-files">

	
	
		
	

	
	
		
            <li>
                <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/Carroll_AliceAuPaysDesMerveilles.pdf" >
                    Carroll_AliceAuPaysDesMerveilles.pdf
                </a>
                (0 ko)
            </li>
		
	

	
	
		
            <li>
                <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/adivorciarsetoca00cape.pdf" >
                    adivorciarsetoca00cape.pdf
                </a>
                (0 ko)
            </li>
		
	

	
	
		
	

	
	
		
            <li>
                <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/movieselectricsheep-flock-244-32500-2.mp4" >
                    movieselectricsheep-flock-244-32500-2.mp4
                </a>
                (0 ko)
            </li>
		
	

<div>

Colored styled box

{{%attachments style="orange" /%}}

renders as

<div class="attachments-files">

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/BachGavotteShort.mp3" >
                BachGavotteShort.mp3
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/Carroll_AliceAuPaysDesMerveilles.pdf" >
                Carroll_AliceAuPaysDesMerveilles.pdf
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/adivorciarsetoca00cape.pdf" >
                adivorciarsetoca00cape.pdf
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/hugo.png" >
                hugo.png
            </a>
            (17 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/movieselectricsheep-flock-244-32500-2.mp4" >
                movieselectricsheep-flock-244-32500-2.mp4
            </a>
            (0 ko)
        </li>
	

<div>
{{%attachments style="grey" /%}}

renders as

<div class="attachments-files">

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/BachGavotteShort.mp3" >
                BachGavotteShort.mp3
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/Carroll_AliceAuPaysDesMerveilles.pdf" >
                Carroll_AliceAuPaysDesMerveilles.pdf
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/adivorciarsetoca00cape.pdf" >
                adivorciarsetoca00cape.pdf
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/hugo.png" >
                hugo.png
            </a>
            (17 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/movieselectricsheep-flock-244-32500-2.mp4" >
                movieselectricsheep-flock-244-32500-2.mp4
            </a>
            (0 ko)
        </li>
	

<div>
{{%attachments style="blue" /%}}

renders as

<div class="attachments-files">

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/BachGavotteShort.mp3" >
                BachGavotteShort.mp3
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/Carroll_AliceAuPaysDesMerveilles.pdf" >
                Carroll_AliceAuPaysDesMerveilles.pdf
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/adivorciarsetoca00cape.pdf" >
                adivorciarsetoca00cape.pdf
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/hugo.png" >
                hugo.png
            </a>
            (17 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/movieselectricsheep-flock-244-32500-2.mp4" >
                movieselectricsheep-flock-244-32500-2.mp4
            </a>
            (0 ko)
        </li>
	

<div>
{{%attachments style="green" /%}}

renders as

<div class="attachments-files">

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/BachGavotteShort.mp3" >
                BachGavotteShort.mp3
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/Carroll_AliceAuPaysDesMerveilles.pdf" >
                Carroll_AliceAuPaysDesMerveilles.pdf
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/adivorciarsetoca00cape.pdf" >
                adivorciarsetoca00cape.pdf
            </a>
            (0 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/hugo.png" >
                hugo.png
            </a>
            (17 ko)
        </li>
	

	
	
        <li>
            <a href="/documentation/contribute/20_documentation/25_markup/attachments.files/movieselectricsheep-flock-244-32500-2.mp4" >
                movieselectricsheep-flock-244-32500-2.mp4
            </a>
            (0 ko)
        </li>
	

<div>