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

**URL:** <https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412>\
**Category:** support\
**Created:** [June 17, 2021, 3:37am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412 "2021-06-17T03:37:16Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![stephenajulu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stephenajulu/32/12169_2.png) [@stephenajulu](https://discourse.gohugo.io/u/stephenajulu)\
**Post date:** [June 17, 2021, 3:37am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/1 "2021-06-17T03:37:16Z")

</div>

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.

```auto
{{$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)](https://blog.jeremylikness.com/blog/create-article-preview-in-hugo/)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 17, 2021, 7:36am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/2 "2021-06-17T07:36:52Z")

</div>

> [@stephenajulu](#):
>
> but it isn’t working

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

---

<div class="post-metadata">

**Author:** ![stephenajulu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stephenajulu/32/12169_2.png) [@stephenajulu](https://discourse.gohugo.io/u/stephenajulu)\
**Post date:** [June 17, 2021, 7:41am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/3 "2021-06-17T07:41:11Z")

</div>

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.

```auto
{{$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)](https://blog.jeremylikness.com/blog/create-article-preview-in-hugo/)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 17, 2021, 7:42am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/4 "2021-06-17T07:42:33Z")

</div>

> [@stephenajulu](#):
>
> It doesn’t work.

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

---

<div class="post-metadata">

**Author:** ![stephenajulu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stephenajulu/32/12169_2.png) [@stephenajulu](https://discourse.gohugo.io/u/stephenajulu)\
**Post date:** [June 17, 2021, 8:21am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/5 "2021-06-17T08:21:28Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/d/daaf847d4559bfca773617ef8cbdbb8f99149795.png)

It’s supposed to display something similar to this  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/3/3d21b05b30160efac5da2c7add32f0aca37ad0f1.png)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 17, 2021, 8:25am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/6 "2021-06-17T08:25:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stephenajulu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stephenajulu/32/12169_2.png) [@stephenajulu](https://discourse.gohugo.io/u/stephenajulu)\
**Post date:** [June 17, 2021, 8:26am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/7 "2021-06-17T08:26:22Z")

</div>

Ok, [https://github.com/stephenajulu/ajulusthoughts2-1](https://github.com/stephenajulu/ajulusthoughts2-1)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 17, 2021, 8:37am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/8 "2021-06-17T08:37:10Z")

</div>

That link is broken. Please try again.

---

<div class="post-metadata">

**Author:** ![stephenajulu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stephenajulu/32/12169_2.png) [@stephenajulu](https://discourse.gohugo.io/u/stephenajulu)\
**Post date:** [June 17, 2021, 8:38am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/9 "2021-06-17T08:38:10Z")

</div>

sorry used a hyphen.  
Here’s the link: [GitHub - stephenajulu/ajulusthoughts2.1: My Ajulu's Thoughts Blog](https://github.com/stephenajulu/ajulusthoughts2.1)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 17, 2021, 8:57am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/10 "2021-06-17T08:57:22Z")

</div>

Change this:

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

```

To this:

```auto
{{< 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](https://gohugo.io/functions/getpage).

---

<div class="post-metadata">

**Author:** ![stephenajulu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stephenajulu/32/12169_2.png) [@stephenajulu](https://discourse.gohugo.io/u/stephenajulu)\
**Post date:** [June 17, 2021, 9:44am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/11 "2021-06-17T09:44:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [June 19, 2021, 9:49am UTC](https://discourse.gohugo.io/t/trying-to-make-an-article-preview-shortcode-but-it-isnt-working-need-help-how-do-i-do-it/33412/13 "2021-06-19T09:49:37Z")

</div>

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