Skip to main content

Pretty Good Hat

Tag: blogging

I’ve learned just enough about go conditionals and comparisons within Hugo templates to revise my lil blog’s “now” page list of “posts on this day” to “posts on and around this day.” Solid.

Somewhere along the way I ended up with two versions of my tag for R-related posts (#r and #R), and Hugo didn’t handle the lowercase one. A couple of quick sed lines did the trick to convert both to a more friendly version that Hugo handles just fine. I’m saving them here for future reference in case I ever want to bulk-change a Hugo tag again:

  • sed -i 's/^ \- r$/ \- rstats/' *.md
  • sed -i 's/^ \- R$/ \- rstats/' *.md

Recent chat around about enabling an “on this day” plugin prompted me to put together the shortcode below. Unlike sophisticated hugo configurations, mine is just updated by a cron job, so I can render it statically, without any javascript, and it’s always current to the day, even if I haven’t posted that day.

I call this shortcode from my /now page:

Posts on this day ({{ now.Format "Jan 2" }}):
{{ range (where .Site.RegularPages "Section" "in" (slice "post" "note")) }}
  {{ if eq .Date.YearDay now.YearDay}}
  <li><a href="{{ .Permalink }}">{{ .Date.Format "2006-01-02"}} / {{ .Title }}</a>
{{ else }}
    <li>... no entries ... 
{{ end }}

Hugo: render hooks and partial for displaying images

Markdown render hooks allow for adding customization to the default markdown to html rendering in hugo. When placed in _default/_markup/render-image.html, this example overrides the standard rendering of images from markdown to include a call to Glightbox.

    <a href="{{ .Destination | safeURL }}" class="glightbox" data-gallery="{{ .Page.Permalink }}">
    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" style="max-height: 720px" />

This grabs the page’s permalink for the data-gallery property.

For photos specified in a post’s yaml frontmatter, I call a partial in my article template, photos.html:

    {{ range }}  
    <a href="{{ replace .value " " "" }}" class="glightbox" 
            data-gallery="{{ replace .value " " "" }}">
    <img src="{{ replace .value " " "" }}" alt="{{ .alt }} "
    style="max-height: 720px;"  />
    {{ end }}

Both of these assign the data-gallery property in order to avoid overlapping galleries on index or other pages with multiple posts. One future improvement to try is building a shortcode to replace the partial, so that the gallery ID or other properties can be customized at call time.

Inspired by Jessica Smith I did some learning today and added glightbox to improve the way I display photos. Way back in a pre-history iteration of the site, I had lightview working here with some complex templating (which I think was generated by a shell script that I wrote as part of a Lightroom export plugin!) that I never quite rebuilt for the new design a few years ago, so it’s super nice to have this back again. Thanks to Jessica’s prompting and critical help identifying my error in implementing it, it works! Next up is probably cobbling together a hugo shortcode so that I have a little more flexibility in layout and gallery options. I should probably also just write down how this works so I don’t have to figure it out again next time.

If vacation days are at least partly for making small color adjustments to your blog’s CSS, then I’m doing pretty good today. (Changes to my dark theme, borrowing elements from the various “pastels on dark” themes (which I think originated in TextMate?))