Organzing static content

support
1

Hello

I have some problems understanding, how static content should be organized.
I’d prefer to have the content (images + markdown files) together.

I found this post. Structure B describes exactly what I want, but this seems to be obsoleted and page bundles are the “new way to go”.

To be honest: I don’t fully understand the documentation

This leads me to my question: how to archive this? Here is what i have:

Folder Layout:

content/blog/2017/postFolder
├── img1.jpg
├── img2.jpg
├── index.md

Permalink config:

[permalinks]
  blog = "/blog/:year/:month/:title/"

result:

Request URL: http://localhost:1313/blog/2017/06/some-title/img1.jpg
Request Method: GET
Status Code: 404 Not Found
Remote Address: 127.0.0.1:1313
Referrer Policy: no-referrer-when-downgrade

Any idea?

Greetings

2

It is little hard to understand without seeing the project. What is in the /blog folder?

3

Hello @bep

a snipplet of the content folder can be seen in the start post. here is the complete “real live” tree:

content
└── blog
    ├── 2016
    │   └── urlaub-in-fiss-in-tirol-der-anreisetag
    │       ├── fiss_hotelzimmer.jpg
    │       └── index.md
    ├── 2017
    │   ├── urlaub-auf-zakyntos-tag1
    │   │   ├── essen.jpg
    │   │   ├── flugzeug.jpg
    │   │   ├── index.md
    │   │   └── zimmer.jpg
    │   ├── urlaub-auf-zakyntos-tag2
    │   │   ├── andreas.jpg
    │   │   ├── beach_restaurant.jpg
    │   │   ├── beach_view.jpg
    │   │   ├── demetrius.jpg
    │   │   ├── fruehstueck.jpg
    │   │   ├── gpx.png
    │   │   ├── index.md
    │   │   ├── nikolaus.jpg
    │   │   ├── oiljoke.jpg
    │   │   ├── oil.jpg
    │   │   ├── virgin_mary.jpg
    │   │   ├── weinprobe.jpg
    │   │   ├── winery.jpg
    │   │   └── yannis.jpg
    │   └── urlaub-auf-zakyntos-tag3
    │       ├── bergsteigen.jpg
    │       ├── biggest_flag.jpg
    │       ├── bluewater.jpg
    │       ├── chrissy.jpg
    │       ├── eiswasser.jpg
    │       ├── geisterdorf.jpg
    │       ├── glassbottomboat.jpg
    │       ├── index.md
    │       ├── new_friends.jpg
    │       ├── seaview.jpg
    │       ├── shipwreck.jpg
    │       ├── sonne1.jpg
    │       ├── sonne2.jpg
    │       ├── sonne3.jpg
    │       ├── taverna_aeras.jpg
    │       └── weontheboat.jpg
    └── 2018

8 directories, 36 files

Maybe relevant: The images are included via:

![essen](essen.jpg)

4

No, it definitely works (just wrote a new blog post yesterday that follows that structure to embed an image and gif).

What does the generated HTML look like?

The raw Markdown image syntax could possibly be a problem, but the HTML snippet for the image should confirm that. I use a figure shortcode instead, that always puts in the image permalink instead of a relative path.

Finally, it’s best if you can share the site source; that would be the fastest way for someone to help you debug this.

Bottom line: That kind of content + image organization works even if not retrieving those images using the Page Bundles + Image Processing methods.

5

of course, here u are:

A sample snipplet of one of the images:

<p>SOME TEXT</p>

<p><img src="glassbottomboat.jpg" alt="Unser Ausflugsboot" /></p>

<p>SOME TEXT</p>

URLs I tested:
http://localhost:1313/blog/2017/06/urlaub-auf-zakyntos---der-3.-tag/ (single page)
http://localhost:1313/ (list of last entries)

EDIT:
I just tried the figure shortcut:

{{< figure src=“glassbottomboat.jpg” title=“Unser Ausflugsboot” >}}

which results in:

<figure>
        <img src="glassbottomboat.jpg" />
    <figcaption>
        <h4>Unser Ausflugsboot</h4>
    </figcaption>
</figure>
6

I created a sample repo to reflect my problem:
https://github.com/dakky/sample-support-hugo-discourse

EDIT:
ok I don’t know what was the problem, but it’s partly solved:
On the single page view (http://localhost:1313/blog/2017/06/testtitle/) works fine. maybe some kinde of browser/whatever cache problem?
But the problem, that there are no images on the frontpage persists. any idea?

7

yes!

This issue has come up so often that now I am collecting the references in this hugo issue thread.

When earlier I said:

I made sure that was grammatically correct, I’m using a figure shortcode, not the default one :slight_smile:

Try using the custom figure shortcode I reference in that issue thread I linked above… it uses a permalink for src in the <figure>, that solves the problem of the image not showing on list pages.

1 Like
8

yehaa! that works fine. Are there any plans to push that implementation back to the offical hugo code?

9

That particular issue hasn’t been assigned a milestone. So I don’t think there is any plan to bake that fix in.