What is a featured image

A featured image is used in blogging in two ways, one is in the blog itself and the other is the use in social media. The image usually represent and idea of the post itself remember:

An image worth a thousand words

Many Wordpress and Ghost themes use the feature image to present blog posts as cards in the home page, something like this:

Featured image theme

The other use as said before, is in social networks, Mastodon, Twitter, Facebook or Reddit use that feature image in order enhange the presentation of the post in those social networks.

Implementing Featured image in Middleman

This site is generated using Middleman, so it is not as easy as it could be with Wordpress or Ghost to present the featured image.

Facebook and other networks use OpenGraph, Twitter use Twitter Cards

What I need to do, is to put a few variables in the Yaml Front Matter of every post, I have something like this:

---
category: posts
robots: "noodp, noydir"
description: "Review of the Wallabag service, the open source alternative to Pocket"
meta-tags: ""
layout: post
title: "Wallabag Review"
date: 2020-07-04 18:21:00 00:00
summary: "Review of the Wallabag service, the open source alternative to Pocket"
image: "/images/2020/07/wallabag.png"
---

But some posts, does not have the image set, so it looks something like this:

---
category: posts
robots: "noodp, noydir"
description: "New theme for the blog"
meta-tags: ""
layout: post
title: 'New Theme'
date: 2020-05-02 18:30:00 00:00
summary: "New theme for the blog"
---

What I did was to create a default image for all blog posts that does not have such featured image, the image is a collage my daugther made for me out of some free to use image on the Internet.

default featured image

Later, what is needed is to check if the variable image is set, use its value, if not, use the default value. That is done in the default layout of my middleman blog.

<!-- Twitter - FAcebook
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

<% if current_page.data.image %>
  <% featuredImage = current_page.data.image %>
<% else %>
  <% featuredImage = '/images/2020/07/default.jpg' %>
<% end %>

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ggarron">
<meta name="twitter:creator" content="@ggarron">
<meta name="twitter:title" content="<%= current_page.data.title %>">
<meta name="twitter:description" content="<%= current_page.data.description %>">
<meta name="twitter:image" content="https://www.garron.blog<%= featuredImage %>">

<meta property="og:title" content="<%= current_page.data.title %>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.garron.blog<%= current_page.url %>" />
<meta property="og:image" content="https://www.garron.blog<%= featuredImage %>" />
<meta property="og:description" content="<%= current_page.data.description %>" />

<!-- Twitter - FAcebook
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

That is all, once the middleman blog is built, each page get its featured image, or the default one is used if no one is set.

Final words

It seems as something not really important, and maybe it is not, but if you are creating something, you want it to looks good in every site it gest viewed, so if somebody share your link on Reddit, or share it using Telegram, it will look a lot better with that featured image, and of course, the title, description and other attributes are also important.

---

---

---