How to access an image in a branch bundle?

support
1

Someone introduced me to the concept of front matter cascade and I have a use case for it inside a branch bundle. I have set a cascade of `image = “cover.jpg” and I would like to access the image as a permalink with width and height properties. How can I achieve this? (I am trying to avoid putting the image in assets folder).

2

Your post is unclear. Show some code and a directory structure. Or better yet…

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3 
C:.
├───en
│   │   _index.md
│   │
│   ├───blog
│   │   │   _index.md
│   │   │
│   │   ├───news
│   │   │   │   _index.md
│   │   │   │
│   │   │   └───year
│   │   │           2013.md
│   │   │           2014.md
│   │   │           2015.md
│   │   │           2016.md
│   │   │           2017.md
│   │   │           2018.md
│   │   │           2019.md
│   │   │           cover.jpg
│   │   │           _index.md

That’s the structure. I want to access that cover.jpg image inside the year folder in my head.html file (for custom open graph and JSON-LD schema) which cascades only for the year branch bundle. e.g.

{{ with .Params.year }}
<!--- assign/access the cover image (with $img) -->
<meta property="og:image" content="{{ $img.Permalink }}">
<meta property="og:image:width" content="{{ $img.Width }}">
<meta property="og:image:height" content="{{ $img.Height }}">

Is that possible?

4

What is .Params.year?
Please show front matter for content/en/news/year/_index.md.
Please show front matter for content/en/news/year/2019.md.

5

I’m not sure why you would need any .Params values, or to cascade them. Given the directory structure you show above…

layouts/partials/head.html

{{ if and .IsPage (eq .CurrentSection (site.GetPage "/news/year/")) }}
  {{ with .Parent.Resources.Get "cover.jpg" }}
    <meta property="og:image" content="{{ .Permalink }}">
    <meta property="og:image:width" content="{{ .Width }}">
    <meta property="og:image:height" content="{{ .Height }}">
  {{ end }}
{{ end }}
6

I have different but similar structures in different sections of my content folder (content/blog/news/year/_index.md, content/facts/groups/year/_index.md, etc). The year is a front matter entry e.g. in the _index.md file of the year folder (hence .Params.year). This ties together all these sections. I don’t want to hard code the URL since I will have tens (if not hundreds) of similar branch bundles.

---
title = "News"
url = "news"
[[cascade]]
  image = "cover.jpg"
---

---
title: List of all news for 2019
year: 2019
url: /news/2019/
---
7

Then why isn’t it shown in the first example you just posted?

8

Never mind. I took a second look at the image processing docs and this resolves the issue.

{{- with .Resources.Get "cover.jpg" }}
  <meta property="og:image" content="{{ .Permalink }}">
  <meta property="og:image:width" content="{{ .Width }}">
  <meta property="og:image:height" content="{{ .Height }}">
{{- end -}}

I thought resorces.Get is limited to the assets folder. But turns out it also works for brunch bundles. resources.GetMatch also works. I appreciate your help @jmooring .

9

The resources.Get function is limited to the assets directory, or any directory mounted to assets.

The .Resources.Get method is limited to page resources.

10

I now see the difference! .Resources.Get vs resources.Get.

11

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.