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 ResourceTypeimage
. APage
will haveResourceType
with valuepage
. - Name
- Default value is the file name (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. Use this to create inline resources.
{{ with .Resources.GetMatch "script.js" }}
<script>{{ .Content | safeJS }}</script>
{{ end }}
{{ with .Resources.GetMatch "style.css" }}
<style>{{ .Content | safeCSS }}</style>
{{ end }}
{{ with .Resources.GetMatch "img.png" }}
<img src="data:{{ .MediaType.Type }};base64,{{ .Content | base64Encode }}">
{{ end }}
- MediaType.Type
- The media type (formerly known as a MIME type) of the resource (e.g.,
image/jpeg
). - MediaType.MainType
- The main type of the resource’s media type (e.g.,
image
). - MediaType.SubType
- The subtype of the resource’s type (e.g.,
jpeg
). This may or may not correspond to the file suffix. - MediaType.Suffixes
- A slice of possible file suffixes for the resource’s media type (e.g.,
[jpg jpeg jpe jif jfif]
).
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" |