Page Resources

Page resources are only accessible from page bundles, those directories with index.md or _index.md files at their root. Page resources are only available to the page with which they are bundled.

In this example, first-post is a page bundle with access to 10 page resources including audio, data, documents, images, and video. Although second-post is also a page bundle, it has no page resources and is unable to directly access the page resources associated with first-post.

content
└── post
    ├── first-post
    │   ├── images
    │   │   ├── a.jpg
    │   │   ├── b.jpg
    │   │   └── c.jpg
    │   ├── index.md (root of page bundle)
    │   ├── latest.html
    │   ├── manual.json
    │   ├── notice.md
    │   ├── office.mp3
    │   ├── pocket.mp4
    │   ├── rating.pdf
    │   └── safety.txt
    └── second-post
        └── index.md (root of page bundle)

Properties

ResourceType

The main type of the resource’s Media Type. For example, a file of MIME type image/jpeg has the ResourceType image. A Page will have ResourceType with value page.

New in v0.80.0 Note that we in Hugo v0.80.0 fixed a bug where non-image resources (e.g. video) would return the MIME sub type, e.g. json.

Name

Default value is the filename (relative to the owning page). Can be set in front matter.

Title

Default value is the same as .Name. Can be set in front matter.

Permalink

The absolute URL to the resource. Resources of type page will have no value.

RelPermalink

The relative URL to the resource. Resources of type page will have no value.

Content

The content of the resource itself. For most resources, this returns a string with the contents of the file. This can be used to inline some resources, such as <script>{{ (.Resources.GetMatch "myscript.js").Content | safeJS }}</script> or <img src="{{ (.Resources.GetMatch "mylogo.png").Content | base64Encode }}">.

MediaType

The MIME type of the resource, such as image/jpeg.

MediaType.MainType

The main type of the resource’s MIME type. For example, a file of MIME type application/pdf has for MainType application.

MediaType.SubType

The subtype of the resource’s MIME type. For example, a file of MIME type application/pdf has for SubType pdf. Note that this is not the same as the file extension - PowerPoint files have a subtype of vnd.mspowerpoint.

MediaType.Suffixes

A slice of possible suffixes for the resource’s MIME type.

Methods

ByType

Returns the page resources of the given type.

{{ .Resources.ByType "image" }}

Match

Returns all the page resources (as a slice) whose Name matches the given Glob pattern (examples). The matching is case-insensitive.

{{ .Resources.Match "images/*" }}

GetMatch

Same as Match but will return the first match.

Pattern Matching

// Using Match/GetMatch to find this images/sunset.jpg ?
.Resources.Match "images/sun*" ✅
.Resources.Match "**/sunset.jpg" ✅
.Resources.Match "images/*.jpg" ✅
.Resources.Match "**.jpg" ✅
.Resources.Match "*" 🚫
.Resources.Match "sunset.jpg" 🚫
.Resources.Match "*sunset.jpg" 🚫

Page Resources Metadata

The page resources' metadata is managed from the corresponding page’s front matter with an array/table parameter named resources. You can batch assign values using wildcards.

name

Sets the value returned in Name.

title

Sets the value returned in Title

params

A map of custom key/values.

Resources metadata example

date: "2018-01-25"
resources:
- name: header
  src: images/sunset.jpg
- params:
    icon: photo
  src: documents/photo_specs.pdf
  title: Photo Specifications
- src: documents/guide.pdf
  title: Instruction Guide
- src: documents/checklist.pdf
  title: Document Checklist
- src: documents/payment.docx
  title: Proof of Payment
- name: pdf-file-:counter
  params:
    icon: pdf
  src: '**.pdf'
- params:
    icon: word
  src: '**.docx'
title: Application

date = '2018-01-25'
title = 'Application'
[[resources]]
name = 'header'
src = 'images/sunset.jpg'
[[resources]]
src = 'documents/photo_specs.pdf'
title = 'Photo Specifications'
[resources.params]
  icon = 'photo'

[[resources]]
src = 'documents/guide.pdf'
title = 'Instruction Guide'
[[resources]]
src = 'documents/checklist.pdf'
title = 'Document Checklist'
[[resources]]
src = 'documents/payment.docx'
title = 'Proof of Payment'
[[resources]]
name = 'pdf-file-:counter'
src = '**.pdf'
[resources.params]
  icon = 'pdf'

[[resources]]
src = '**.docx'
[resources.params]
  icon = 'word'

{
   "date": "2018-01-25",
   "resources": [
      {
         "name": "header",
         "src": "images/sunset.jpg"
      },
      {
         "params": {
            "icon": "photo"
         },
         "src": "documents/photo_specs.pdf",
         "title": "Photo Specifications"
      },
      {
         "src": "documents/guide.pdf",
         "title": "Instruction Guide"
      },
      {
         "src": "documents/checklist.pdf",
         "title": "Document Checklist"
      },
      {
         "src": "documents/payment.docx",
         "title": "Proof of Payment"
      },
      {
         "name": "pdf-file-:counter",
         "params": {
            "icon": "pdf"
         },
         "src": "**.pdf"
      },
      {
         "params": {
            "icon": "word"
         },
         "src": "**.docx"
      }
   ],
   "title": "Application"
}

From the example above:

• sunset.jpg will receive a new Name and can now be found with .GetMatch "header".
• documents/photo_specs.pdf will get the photo icon.
• documents/checklist.pdf, documents/guide.pdf and documents/payment.docx will get Title as set by title.
• Every PDF in the bundle except documents/photo_specs.pdf will get the pdf icon.
• All PDF files will get a new Name. The name parameter contains a special placeholder :counter, so the Name will be pdf-file-1, pdf-file-2, pdf-file-3.
• Every docx in the bundle will receive the word icon.

The :counter placeholder in name and title

The :counter is a special placeholder recognized in name and title parameters resources.

The counter starts at 1 the first time they are used in either name or title.

For example, if a bundle has the resources photo_specs.pdf, other_specs.pdf, guide.pdf and checklist.pdf, and the front matter has specified the resources as:

resources:
- src: '*specs.pdf'
  title: 'Specification #:counter'
- name: pdf-file-:counter
  src: '**.pdf'

[[resources]]
src = '*specs.pdf'
title = 'Specification #:counter'
[[resources]]
name = 'pdf-file-:counter'
src = '**.pdf'

{
   "resources": [
      {
         "src": "*specs.pdf",
         "title": "Specification #:counter"
      },
      {
         "name": "pdf-file-:counter",
         "src": "**.pdf"
      }
   ]
}

the Name and Title will be assigned to the resource files as follows: