Customizing a Pelican Theme

UPDATE 2021-08-02

After making the following changes I figured I might as well see if the developer would want to integrate the changes. I submitted a pull request on GitHub and my changes were merged into the theme. This is the second time my changes have been excepted into a body of work see my post on that, and it's pretty excting. It's a minor tweak to all the work that the developer maintainer put into the theme but I spent hours figuring out the problem and figuring out how to solve it so it's really gratifying to see that work matter for more then just my own blog.

The Problem

I recently realized that Linkedin is actually a social media platform that is kinda cool. I have been noticing how much better the content is from other platforms. I guess people are puting there best foot forward since it's a platform for professional networking. Since I have been using it more I decided to put some focus on my Linkedin profile. I added some of my blog entries to the "Featured" section of my profile. However they were not presented particularly well because the header for blog was being used for all the images in the links. I needed to figure out how to set a custom image to be used when the link is shared. With a bit of DuckDuckGoing (doesn't quite role off the tounge). I was able to figure out what exactly I was trying to change. I found this link which goes into some explantion and then gives some code examples. The short version is for some reason Linked in needs an extra tag that Facebook doesn't. That tag is not implemented in the Atilla theme that I use. Great now I know whats wrong and have the code to fix it!

The Fix

I use Pelican for my blog. Pelican takes simple text files that are written in markdown and outputs them as static HTML files that can then easily be hosted with any web server. It has a bunch of cool things about it but the best thing for me is it's written in and uses Python. A language that I understand. So I have a chance to modify it to my liking, that's what I decided to do.

So I will spare all the gory details of my hours of tinkering on Pelican themes and give you the short version. I found the sections of my theme templates that relate to Open Graph which are.

templates/partials/og.html
templates/partials/og_article.html

Then I had to add the prefix="og: http://ogp.me/ns#" that I learned about in my searching to the Open Graph section of my theme templates. So the following

<meta http://ogp.me/ns#" roperty="og:site_name" content="{{ SITENAME }}"/>
<meta http://ogp.me/ns#" roperty="og:type" content="blog"/>
<meta http://ogp.me/ns#" roperty="og:title" content="{{ SITENAME }}"/>
<meta http://ogp.me/ns#" roperty="og:description" content="{{ description }}"/>
<meta http://ogp.me/ns#" roperty="og:locale" content="{{ default_locale }}"/>
<meta http://ogp.me/ns#" roperty="og:url" content="{{ SITEURL }}/"/>
<meta http://ogp.me/ns#" property="og:image" content="{{ default_cover }}">

Changes to

<meta prefix="og: http://ogp.me/ns#" property="og:site_name" content="{{ SITENAME }}"/>
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="blog"/>
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="{{ SITENAME }}"/>
<meta prefix="og: http://ogp.me/ns#" property="og:description" content="{{ description }}"/>
<meta prefix="og: http://ogp.me/ns#" property="og:locale" content="{{ default_locale }}"/>
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="{{ SITEURL }}/"/>
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="{{ default_cover }}">

That will use any custom image I set for an article when I share a link via social media. So now under my featured section not every post has the same preview image.