Hugo

Summary .Render

Having decided that I needed a custom summary rendering solution, I started whipping up a shortcode before realizing that wouldn’t work since I was calling it from a partial. So I started creating a partial, but an interesting conversation with Vic Hudson convinced me to create an alternate layout to call with .Render instead.

More on that conversation later. First, my summary.html layout file:

<article>
    <header>
        <div class="post-title">
            <a href="{{ .Params.linkurl | default .RelPermalink }}">
                <h1 class="title">{{- if .Params.linkurl -}}<i
                        class="fas fa-link fa-sm"></i>&ensp;{{- end -}}{{ .Title }}{{- if .Params.linkurl -}}&emsp;<i
                        class="fas fa-external-link-alt fa-xs"></i>{{- end -}}</h1>
            </a>
        </div>
        <div class="post-meta">
            <div class="date">
                <span class="posted-on">
                    <i class="fas fa-calendar"></i>
                    <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
                        <a
                            href="{{ .RelPermalink }}">{{ . …

(Read More)

Summarizing Hugo Content Summaries

Hugo content summaries and I have a complicated relationship. Rather, the design decisions behind the Hugo .Summary page variable intrigue me.

I’m going to tell you how I render my post summaries on my site front page, main blog page, and many of my various section pages, but not today. Today I’m going to write many words about why I had to come up with my own way of rendering Hugo post summaries. I apologize, but it has to be done.

By design, using .Summary to display a post summary strips out all the HTML formatting. The summary will appear as one block of text, regardless of paragraphs and line breaks in the original text. In addition, any images or footnotes or any other non-plaintext will be removed.

This is … an interesting choice. And not, I suspect, what most people want. …

(Read More)

Hugo .Summary Customization

In my article on supporting link posts in Hugo, I went on a short tangent about the Hugo .Summary function and the fact that I wasn’t using it, but was instead piping .Content to the truncate function.

Mainly I wasn’t using .Summary because it basically strips out the html paragraph tags and makes a big block of text. I find this an interesting choice, because who does this? No one, that’s who. Everyone who uses summaries wants legible summaries, including paragraph breaks. Hugo summaries make the assumption that a handful of words will be enough to draw your readers in, and that that’s the look you want in the first place.

Hugo does provide for overriding this by putting a summary in front matter, but that seems like a major kludge considering how easy it would be for .Summary to take a few option parameters. …

(Read More)

Link Posts in Hugo

Most popular blogging platforms or themes made for them support some kind of link post format as an alternative to a regular, “this is my own original content” post. The idea is that you can link to something somewhere else on the web, and add your comments in your own post. Typically the link post title links to another site, and there is a permalink URL to your own post.

I don’t plan to write a lot of link posts, that’s not the point of my site, but I knew it would be nice to do so whenever I like without having to step outside my blog post shortcuts and blog post template archetypes and manually edit things. To support this, I added the ability in all my section and home list and single article pages to check for a front matter variable called “linkurl”.

Here’s what …

(Read More)

Hugo Shortcode For Custom Image Handling

On my generously sized list of improvements I need to make to this site are a couple of image handling items. I crossed off one of those today, after going down a Rabbit Hole while writing another post that I intended to publish today instead of this one.

Up until now, when I’ve put a screenshot image in a post on this site, I’ve just linked to it directly, which causes a couple issues. First, there’s the image sizing issue – screenshots are high resolution and so appear massive when just linked to inline like that. Second, alignment preferences and captioning can be an issue.

Hugo does have a figure shortcode, but as far as I can tell, it doesn’t have any way to set the image alignment. It does support setting a css class for the figure, but I couldn’t find a way using css to actually affect my image alignment when using the Hugo figure shortcode.

So I wrote …

(Read More)