[SOLVED] Having trouble understanding page bundles, require clarification!

In that case you can easily expose your images to Hugo’s image processing without reorganizing your content to Page.Bundles.

See resources.Get

The above function requires that you use an /assets/ directory for your images or you can simply turn /static/into the assets directory with assetDir = “static” in your project’s config.

1 Like

/content/psychedelics/psilocybin/do-shrooms-show-up-on-drug-test/index.md (the article title becomes the directory name to go in with an index.md that has the front matter? what happens to the front matter in the actual articles.md file itself?)

If you only want to have one page in each leaf bundle then put everything in article.md into index.md in the leaf bundle. The index.md will get rendered when you navigate to /psychedelics/psilocybin/do-shrooms-show-up-on-drug-test/ (depending on your permalink setting). The rest of the md files in that directory (e.g. article.md, content1.md, content2.md) will be rendered individually if you navigate to their URLs directly.

All the resources go into the same directory in the leaf bundle. So images/pdf/etc are there and then you can access them directly. For example if you have index.md and picture.jpg inside the leaf bundle, you can use imgcap like:

{{< 
    imgcap src="picture.jpg" 
    title="N, N-DMT or DMT is one of the most powerful psychedelic drugs" 
    align="" 
    width="100%" 
>}}

If the pictures are inside a directory in the leaf bundle. For example img/picture.jpg then you can use that in the shortcode src="img/picture.jpg".

PS: Is that my shortcode?

1 Like

That’s interesting and useful. I am having trouble piecing it all together

I just simply want to have

/content/psychedelics/dmt/article_about_dmt.md
/content/psychedelics/dmt/dmt.image.jpg

and to consolidate like that.

Soon I will have someone covering daily news articles, and site is going to grow exponentially, so I want to make sure the /assets/ and/or images folder doesn’t get cluttered up. I want to keep the content with the resources together near each other.

Yes, I only want to have one page in each leaf bundle. Perhaps later I want to have more, but I am first trying to understand how this all pieces together. I’ve been away from hugo for a while and all these new features that complement each other seem rather confusing right now.

Thanks for the explanation. :slight_smile:

I have no idea. I think I came up with that short code myself one day. Maybe it was inspired by you, I can’t remember. :slight_smile:

Was just curious. No harm intended :smiley:

Rename article_aboud_dmt.md to index.md.

So you will have

  • /content/psychedelics/dmt/index.md
  • /content/psychedelics/dmt/dmt.image.jpg

Then inside index.md you can reference dmt.image.jpg in imgcap directly.

{{< 
    imgcap src="dmt.image.jpg" 
    title="N, N-DMT or DMT is one of the most powerful psychedelic drugs" 
    align="" 
    width="100%" 
>}}

In that case the structure will be
/content/psychedelics/dmt/article_about_dmt and the post within is called named _index.md

Slightly longer explanation :

A post’s slug becomes the name of the directory and within that you always have an _index.md with all images and other resources.

What if I wanted to have a series of articles inside that? Like a multi part series of articles for SEO purpoes?

For example:

/content/psychedelics/dmt/
/content/psychedelics/dmt/article_about_dmt/part1_what_is_dmt.md
/content/psychedelics/dmt/article_about_dmt/part2_what_is_dmt.md
/content/psychedelics/dmt/article_about_dmt/part3_what_is_dmt.md
/content/psychedelics/dmt/dmt.image.jpg

Oh, sorry, I screwed that up!

I meant

/content/psychedelics/dmt/article_about_dmt/index.md
/content/psychedelics/dmt/article_about_dmt/part1_dmt_article.md
/content/psychedelics/dmt/article_about_dmt/part2_dmt_article.md
/content/psychedelics/dmt/article_about_dmt/part3_dmt_article.md
/content/psychedelics/dmt/article_about_dmt/img/img1.jpg|img2.jpg etc.

These will go in separate folders. Front matter is what keeps them in a series, like before.

Ohh I see. Since I have never done that, what can I read documentation wise to help me understand how to do a multi part article should I ever need to?

How do you do that in front matter?

You can use Hugo Taxonomies to make a series. See this topic for a relevant discussion:

Also there is Hugo’s Related Content feature that is blazing fast and it could work for a series.

See

A lot of things have changed in Hugo during the past year @Hash_Borgir may I suggest you look at the Docs, they contain many more examples than before and have been rewritten.

1 Like

Here’s a great article from @regis: https://regisphilibert.com/blog/2018/01/hugo-page-resources-and-how-to-use-them/

On his blog https://regisphilibert.com/blog/ he has some great articles about Hugo which also cover related content.

Hope this helps.

2 Likes

Thanks a lot guys, I think I got page bundles figured out. Some images I have to end up keeping in the main static folder, because many articles sometimes reference the same picture, but for the most part the /img/ folder is now pretty clean.

Thank you!

Thanks! I was using a custom module I coded by intersecting and comparing tags, but now this related content built in feature is amazingly useful.

If anyone cares I use bootstrap, and the code for the module is as follows:

<div class="related">
    {{ $related := .Site.RegularPages.Related . | first 16 }}
    {{ with $related }}
    
    <div><h2>See Also Related Articles</h2></div>
    <div class="row">
        {{ range . }}
        <div class="col-md-3 col-sm-6">
            <div class="box-image-text shadow" style="height: 280px;">
                <div class="top">
                    <div class="image" style="overflow:hidden">

                        <a href="{{ .RelPermalink }}">
                        {{ if isset .Params "banner" }}
                        <img src="{{ .Site.BaseURL}}img/placeholder.png" data-src="{{ .Site.BaseURL}}{{ .Params.banner }}" class="img-responsive shadow" alt="{{.Title}}" width="255" height="192" title="{{.Title}}">
                        {{ else }}
                            <img src="{{ .Site.BaseURL}}img/placeholder.png" class="img-responsive" alt="{{.Title}}" width="255" height="192" title="{{.Title}}">
                        {{ end }}
                        <h4>{{ .Title }}<h4>
                        </a>
                    </div>
                </div>
            </div> 
        </div>
        {{ end }}
    </div>
    {{ end }}
</div>

I am using lazy loading of images so that’s why there’s a place holder and data-src.
I am using it in default/single page html template to show 16 related items under every article on my site.

Hopefully someone finds this useful!

I have yet not had the need to create “series” based articles yet, so as soon as I do, I’ll look into the link you provided in depth. I took a cursory glance so far.

I have been reading his blog for a few days now. Thank you! Amazing articles. :slight_smile:

1 Like

Glad you like it. But the credits belong to @regis

2 Likes

If I put the images into my bundle, I can access them via the shortcode as you mentioned, no problem.

However, that doesn’t work for the front matter. It only works inside the article body.

For example, if I put the image text.jpg in the /content/category/some-article/text.jpg and I want to access that image from my front matter, I get 404.

+++
hero = "not sure what to put here to access the images from the page bundle directory"
og_image="same, not sure what to put here as path"
+++

I was hoping to keep the particular Open Graph image, and the site’s Hero module’s image in the bundle as well.

Currently I have to keep the opengraph images in static/img/og/articles/image.jpg and static/img/hero/articles/hero_image.jpg

Please advise me :slight_smile:

@regis Thanks, bud :slight_smile: