# Need help understanding content organization for product pages

**URL:** <https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834>\
**Category:** support\
**Created:** [January 4, 2018, 1:52am UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834 "2018-01-04T01:52:29Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 4, 2018, 1:52am UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/1 "2018-01-04T01:52:29Z")

</div>

I’m putting together a small e-commerce site and giving Hugo a try. I’ve got an index page built and a couple other static pages (About, contact us) also working. Now I’m getting into more content and data and not understanding how to build links in the template or set up the data or content files.

I have an index page - a section of that page has a image/link for each product, this is pulled from data files. Sample code:

```
                {{ range sort .Site.Data.products "weight" }}
                <div class="single__prod {{ delimit .categories ", " }}">
                    <div class="product">
                        <div class="prod__inner">
                            <div class="prod__thumb">
                                <a href="#">
                                    <img src="{{ .Site.BaseURL }}{{ .image }}" alt="{{ .title | plainify }} product images">
                                </a>
                            </div>
                        </div>
                        <div class="product__details">
                            <h2><a href="#">{{ .title | safeHTML }}</a></h2>
                            <span class="prod_price">{{ .price }}</span>
                        </div>
                    </div>
                </div>
                {{ end }}

```

\*Data files that are placed in site root/data/products. 11 files, one for each product.

My product file looks like this (TOML):

```auto
    weight = 1
    title = "Product Name"
    price = "$9.95"
    image = "images/product/1.jpg"
    categories = ["cat--1"]

```

The index page displays the product image and details from the data file just fine. My next step is to add in the proper link in the two “a href=”#"" portions. I’ve got a product details html file. I’m not sure where to place that or how to build the links to the details page.

I suspect I need to put something in the product-details.html in site root/layouts/products. And I’d probably put a URL element in my product TOML file too. But how does this work so that the product-details.html is built with the data in the product TOML?

---

<div class="post-metadata">

**Author:** ![RickCogley](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rickcogley/32/10269_2.png) [@RickCogley](https://discourse.gohugo.io/u/RickCogley)\
**Post date:** [January 4, 2018, 2:49am UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/2 "2018-01-04T02:49:35Z")

</div>

Well, you could add a section for the product details under `content` and use new version 0.32’s bundling feature.

> **[Hugo 0.32 HOWTO](https://gohugo.io/about/new-in-032/)**
>
> About page bundles, image processing and more.

That way you could make a folder for each product, and include details files under there, either in each folder’s `index.md` or, in a referenced file, and, any images of the product. I am not sure if the referenced file can be anything, or, if your html files would suffice.

As for the links, have you tried adding a line or lines in each data file for those `href` s? Once you get the product details files set, you’ll know what their URLs are, and then you could add those to your data files.

---

<div class="post-metadata">

**Author:** ![RickCogley](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rickcogley/32/10269_2.png) [@RickCogley](https://discourse.gohugo.io/u/RickCogley)\
**Post date:** [January 4, 2018, 2:52am UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/3 "2018-01-04T02:52:23Z")

</div>

Btw, I saw your first code block worked and your second didn’t. The first was indented enough but the second wasn’t so I added “fencing” around the second. Edit to see it. It’s just five tildes before and after. I like it better since indenting in here is a bit of a pain.

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 4, 2018, 4:22pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/4 "2018-01-04T16:22:35Z")

</div>

Hi RickCogley -

Thank you for the tip on tildes, I’ll use that.

I’ve just now read through bundles segment you pointed me to, and I rather like this organization so I think I might try that. In reading that, it has lead me down another path of reading.

I think there is still some short comings in my understanding, let me try something with the bundles and see what I get. I’ll post back with results.

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 4, 2018, 7:04pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/5 "2018-01-04T19:04:10Z")

</div>

OK - I’m about 80% converted to the page bundle system, a few more things to do and then I can get back to trying to build product pages.

So I have something like:

```auto
content/
├── products/
│ ├── prod1/
│ ├── prod2/
│ ├── prod3/
│ └── etc
...

```

When I run something like

```auto
{{ range where .Site.Pages.ByWeight "Section" "products" }}

```

I get the following kind of links:

```auto
/products/
/products/prod1/
/products/prod2/
/products/prod3/
etc.

```

I’d like to not get an output for /products/, just the /products/prod1/. Is there a way to suppress or eliminate an output from the /products/? I’m using this range capability to list the actual products.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 4, 2018, 8:00pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/6 "2018-01-04T20:00:19Z")

</div>

Should be `.Site.Regular.Pages` or `.Site.Data.Pages`

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 4, 2018, 9:18pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/7 "2018-01-04T21:18:39Z")

</div>

Great, this works!

I used .Data.Pages.

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 5, 2018, 2:43am UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/8 "2018-01-05T02:43:32Z")

</div>

OK, next step, using the .Resize shown in the Hugo 0.32 HOWTO article that RickCogley linked me to.  
I’m having trouble implementing Resize.

My Content folder

```auto
content/
├── products/
│ ├── prod1/
│ ├ index.md
                 ├ images/
                     ├ prod1.jpg

```

I’ve tried:

```auto
{ $imgVar := (print .Permalink .Params.image_prod1) }}
{{ $imgVar.Resize "120x140" }} error because of string

{ $imgVar := (print .Permalink .Params.image_prod1) }}
{{ $img := .Resources.GetByPrefix $imgVar }}
{{ $img.Resize "120x140" }} error Resource.resource?

```

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 5, 2018, 10:53am UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/9 "2018-01-05T10:53:39Z")

</div>

`GetbyPrefix` is exactly what it sounds like. You are using it in conjuction with a permalink that you are getting with `print`. So it’s natural that you’re getting an error.

