TIL: Adding Image Headers to Jekyll Posts

So I thought I’d look into getting more color added to my blog. When I started moving over to the new theme months back, I remembered seeing some option for easy picture management on posts. Meaning that you could basically drop in header images for your posts and the theme would take care of the rest.

After some digging, I found that it’s pretty straight forward to getting working. If you want to add an image to your post, all you really need to do is add the following image info to the top of the post:

1
2
3
4

image:
  path: link.To.Your.Picture.jpg
  thumbnail: link.To.Your.Picture.jpg
  caption: Test Caption

And that will automagically handle it for you. Great! So we’re done, right? Where is the image on this post?

Of course it’s not just that easy. I hastily went in before thinking it through and missed out on two main things:

1. Where to store the images
2. How the images are shown on the page

Problem 1: Storing the Images

The first issue is a major design issue. I post every day. If I were to start attaching pictures to every single post and try to keep them within my git repo, that’s going to get crazy really fast. So ideally I’d need some external service to host all of the files. I suppose that I COULD just create an s3 bucket on aws and host them all there… but that’s more effort than I was willing to take this morning. I played around with hosting the images on dropbox instead, and eventually did get it working (ps, public folders are dead but you can still create public links for individual images and change the ?dl=0 ending to raw=1 and embed like normal), but it’s not what I wanted.

If I do decide to go this route, I’ll probably look into s3 hosting. I know it’s pretty much free but… not interested in it right now because of the bigger issue with

Problem 2: The Images Look Terrible On Big Screens

The way that this template was set up was for the image to be shown at full screen when you load the post. No matter what monitor size you’re using, the image is going to be full screen.

Personally, I think this looks terrible. I don’t understand the appeal of having to scroll down an entire page length just to start getting to the content. Especially in my case where 99% of the time the image probably wouldn’t have anything to do with what I’m actually talking about, it just makes the concept of “header images” more pointless.

I looked around and found that there’s some scss files that I could mess around with to try to get this to behave more like I’d want (like ~70% width to a certain size with media queries), but again it’s not really something I want to spend my time on right now.

Personally, I’ve never been a big fan of random pictures within blog posts when they don’t add anything to the context. I get why people put them in, and that’s probably why I was chasing the idea, but it’s really not for me.

Update

I stopped being lazy and looked into using s3 instead. Based on the amount of traffic I get, and how often I’ll probably even be using images, the cost is going to be virtually free.

I also included a picture the way that I had originally envisioned it working. I’m not sure why the ugly full screen is the default, but I really like this look.

💚 A.B.L.