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/jpeg
has the ResourceTypeimage
. APage
will haveResourceType
with 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
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 MainTypeapplication
. - MediaType.SubType
- The subtype of the resource’s MIME type. For example, a file of MIME type
application/pdf
has 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
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 newName
and can now be found with.GetMatch "header"
.documents/photo_specs.pdf
will get thephoto
icon.documents/checklist.pdf
,documents/guide.pdf
anddocuments/payment.docx
will getTitle
as set bytitle
.- Every
PDF
in the bundle exceptdocuments/photo_specs.pdf
will get thepdf
icon. - All
PDF
files will get a newName
. Thename
parameter contains a special placeholder:counter
, so theName
will bepdf-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:
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" |