HUGO

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
Star

What's on this Page

    • Properties
    • Methods
      • Pattern Matching
    • Page Resources Metadata
      • Resources metadata example
      • The :counter placeholder in name and title
CONTENT MANAGEMENT

Page Resources

Page Resources – images, other pages, documents etc. – have page-relative URLs and their own metadata.

Properties

ResourceType
The main type of the resource. For example, a file of MIME type image/jpg has the ResourceType image.
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/jpg.
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

Page Resources’ metadata is managed from their page’s front matter with an array/table parameter named resources. You can batch assign values using a wildcards.

Resources of type page get Title etc. from their own front matter.

name
Sets the value returned in Name.

The methods Match and GetMatch use Name to match the resources.

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 order matters — Only the first set values of the title, name and params-keys will be used. Consecutive parameters will be set only for the ones not already set. For example, in the above example, .Params.icon is already first set to "photo" in src = "documents/photo_specs.pdf". So that would not get overridden to "pdf" by the later set src = "**.pdf" rule.

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 fileNameTitle
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"

See Also

  • Image Processing
  • Content Organization
  • Page Bundles
  • Related Content
  • Comments
  • About Hugo
    • Overview
    • Hugo and GDPR
    • Hugo 0.32 HOWTO
    • What is Hugo
    • Hugo Features
    • The Benefits of Static
    • License
  • Getting Started
    • Get Started Overview
    • Quick Start
    • Install Hugo
    • Basic Usage
    • Directory Structure
    • Configuration
  • Hugo Modules
    • Hugo Modules Overview
    • Configure Modules
    • Use Hugo Modules
    • Theme Components
  • Content Management
    • Content Management Overview
    • Organization
    • Page Bundles
    • Supported Content Formats
    • Front Matter
    • Page Resources
    • Image Processing
    • Shortcodes
    • Related Content
    • Sections
    • Types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and Cross References
    • URL Management
    • Menus
    • Static Files
    • Table of Contents
    • Comments
    • Multilingual and i18n
    • Syntax Highlighting
  • Templates
    • Templates Overview
    • Introduction
    • Template Lookup Order
    • Custom Output Formats
    • Base Templates and Blocks
    • List Page Templates
    • Homepage Template
    • Section Templates
    • Taxonomy Templates
    • Single Page Templates
    • Content View Templates
    • Data Templates
    • Partial Templates
    • Shortcode Templates
    • Local File Templates
    • 404 Page
    • Menu Templates
    • Pagination
    • RSS Templates
    • Sitemap Template
    • Robots.txt
    • Internal Templates
    • Alternative Templating
    • Template Debugging
  • Functions
    • Functions Quick Reference
    • .AddDate
    • .Format
    • .Get
    • .GetPage
    • .HasMenuCurrent
    • .IsMenuCurrent
    • .Param
    • .Render
    • .Scratch
    • .Unix
    • Math
    • absLangURL
    • absURL
    • after
    • anchorize
    • append
    • apply
    • base64
    • chomp
    • complement
    • cond
    • countrunes
    • countwords
    • dateFormat
    • default
    • delimit
    • dict
    • echoParam
    • emojify
    • eq
    • errorf
    • fileExists
    • findRE
    • first
    • float
    • ge
    • getenv
    • group
    • gt
    • hasPrefix
    • highlight
    • htmlEscape
    • htmlUnescape
    • humanize
    • i18n
    • imageConfig
    • in
    • index
    • int
    • intersect
    • isset
    • jsonify
    • lang.Merge
    • lang.NumFmt
    • last
    • le
    • lower
    • lt
    • markdownify
    • md5
    • ne
    • now
    • os.Stat
    • partialCached
    • path.Base
    • path.Dir
    • path.Ext
    • path.Join
    • path.Split
    • plainify
    • pluralize
    • print
    • printf
    • println
    • querify
    • range
    • readDir
    • readFile
    • ref
    • reflect.IsMap
    • reflect.IsSlice
    • relLangURL
    • relURL
    • relref
    • replace
    • replaceRE
    • safeCSS
    • safeHTML
    • safeHTMLAttr
    • safeJS
    • safeURL
    • seq
    • sha
    • shuffle
    • singularize
    • slice
    • slicestr
    • sort
    • split
    • string
    • strings.Repeat
    • strings.RuneCount
    • strings.TrimLeft
    • strings.TrimPrefix
    • strings.TrimRight
    • strings.TrimSuffix
    • substr
    • symdiff
    • templates.Exists
    • time
    • title
    • transform.Unmarshal
    • trim
    • truncate
    • union
    • uniq
    • upper
    • urlize
    • urls.Parse
    • where
    • with
  • Variables
    • Variables Overview
    • Site Variables
    • Page Variables
    • Shortcode Variables
    • Taxonomy Variables
    • File Variables
    • Menu Entry Properties
    • Hugo Variables
    • Git Variables
    • Sitemap Variables
  • Hugo Pipes
    • Hugo Pipes Overview
    • Hugo Pipes Introduction
    • SASS / SCSS
    • PostCSS
    • Asset minification
    • Asset bundling
    • Fingerprinting and SRI
    • Resource from Template
    • Resource from String
  • CLI
  • Troubleshooting
    • Troubleshoot
    • FAQ
    • Build Performance
  • Tools
    • Developer Tools Overview
    • Migrations
    • Starter Kits
    • Frontends
    • Editor Plug-ins
    • Search
    • Other Projects
  • Hosting & Deployment
    • Hosting & Deployment Overview
    • Host-Agnostic Deploys with Nanobox
    • Host on AWS Amplify
    • Host on Netlify
    • Host on Render
    • Hugo Deploy
    • Host on Firebase
    • Host on GitHub
    • Host on GitLab
    • Hosting on KeyCDN
    • Host on Bitbucket
    • Deployment with Wercker
    • Deployment with Rsync
  • Contribute
    • Contribute to Hugo
    • Development
    • Documentation
    • Themes
  • Maintenance
“Page Resources” was last updated: July 28, 2019: Release 0.56.1 (ee7ee62)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays
 
 

Hugo Sponsors

Logo for Forestry.io
Logo for Linode
Logo for eSolia
 

The Hugo logos are copyright © Steve Francia 2013–2019.

The Hugo Gopher is based on an original work by Renée French.

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
  • About Hugo
  • Getting Started
  • Hugo Modules
  • Content Management
  • Templates
  • Functions
  • Variables
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Tools
  • Hosting & Deployment
  • Contribute
  • Maintenance