External Link Page Preview/Bookmark Shortcode Help

support
1

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
image990×320 58.5 KB

In the post (Create an Article Preview in Hugo | Developer for Life) JeremyLikeness uses this shortcode:

{{$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?

3

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

4

Thanks! I will check it out