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

support
#1

Hello Hugo People! :slight_smile:

I just got back on and need to develop https://www.psychedelicsdaily.com further, and I discovered that you’ve put in a lot of new features, which is awesome. I like the idea of page bundles but I am having a bit of difficulty understanding the structure.

Currently I have:

structure
dir.structure.jpeg395×738 32 KB

If I wanted to consolidate my articles into page leaf bundles, here’s my understanding so far, is it correct? Please advise.

/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? Does the index.md file now contain the article frontmatter and text content?)

/content/psychedelics/psilocybin/do-shrooms-show-up-on-drug-test/associated resorces and images here.jpg

Is this how I would convert to page leaf bundles? My goal is to consolidate resources, as currently my /static/img/ folder is overflowing with images.

Also, if this is correctly understood by me, how would I reference the images within the articles?

Usually, I just easily access the images by doing a shortcode like this:

<div class="caption-wrapper">
    <div style="float: {{.Get "align"}}">
        <img class="caption {{ .Get "align" }}-img" src="{{ .Site.BaseURL}}img/placeholder.png" data-src="{{ .Get "src" }}" title="{{ .Get "title" }}" alt="{{ .Get "title" }}" style="width: {{ .Get "width" }};"  width="300"></img>
        <p class="caption-text">{{ .Get "title" }}</p>
    </div>
</div>

and then in my article.md I do like this:

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

So how would I reference the images/pdfs/resources that I put in the leaf bundle directory structure?

Thank you! :smiley:

#2

I could use a clear example of leaf bundles and resources. I’ve read the documentation but my English comprehension is not as strong. Thanks

#3

Have you read all of the below?

After reading those, you can find examples here:

#4

I found the Resources documentation examples to be confusing. Especially because I use a shortcode to access images in my articles. That bit is still confusing.

I’ll check out the stuff again and read over the documentation again. I’m sure it is something I’m not understanding or looking over possibly.

Thank you for the prompt reply! :slight_smile:

#5

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
#6

/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
#7

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.

#8

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:

#9

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:

#10

Was just curious. No harm intended :smiley:

#11

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%" 
>}}
#12

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.

#13

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

#14

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.

#15

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

#16

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?

#17

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
#18

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
#19

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!

#20

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.