Check out @bep [test repo for 0.32](https://github.com/bep/hugotest/) to get a better understanding of the new features.

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 5, 2018, 2:32pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/10 "2018-01-05T14:32:50Z")

</div>

Thank you @alexandros

Doing more reading, digging and checking out that repo, I came up with this to be working:

```auto
{{ $img := (.Resources.GetByPrefix .Params.image_prod1 ) }}
{{ with $img }}
{{ $resized := $img.Resize "120x140" }}
<img src="{{ $resized.Permalink }}" alt="small-image">
{{ end }}

```

And in my [index.md](http://index.md) file I have something like:

```auto
image_prod1: "prod1.jpg"

```

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 5, 2018, 3:41pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/11 "2018-01-05T15:41:57Z")

</div>

> [@Awestruck](#):
>
> `image_prod1: "prod1.jpg"`

Oh that’s interesting.

`.GetByPrefix` is meant to get a file prefix and in your case that should have been prod1 without the .jpg extension

But since you got this working, good for you.

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 6, 2018, 7:21pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/12 "2018-01-06T19:21:15Z")

</div>

I’ve been through the 0.32 doc and repo a couple times and have spent 30 minutes trying several things. Of course I’m finding new things in the documentation, However i’m still missing something or not seeing and understanding what I need to for my task at hand.

Right now I’m trying to access the other .md files in the bundle. (I’m really glad I was pointed to the bundle of 0.32, it is the organization I need)

I have this:

```auto
content/
├── products/
│ ├── prod1/
                 ├ index.md
                 ├ desc_short.md
                 ├ desc_long.md
                 ├ images/
                     ├ prod1.jpg

```

The Params in [index.md](http://index.md) I can access and use. The Content [index.md](http://index.md) I can use as well.  
However I can’t figure out how to get the Content of desc\_short.md.

if I do this:

```auto
{{ with .Resources.ByType "page"}}
{{ . }}
{{ end }}

```

I can see this in the HTML file:

```auto
[Page(&#34;desc_long&#34;) Page(&#34;desc_short&#34;)]

```

Thank you for any help you can provide.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 6, 2018, 7:51pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/13 "2018-01-06T19:51:00Z")

</div>

You are not doing it right. See the example at the Docs: [https://gohugo.io/about/new-in-032/#include-page-resource-content](https://gohugo.io/about/new-in-032/#include-page-resource-content)

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 6, 2018, 7:57pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/14 "2018-01-06T19:57:52Z")

</div>

I have been able to get that example to run. I think there is some oddity in that output in that I’m seeing multiple content, however I haven’t dove into that.

This example though still doesn’t show me what I need. I don’t want to loop or range over the .mds. I want to get the Content of a specific .md at point A in my template and content of a different .md at a point B in my template. My thought was that I’d be able to reference the .md. So I’ve been trying to limit ByPrefix or GetPage but I’m not having success.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 6, 2018, 8:05pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/15 "2018-01-06T20:05:39Z")

</div>

You need to have `{{ .Content }}` to render the file’s content.

I haven’t had the need to do what you’re trying to do just yet. And I can’t test it right now.

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 6, 2018, 8:10pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/16 "2018-01-06T20:10:41Z")

</div>

I understand the .Content requirement.  
I also figured out the one oddity I mentioned when i run the example (I have more than two md files).

In my file tree shown above, how would I reference just desc\_short.md? Instead of

```auto
{{ with .Resources.ByType "page" }}
{{ range . }}

```

Which gives me both desc\_short and desc\_long.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 6, 2018, 8:16pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/17 "2018-01-06T20:16:01Z")

</div>

Have you tried

> ```
> {{ $desc_short := .Resources.GetByPrefix "desc_short" }}
> {{ with $desc_short }}
> {{ .Content }}
> {{ end }}
> 
> ```

This is untested.

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 6, 2018, 8:19pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/18 "2018-01-06T20:19:56Z")

</div>

Yes, this is one thing I’ve tried and I get no output in the HTML. No errors either from Hugo server.

(Editing the post to be more complete)

I even did this, thinking first I need to limit it to the resources in this bundle.

```auto
{{ with .Resources.ByType "page" }}
{{ $desc_short := .Resources.GetByPrefix "desc_short" }}
{{ with $desc_short }}
{{ .Content }}
{{ end }}
{{ end }}

```

But that didn’t work either. I get a Hugo error in the CL

```auto
<.Resources.GetByPref...>: can't evaluate field Resources in type []resource.Resource

```

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 6, 2018, 8:27pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/19 "2018-01-06T20:27:26Z")

</div>

I’ve also tried this:

```auto
{{ with .Resources.ByType "page" }}
{{ .GetByPrefix "desc_short" }}
{{ .Content }}
{{ end }}

```

I get a similar error:

```auto
executing "products/product-details.html" at <.GetByPrefix>: can't evaluate field GetByPrefix in type []resource.Resource

```

---

<div class="post-metadata">

**Author:** ![Awestruck](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Awestruck](https://discourse.gohugo.io/u/Awestruck)\
**Post date:** [January 6, 2018, 8:30pm UTC](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834/20 "2018-01-06T20:30:19Z")

</div>

Another item tried, but failed. My thinking was the first line gets the pages in the bundle (it does). The second line gets the specific page. But it errors.

```auto
{{ with .Resources.ByType "page" }}
{{ .GetPage "desc_short" }}
{{ .Content }}
{{ end }}

```

Error:

```auto
.....at <.GetPage>: can't evaluate field GetPage in type []resource.Resource

```

[Next page](https://discourse.gohugo.io/t/need-help-understanding-content-organization-for-product-pages/9834.md?page=2)