Page Resources
Page resources are available for page bundles only,
i.e. a directory with either a index.md, or _index.md file at its root. Resources are only attached to
the lowest page they are bundled with, and simple which names does not contain index.md are not attached any resource.
Properties
- ResourceType
- The main type of the resource’s Media Type. For example, a file of MIME type
image/jpeghas the ResourceTypeimage. APagewill haveResourceTypewith valuepage.
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
pagewill have no value. - RelPermalink
- The relative URL to the resource. Resources of type
pagewill 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/pdfhas for MainTypeapplication. - MediaType.SubType
- The subtype of the resource’s MIME type. For example, a file of MIME type
application/pdfhas for SubTypepdf. Note that this is not the same as the file extension - PowerPoint files have a subtype ofvnd.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
Namematches the given Glob pattern (examples). The matching is case-insensitive.
{{ .Resources.Match "images/*" }}
- GetMatch
- Same as
Matchbut 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.jpgwill receive a newNameand can now be found with.GetMatch "header".documents/photo_specs.pdfwill get thephotoicon.documents/checklist.pdf,documents/guide.pdfanddocuments/payment.docxwill getTitleas set bytitle.- Every
PDFin the bundle exceptdocuments/photo_specs.pdfwill get thepdficon. - All
PDFfiles will get a newName. Thenameparameter contains a special placeholder:counter, so theNamewill bepdf-file-1,pdf-file-2,pdf-file-3. - Every docx in the bundle will receive the
wordicon.
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:
| Resource file | Name |
Title |
|---|---|---|
| checklist.pdf | "pdf-file-1.pdf |
"checklist.pdf" |
| guide.pdf | "pdf-file-2.pdf |
"guide.pdf" |
| other_specs.pdf | "pdf-file-3.pdf |
"Specification #1" |
| photo_specs.pdf | "pdf-file-4.pdf |
"Specification #2" |