Manton Reece

Greg Morris is considering migrating his site from WordPress to Micro.blog hosting and had a question about referencing photos in a template:

Card previews I really want to be able to solve - does anyone know how to pull an image out of a hugo post in order to put meta property=“og:image” into the head?

Micro.blog uses Hugo themes because they are fast and there’s so much flexibility to customize them. To test this, I created a theme and edited the layouts/partials/head.html template, adding this somewhere along with the other meta tags:

{{ with .Params.images }}
  {{ range first 1 . }}
    <meta property="og:image" content="{{ . }}">
  {{ end }}    
{{ end }}

This looks at the photos on a post and takes the first one, adding its URL to a meta tag. If instead of the original photo you want to include a smaller thumbnail, you can use Micro.blog’s special photos.micro.blog resizing proxy. Here’s an example to include a 300x300 thumbnail:

{{ with .Params.images }}
  {{ range first 1 . }}
    <meta property="og:image" content="https://photos.micro.blog/300/{{ . }}">
  {{ end }}    
{{ end }}

I still want to add more built-in designs, as well as add design settings so that custom themes aren’t necessary for common features. But there’s a lot of power here to make your blog whatever you want it to be.