Accessing media in content folder

support
1

Hi! I’m looking to take advantage of Hugo’s image processing features.

Since media in /static is not supported by it, i’ve created a folder called /uploads under /content. In the root of /content/uploads, I’ve added an index.md and made it a headless bundle with:

---
headless: true
---

I’ve then added multiple images under /content/uploads. However, I’m not able to access the images. In development mode, if I try to access localhost/uploads/image1.jpeg, it returns a 404.

What could be the issue? Not really sure what I’m missing.

Thank you in advance!

2

Hi,

By its definition,

A headless bundle is a bundle that is configured to not get published anywhere:

so /uploads will not be published.

You can access the headless bundle using .GetPage, and then use the Resource matching methods to find your image(s) .Permalink values.

1 Like
3

Thank you @pointyfar !

As a quick test, I’ve followed the steps you’ve mentioned in the homepage layout:

{{ $imagesPage := .Site.GetPage "/uploads" }}
{{ $images := $imagesPage.Resources.Match "**.jpg" }}
{{ range $images }}
    <img src="{{ .RelPermalink }}" />
{{ end }}

I’ve accessed the headless bundle, looked for filenames with .jpg and got the RelPermalink for each of them (or I thought I did lol). Didn’t manage to get anything to appear in the HTML though.

I’ve tried different glob patterns, to no avail. I’ve also printed out the value of imagesPage and it isn’t returning anything, so I believe the problem resides there?

Not sure if it helps, but:

Hugo Static Site Generator v0.57.2/extended linux/amd64 BuildDate: unknown
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.12.8"

Thanks once again

4

@pointyfar has given you good direction.

Share your code, or create a minimal reproducible example, and we can help you debug this further.

5

I started fresh from the quickstart example and simply added the /uploads folder to /content, as well as the same images and index.md. Then in index.html layout I simply pasted the code that I’ve written above and they rendered as expected.

Then, back to the original project: I’ve found out that if I remove my “translation by content directory” configs the images are rendered properly. My /content folder structure is:

content
|-- en
|    |-- blog 
|    |    |-- _index.md
|    |    |-- article1.md
|    |    |-- article2.md
|-- pt
|    |-- artigos 
|    |    |-- _index.md
|    |    |-- artigo1.md
|    |    |-- artigo22.md
|-- uploads
|    |-- image1.jpg
|    |-- image2.jpg

My full config.toml is the following:

DefaultContentLanguage = "pt"
title = "my website"

[languages]
  [languages.pt]
    contentDir = "content/pt"
    languageName = "Portugues"
    weight = 1
      [[languages.pt.menu.main]]
        identifier = "home"
        url = "/"
        name = "Inicio"
        weight = 1
      [[languages.pt.menu.main]]
        url = "/artigos/"
        name = "Artigos"
        weight = 2
  [languages.en]
    contentDir = "content/en"
    languageName = "English"
    weight = 2
      [[languages.en.menu.main]]
        identifier = "home"
        url = "/en/"
        name = "Home"
        weight = 1
      [[languages.en.menu.main]]
        url = "/en/blog/"
        name = "Blog"
        weight = 2

I’m trying to figure out how the 2 would be related in this case, but haven’t figured it out yet…

6

There’s your explanation. /uploads is not under any language contentDir.

You could add an /uploads/ bundle under each language, and only have the resources in one of them. The other languages should then inherit the resources: Multilingual mode | Hugo

Or try put them under /assets/uploads/ and resources.Get instead: Hugo Pipes | Hugo

3 Likes
7

I suggest you put your upload folder below /assets somewhere and use resources.Get, resources.Match etc. to load your images.

2 Likes
8

Thank you very much for the help! I went with the page bundles solution and it’s working nicely.

1 Like