I've always envied authors who post links to their articles on social media with attractive preview images. I knew about Open Graph, but I've always been too lazy to fire up Canva or some image editing tool and make a reasonable looking image.

Twitter image preview with my name on it
Final result

Recently I started using Unsplash as a source of images, and that has helped quite a bit. At least the preview images were attractive, even though they might only be thematically related to my posts.

Photo by Nelson Wong / Unsplash

The problem is that these are just images with no titles, no text, no indication that I'm the source of the content you're about to click on. I wanted something more, and I wasn't afraid to spend a few hours coding it if it saved me 3 minutes on Canva!

Sometime last week I stumbled across DevsQuotesPrinter on GitHub. Josemy created a command-line tool and web app for an Instagram account. This was just the inspiration I needed. I forked the repo and started changing it to suit my needs.

My first action was to create a new base image that the titles would be written on. I poked around on Canva and found a geeky looking background with minified HTML at an angle.

My First Attempt

This image looked pretty good, but even at the highest levels of compression the JPEG image was almost 1MB in size. That's just plain unfriendly to mobile and bandwidth constrained viewers. So I removed the code background and replaced it with a solid color.

Solid Color Background

I added a little picture of me from GopherCon 2016 in the corner for some personality. Now the image size was well under 100kb. Much more reasonable!

With a fresh new background image in hand I was ready to dig into the code to see what I wanted to change. Honestly it wasn't much at all. Josemy built a great little tool with code that's easily used from either a command-line utility or a web app. I changed the HTTP handler to conform to Azure Functions Custom Handlers specification, and I replaced the JSON body of the expected request with URL Query parameters instead. I did this because if I'm generating the image in a shell script it'll be easier to make a request without having to post JSON. Now a request looks like this:

https://mydomain.com/api/ogimage?title=Hello&size=140

Then, true to my habit, I added appropriate targets in the Makefile and tested the function locally.

❯ make run-func
go build \
                -trimpath \
                -ldflags "-s -w -extldflags '-static'" \
                -o handler \
                ./cmd/handler && \
                chmod +x ./handler
func start

Azure Functions Core Tools
Core Tools Version:       3.0.3388 Commit hash: fb42a4e0b7fdc85fbd0bcfc8d743ff7d509122ae 
Function Runtime Version: 3.0.15371.0

It spit out a local URL to test the function and it worked perfectly. I used ClickOps to Right Click Deploy the function straight to Azure Functions.

Self Contained Blog Server with Go 1.16
In this post I show how to create a web server distributed as a static binary with all resources embedded in it.
How meta...

The end result - visible in the image above is perfect for my simple needs. It's not flashy, but it shows a bit of personality and has a modest amount of "personal branding", a necessary pre-requisite of being a Developer Advocate.

The repository is on GitHub, if it's interesting to you feel free to fork and modify to your heart's delight.

bketelsen/azureog
Contribute to bketelsen/azureog development by creating an account on GitHub.
More Meta