What you get for reading and watching...
Reusable Jekyll code to create a featured post, list of posts, and featured images, all in one file (plus some css). Here is what the reusable code will look like when viewed in a browser:
Back story
When I created my website, I decided to create multiple post types. As of this writing, I have two types of posts: Blog and Podcast.
Code conundrum
Not fully understanding how to work with Jekyll at the time, I created multiple files containing code to display my blog roll and another set to display the podcast. Then, I wrote a separate code to display featured images, and even more code for the featured post for each post type.
Whenever I modified the look-and-feel of my site, I had to do a grueling round of code changes and run tests to ensure I did not break the responsive design. I was (well, still am) planning to create another post type for training. The idea of doing yet another round of code for that felt so overwhelming I gave up on the idea, and that is not the way to live ☹️
One feed to rule them all
After opening my code to make a little change to my blog and having to modify five different files, I threw up my hands and did what I should have done a long time ago. I re-architected my site and created a single file that can display any post type I want.
With my new approach, there is one file containing all the reusable code I need for a feed page (list of posts). Using some CSS styling tricks, the feed can look totally different than the featured post, but it is still the same code. I also have the added value of getting featured images with each post to make the site feel more dynamic and modern.
Tl;DR (or 'listen, just give me the code')
You can clone my GitHub repo that shows you how to add featured images and the one one feed to rule them all code here:
https://github.com/BillRaymond/jekyll-featured-images
The great news is the code is using Jekyll. Check out the live running site here (the blog and podcast links are the ones to pay attention to):
https://billraymond.github.io/jekyll-featured-images/feed/blog
Recommended 'before you begin' videos
My training starts with a barebones Minima site, but it does build on a video series I created that shows you how to add featured images to your posts. Technically, you do not have to set up featured images, but you will be missing out, so check these out first:
The one feed to rule them all video series
There are three must-watch videos listed here. I have a fourth to finalize, but that is a tips & tricks video, so please subscribe to my channel to keep up with that release.
One last request
The videos I do on YouTube are a labor of love, and I am trying to build an audience for people like myself that are occasional developers. The videos take a long time to create, so I would appreciate it if you subscribe, like, comment, and share if you find the content useful. In return, you will receive my sincere gratitude and the drive to create more content like this.
Top comments (0)