HUGO

Placement and structuring of non content data

Im building a blog in hugo and Im now implementing a shortcode to insert a ad for my books in my articles.

My question is, where and how do you think I should store this ad data?
My first idea was to save each ad as a markdown file in assets with front matter for URL and such. But I found that front matter could only be parsed from content files.
Should I store it as yaml instead, with the markdown and everything in there? and where should I store it? Assets? Data?

I how you understand what Im asking for. I just want som best practise on this so that it does not com back and bite me.

An article is a type of content.
An advertisement is another type of content.

Step 1: Define structure
content
ā”œā”€ā”€ ad/
ā”‚   ā”œā”€ā”€ ad-1/
ā”‚   ā”‚   ā”œā”€ā”€ a.jpg
ā”‚   ā”‚   ā””ā”€ā”€ index.md
ā”‚   ā””ā”€ā”€ ad-2/
ā”‚       ā”œā”€ā”€ b.webp
ā”‚       ā””ā”€ā”€ index.md
ā”œā”€ā”€ article/
ā”‚   ā”œā”€ā”€ article-1/
ā”‚   ā”‚   ā””ā”€ā”€ index.md
ā”‚   ā””ā”€ā”€ article-2/
ā”‚       ā””ā”€ā”€ index.md
ā””ā”€ā”€ _index.md

Step 2: Do not render advertisements

config.toml

[[cascade]]
  [cascade._build]
    render = "never"
    list = "never"
  [cascade._target]
    path = "/ad/**"

References:


Step 3: Create advertisement

content/ad/ad-1/index.md

+++
title = "Ad 1"
date = 2021-07-26T09:17:27-07:00
draft = false
call_to_action = "Register now for this event."
call_to_action_url = "https://example.org/register"
+++
This is content/ad/ad-1/index.md

Step 4: Create a content view template to render advertisements when embedded in other pages

layouts/ad/embedded.html

<div class="ad">

  {{ with .Title }}
    <div class="ad-title">{{ . }}</div>
  {{ end }}

  {{ with $img := index (.Resources.ByType "image") 0 }}
    {{ $img = $img.Fill "400x250" }}
    <div class="ad-image-container">
      <img class="ad-image" src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" width="{{ $img.Height }}">
    </div>
  {{ end }}

  {{ with .Content }}
    <div class="ad-content">{{ . }}</div>
  {{ end }}

  {{ with .Params.call_to_action }}
    <div class="ad-call-to-action">
      <a href="{{ $.Params.call_to_action_url }}">{{ . }}</a>
    </div>
  {{ end }}

</div>

References:


Step 5: Create a shortcode template to embed advertisements in other pages

layouts/shortcodes/embed-content.html

{{ (site.GetPage (.Get 0)).Render "embedded" }}

Step 6: Create article

content/article/article-1/index.md

+++
title = "Article 1"
date = 2021-07-26T09:17:17-07:00
draft = false
+++
This is content/article/article-1/index.md

{{< embed-content "ad/ad-1" >}}

Try it:

git clone --single-branch -b hugo-forum-topic-33987 https://github.com/jmooring/hugo-testing hugo-forum-topic-33987
cd hugo-forum-topic-33987
hugo server
1 Like

Thank you very much for the thorough answer! works perfectly!

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.