Relative Link

Dec 4, 2020
draft shortcode Jeremy Likness relative link

From Jeremy’s article

After building this functionality I realized I could create a short code to do a similar thing with relative page links. I created a short code named relativelink.html, in which the .Site.GetPage allows me to fetch a page based on its URL. I then extract the title, image, and description to create my preview. The thumbnail generation produces a slightly wider image and constrains the height as well.

Front matter used

title is the only standard item
image is not a standard item
description is not a standard item

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

Using relativelink (the double curly brackets have been removed)

<relativelink "/hugotips/help.md" >

Help

<relativelink "/hugotips/featured-image.md" >

Featured Image

How to set up and use a featured image from the static folder at the top of the page.

<relativelink "/testbundle/page-resources" >

Page Resources

Images in the folder can be displayed as Page Resources

<relativelink "/blog/0720-hugo.md" >

0720 Hugo website for Journal

An investigation in to starting to use Hugo again to generate the notebook Journal and be able to see the website on the local network

The article’s front matter

---
title: "Create an Article Preview in Hugo"
author: "Jeremy Likness"
date: 2019-07-12T11:08:28-07:00
years: "2019"
lastmod: 2019-07-12T11:08:28-07:00

draft: false
comments: true
toc: false

series: "From Medium to Hugo"
subtitle: "Generate thumbnails on the fly and pull page metadata for a proper preview."

description: "Generate a thumbnail for your Hugo posts on the fly, then create a custom short code that uses thumbnails and page data like title and description to embed a post preview to interlink documents."

tags:
 - Hugo
 - Static website 
 - Go

image: "/blog/create-article-preview-in-hugo/images/durabledungeonpreview.jpg" 
images:
 - "/blog/create-article-preview-in-hugo/images/durabledungeonpreview.jpg" 
---

Relative Link

From Jeremy’s article

Front matter used

Using relativelink (the double curly brackets have been removed)

The article’s front matter

See Also

Breadcrumb