# External Link Page Preview/Bookmark Shortcode Help

**URL:** https://discourse.gohugo.io/t/external-link-page-preview-bookmark-shortcode-help/31624
**Category:** support
**Created:** [March 7, 2021, 5:17pm UTC](https://discourse.gohugo.io/t/external-link-page-preview-bookmark-shortcode-help/31624 "2021-03-07T17:17:34Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![jswtch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jswtch/32/8984_2.png) [@jswtch](https://discourse.gohugo.io/u/jswtch)
#### Post date: [March 7, 2021, 5:17pm UTC](https://discourse.gohugo.io/t/external-link-page-preview-bookmark-shortcode-help/31624/1 "2021-03-07T17:17:34Z")

</div>

Hello,

I want to create a shortcode to display page previews of external links in my content.

This image is an example of what I hope to create - with the resources that I am looking at.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/c/c9d992c778b546829bbfb8cd9942be14930545db.jpeg)

In the post ([Create an Article Preview in Hugo | Developer for Life](https://blog.jeremylikness.com/blog/create-article-preview-in-hugo/)) JeremyLikeness uses this shortcode:

```auto
{{$page := .Site.GetPage (.Get 0)}}
<div class="container alert alert-secondary">
    <div><a href="{{$page.RelPermalink}}" alt="{{$page.Title}}">
        <strong>{{ $page.Title }}</strong>
    </a></div>
    <div class="float-left m-2">
    {{ if $page.Params.image }}
        {{ $original := print "images/" (path.Base $page.Params.image) }}
        {{ $originalImg := $page.Resources.GetMatch $original }}
        {{ if $originalImg }}
            {{ $thumbnailImg := $originalImg.Fit "200x100" }}
            {{ printf `<img src="%s" alt="%s">` 
                $thumbnailImg.RelPermalink $page.Title | safeHTML }}
        {{end}}
    {{end}}
    </div>
    <p><small>{{$page.Description}}</small></p>
    <div class="clearfix"></div>
</div>

```

I want to create similar functionality with external sites.

Is it possible to create a shortcode that can access the metadata and preview images of other sites then saves this as some data to prevent future requests?

---

<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: [March 7, 2021, 8:52pm UTC](https://discourse.gohugo.io/t/external-link-page-preview-bookmark-shortcode-help/31624/3 "2021-03-07T20:52:50Z")

</div>

For sites that provide OG data, this approach might work:

> [@Grab card data from url](https://discourse.gohugo.io/t/grab-card-data-from-url/26807):
>
> Is it possible to wrap a url/link in a shortcode {{ \< link "https://www.washingtonpost.com/..." \> }} and return it’s twitter/og card data? I’d assume there is a lot of work to store it all locally.

---

<div class="post-metadata">

### Author: ![jswtch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jswtch/32/8984_2.png) [@jswtch](https://discourse.gohugo.io/u/jswtch)
#### Post date: [March 10, 2021, 12:30am UTC](https://discourse.gohugo.io/t/external-link-page-preview-bookmark-shortcode-help/31624/4 "2021-03-10T00:30:40Z")

</div>

Thanks! I will check it out