Trying to make an article preview shortcode but it isn't working. Need help. How do i do it?

support
1

Hi, i have been trying to create an article link preview. Basically a shortcode that allows me to mention other articles(eg in a series) by showing the article image, link, date and read minutes.
I am using Hugo Novela. Heres my code.
NB: I tried removing and adding ( .Params ) but it didn’t build so here’s one with .Params on.

{{$page := .Site.GetPage (.Get 0)}}
<section id="articleNext" class="section nartrow">
    <div class="footer-spacer"></div>
    <div class="next-articles-grid">
        <div class="post-row">
                <a href="{{ $page.RelPermalink }}" class="article-link" id="article-link-bigger">
                    <div>
                        <div class="image-container">
                            <img src="{{ $page.Params.hero }}" class="article-image" />
                        </div>
                        <div>
                            <h2 class="article-title">
                                {{ $page.Title }}
                            </h2>
                            <p class="article-excerpt">
                                {{ $page.Summary }}
                            </p>
                        </div>
                    </div>
                </a>

        </div>
    </div>
</section>

What it’s supposed to do is when I add this shortcode:{{< articlepreview “post/share-buttons-for-hugo/” >}}, it’s supposed to display the image, date and read minutes, all enclosed inside of the link of the post. I have tried having the full url and the one shown above. It doesn’t work. The feature is called Article Preview. It is used to recommend an article similar to the one being viewed or just to promote other articles. So I am working on a 2 part series involving sharing, and my latest article is about the web share API, so I am trying to recommend users to check the last post for a fallback strategy.

It’s similar to related articles but it has to have freedom for example I can decide to promote/recommend an irrelevant article.

Where did I go wrong? or is it a problem with how shortcodes work? I have seen an implementation of this here: Create an Article Preview in Hugo | Developer for Life (jeremylikness.com)

2

What does this mean? It is difficult to troubleshoot an undefined problem.

3

Hi, here’s what i mean

Hi, i have been trying to create an article link preview. Basically a shortcode that allows me to mention other articles(eg in a series) by showing the article image, link, date and read minutes.
I am using Hugo Novela. Heres my code.
NB: I tried removing and adding ( .Params ) but it didn’t build so here’s one with .Params on.

{{$page := .Site.GetPage (.Get 0)}}
<section id="articleNext" class="section nartrow">
    <div class="footer-spacer"></div>
    <div class="next-articles-grid">
        <div class="post-row">
                <a href="{{ $page.RelPermalink }}" class="article-link" id="article-link-bigger">
                    <div>
                        <div class="image-container">
                            <img src="{{ $page.Params.hero }}" class="article-image" />
                        </div>
                        <div>
                            <h2 class="article-title">
                                {{ $page.Title }}
                            </h2>
                            <p class="article-excerpt">
                                {{ $page.Summary }}
                            </p>
                        </div>
                    </div>
                </a>

        </div>
    </div>
</section>

What it’s supposed to do is when I add this shortcode:{{< articlepreview “post/share-buttons-for-hugo/” >}}, it’s supposed to display the image, date and read minutes, all enclosed inside of the link of the post. I have tried having the full url and the one shown above. It doesn’t work. The feature is called Article Preview. It is used to recommend an article similar to the one being viewed or just to promote other articles. So I am working on a 2 part series involving sharing, and my latest article is about the web share API, so I am trying to recommend users to check the last post for a fallback strategy.

It’s similar to related articles but it has to have freedom for example I can decide to promote/recommend an irrelevant article.

Where did I go wrong? or is it a problem with how shortcodes work? I have seen an implementation of this here: Create an Article Preview in Hugo | Developer for Life (jeremylikness.com)

4

What doesn’t work? How is it failing? Be specific.

5

Ok, when i add that code, all it does is display a blank
Here’s what id displays. The link to the article works, clicking is taking me to the article I wanted to link, the issue is the title, and image are not displaying.

image
image736×350 5.02 KB

It’s supposed to display something similar to this
image

6

Please share your project repository. I won’t be able to troubleshoot this without your code and content. Thanks.

7

Ok, https://github.com/stephenajulu/ajulusthoughts2-1

8

That link is broken. Please try again.

9

sorry used a hyphen.
Here’s the link: GitHub - stephenajulu/ajulusthoughts2.1: My Ajulu's Thoughts Blog

10

Change this:

{{< articlepreview "/post/share-buttons-for-hugo/" >}}

To this:

{{< articlepreview "/post/share-buttons-for-hugo" >}}

The author of the article you read wrote:

The .Site.GetPage allows me to fetch a page based on its URL.

This is wrong. The parameter is a path, not a URL. See docs.

1 Like
11

Thank you very very much. It’s now working. I’ll mention this in his post. Thank you jmooring.

13

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