Is thera a way to add a featured images in posts / pages?

[juha]

As of lately, I’ve been building and prototyping a blog that I’ve previously built with Eleventy. Eleventy is similar to Hugo in many ways, so I was thinking porting that blog theme and making it a Micro.blog powered blog.

One thing that I immediately realized though is that as I’ve used frontmatter in posts and pages, that would not work in Micro.blog as far as I know? Basically, I’d at least would like to have the ability to define a post / page featured image. A single post would then look something like this:

That featured photo could then be used in social media posts too, if cross-posting straight from micro.blog. I guess that as of currently, the first picture attached to post is used in social media posts?

Is there a way (or workaround) to accomplish this somehow on Micro.blog? For example, would it be possible to add featured image via the micro.blog post/page editor itself in the future (upload featured image or use url for that image, some Unsplash photo url for example)?

Just thinking out loud here, I guess

Cheers!

• Juha

[yurymol]

The problem is that you don’t have raw access to the frontmatter. Hugo by itself is not so different from Eleventy. Do you always have a featured image? Potentially, you can tweak your theme to take the first image associated with a post and use it as a featured image.

[sod]

I think support for YAML front matter might arrive someday. Here’s @manton in another thread:

Posts frontmatter and image display

This isn’t possible right now because Micro.blog manages the frontmatter for you. If all your posts are in Portuguese, you can use a custom theme to set the language everywhere, but not on a per-post basis. This is something we need to fix. We’ve talked about having some kind of interface for adding custom fields to the frontmatter. Another work-around would be to use categories like “English” and “Portuguese”. Then you could edit the templates in your theme to show the flag if the category wa…

Until then, here are some ideas for workarounds:

• You can add blog posts and pages via themes and plug-ins. So, you could have a my-blog-posts-plug-in containing all (or some) of your blog posts. That way, you get access to the YAML front matter. Here’s an example “blog post” from one of my plug-ins. Having to update a plug-in to write a blog post is tedious, though, and kind of misses the point of easy blogging via Micro.blog. (You could just host a Hugo or Elevently blog yourself in that case.)
• You can have your theme look for the first image in the blog post, as @yurymol already suggested.
• Or, you could have your theme look for some “magic” HTML and infer the featured image that way. For example: Hey, this is my short blog post with additional <data id="featured-image" value="/uploads/2023/abd45e7e85.jpg">data</data>.
• Instead of via HTML, you could provide the featured image via a Hugo shortcode. Something like: {{< feature_image "/uploads/2023/abd45e7e85.jpg" >}}. And have your theme parse that.

[juha]

Thank you for the suggestions and ideas @yurymol and @sod!

First picture as featured image could certainly work. I intend to have long posts with featured image and short micro posts without. That might be good enough solution right there. <data> also.

Is the Hugo shortcode something I could include straight from the micro.blog (web) editor (in the blog post content) or how would that work?

Thanks!

[sod]

@juha

Is the Hugo shortcode something I could include straight from the micro.blog (web) editor (in the blog post content) or how would that work?

Yep, it’s more or less the same solution as the HTML one. Just another syntax. You could invent whatever syntax you like, really. But in all cases (HTML, shortcode, or something else), you have to build support for it in your theme.

[juha]

Ah yes, thanks! Let’s see, might be something to tinker around this weekend

[yurymol]

@juha I’d appreciate if you could share the code for taking the first associated image if/when you have it, I’m still not happy most of my Micro.blog posts are shown with the last image on various social networks.

[juha]

Sure can (if I figure it all out)!

I managed to get the first attached image showing on single post template with:

{{- with $.Params.images -}}
  <figure class="cover-image">
    <img
      src="{{ index . 0 | absURL }}"
      alt="Post cover image"
      loading="lazy">
  </figure>
{{ end -}}

This same approach (code) also seem to work on post listing template on homepage.

For the social sharing part, I’m using these in head.html:

{{ template "_internal/opengraph.html" . }}
<!---->
{{ template "_internal/schema.html" . }}
<!---->
{{ template "_internal/twitter_cards.html" . }}

This is some special Hugo magic as described here.

I’m sure this can be further improved upon, but at least for now, it seems to work just fine in my blog

Cheers!