I’m currently in the process of improving the performances of my website. It has a blog, with all the articles stored inside a blog directory, as markdown files, in two languages.
Posts’ images are stored in the static directory, and I make the connection between posts and their images thanks to variables in the front-matter.
Now I see that I can’t use Image Processing for files that are stored in the static folder. So does that mean I need to change my whole site structure ?
It looks to be a good solution but for some reason I can’t access the bundle when I try to add resources from a content that’s in another language.
My posts are all stored in the content/blog directory, in the form of post1.md / post1.fr.md. English is the default language and it has no problem accessing the headless bundle, but I can’t seem to access it from french pages.
I have a feeling I should put each post into its separate directory. It might be a bit more strict but I’m wondering if it’s not the best thing to do.
Do the resources have to be in a folder named resources?
Before I saw your comment, I tried something “simpler”. I removed all my blog posts but one, and tried another structure. That is put it in its own sub-folder. So now I have this :
I kinda like this because I can refer the post’s image straight in my markdown thanks to the ![]() markdown shortcut. The problem is I don’t know how to access cover.jpg which would be used in my list.html and single.html layouts.
But I get this error: execute of template failed: template: blog/list.html:20:53: executing "blog/list.html" at <$cover.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink
I don’t think I understand how I could use .GetPage in that context.
Do you have your repo somewhere I can clone? It’s easier to help if we are talking about the same site context.
Otherwise, I would guess based on the error that you have a page somewhere without a cover.jpg, so .GetMatch returns nil, which gives an error when you try to get .RelPermalink. If that is the cause, enclose it in a with or test whether the resource exists before trying to access it.
I still don’t understand how I can access each post’s cover in the list.html template. I’m gonna have to access them since I loop into each post to retrieve the post’s title, excerpt, etc…
The thing I’m looking for in the end is a way to use Image Processing so that I can manipulate those covers depending if we’re in the post list or in the post itself.
I think I’m doing what I’ve been trying! I can fetch the cover.jpg resource in both english and french, and resize the images. It looks like it’s working!
So, I don’t know if you still need the explanation:
{{ range $index, $element := .Pages }} <-- this bit goes through all the child pages in the list
{{ $element }} <-- one child page, ie .Pages[$index]
<br>
{{ $cover := $element.Resources.GetMatch "cover.jpg" }} <-- grabs the resource matching "cover.jpg"
{{ with $cover }} <-- checks if $cover exists
{{ .RelPermalink }} <-- only gets run if 'with' statement is true
{{ end }}
{{ end }}
So you would modify that to do:
{{ $coverUrl := "" }}
{{ with $cover }}
{{ $coverResized := $cover.Resize "926x q90" }}
{{ $coverUrl = $coverResized.RelPermalink }}
{{ end }}
... do stuff with {{ $coverUrl }} here ...
A minor point:
You don’t really need to .Scratch here (unless you really want to…)
Thank you so much @pointyfar, you have no idea how much you’ve helped me not only resolve my problem, but also understand better how Hugo works.
I still had to use .Scratch, for some odd reason it would not let me directly use the variable.
Anyways I just deployed a new version of my site with a completely revamped architecture, and now I’m using extensively the pages resources and image processing features.
Thanks again for taking the time to answer my questions. I’d buy you a coffee if I could.
