[SOLVED] Page Bundle Question - Content Structure for Image Processing

support
1

I would like to start using image post processing but my current structure is this (fig v1). So I need to move the images I want processed from static into the content folder.

v1
v1.JPG303Ă—869 26.9 KB

I like this idea (fig v2), because it keeps all my media in one place. This seems to make sense to me - because I may want to reuse images in different articles/guides/reviews, and from what I have read I think this will work better than nested bundles with netlify cms - although they may have addressed the issue. (https://github.com/netlify/netlify-cms/issues/513).

However I don’t want url/media/name.jpg to be rendered in the browser. I added “headless: true” to the index.md in the media folder - so now url/media/ gets the 404 page but url/media/name.jpg still renders.

Furthermore it doesn’t seem that this is the intended proper way to work with image processing through page bundles. I am following (Image Processing Outside Folder thread) and @bep mentions some downsides of hacky workarounds. He also mentioned twice “Having images and content bundled together has lots of benefits”

v2
v2.JPG303Ă—874 32.1 KB

So I think the proper structure to use is this (fig v3), where I have branch bundles (_index.md), and leaf bundles (index.md)

v3
v3.JPG309Ă—973 35.6 KB

Questions

Is this (fig v3) the proper structure to use for page bundles and image processing?
Will I still be able to reuse images in later articles/guides/reviews without forcing the user to download multiple copies?
What are the benefits of the page bundle approach, why is it superior?

2

That is a very old thread you linked to and it is outdated.

See the resources.Get method it’s faster than Page Bundles and you can keep your existing content organization. All you need is to create a symlink of the static folder into the assets folder or turn the static folder into the assets folder with the assetDir configuration option.

P.S. I’m on my mobile and about to go to a gallery opening. There are topics in the forum about the tips I gave you, look it up.

1 Like
3

OK thanks. No rush on response - those one drawings a day must really be paying off!

So is page bundling just generally not the cool thing anymore, or specifically Hugo Pipes with resources.Get will allow me to use image processing for my current structure?

I am asking because I would rather change my understanding of proper content structure now than hacking together solutions for each new project.

4

Page Bundles have their use and they are perfectly cool. But resources.Get will indeed allow you to use image processing without altering your content organization and that is a time-saver.

I think that content structure depends on the project and also it’s a matter of preference. For example I have a project with 8 headless bundles directly under /content/ that have their contents loaded dynamically with Photoswipe from the index page.

5

I am sure this is really simple, but I am having some difficulties here.

config.toml

baseurl = "/"
assetDir = "static/img"

article.md (front matter)

resources:
   - name: test
    src: img-name.jpg

.html template

{{ .Resources.GetMatch "test" }}

result

\<nil>
6

You determined statig/img as your asset directory. So all relevant elements should be in there. The default is assets as root folder. You can define only one assetDir. You can symlink your static folder to assets.

See this post from @regis: Hugo Page Resources | Regis Philibert

Hope this helps.

7

Why don’t you create one headless bundle called media and put it at the root of your content/ dir. You can store all your “content” images there.

Then everytime you need an image, you just use {{ (.Get "media").Resources.GetMatch "whatever" }} or something much safer…

This the way I do it when I need my projects to have one common directory for images useable throughout any pages.

8

Solved

content folder structure

image

_index.md*
note: resources must be registered in the .md for their bundle, not the .md of the content intended for use. So this likely has to be manually updated with each new image thrown into the media folder.

---
title: Media Library
headless: true
resources:
  - name: demo
 title: "Demo 1"
 src: "demo.jpg"
...
---

article.md frontmatter

---
...
imagename: demo
---

template code 1 - displays all images correctly resized

 {{ with .Site.GetPage "section" "media" }}
  {{ $resources := .Resources.ByType "image"}}
  {{ range $resources }}
  {{ with . }}
  {{ $image200x := (.Resize "200x") }}
  {{ $image400x := (.Resize "400x") }}
  <img src="{{ $image200x.RelPermalink }}">
  <img src="{{ $image400x.RelPermalink }}">
  <br />
  {{ end }}
  {{ end }}
  {{ end }}

template code 2 - displays a specific image correctly resized

  {{ $page := . }}
  {{ with .Site.GetPage "section" "media" }}
  {{ with .Resources.GetMatch $page.Params.imagename }}
  {{ $image200x := (.Resize "200x") }}
  {{ $image400x := (.Resize "400x") }}
  <img src="{{ $image200x.RelPermalink }}">
  <img src="{{ $image400x.RelPermalink }}">
  <br />
  {{ end }}
  {{ end }}

Ref: https://github.com/talves/hugo-resource-images

2 Likes