Template success!

11 Aug 2023

coding

I managed to figure it out!
A while ago I wrote a post that said that I had changed the front page of this site so that each post was displayed as a card instead of a big long list of posts (such as the archive page). However, what I couldn't figure out at the time was how to add thumbnails to the cards to make the front page a bit more interesting. I am very happy to say that I figured it out and implemented it today.

The solution required an additional post data category (i.e. thumbnail) and this has been added to the post template. This metadata is then picked up by the card display code so that as well as the post title, date and tags being pulled through for each post, it also grabs the thumbnail address. Using some CSS, the post metadata is added on one side of the card with the thumbnail being added to the right side of the card. The other great thing I was able to figure out was how to add a default image so that if no thumbnail image is listed in the post, the display will automatically grab the AP Pixel logo one instead.

There are some other tweaks I would like to do, for example, portrait photos display well but landscape ones look a bit off. The responsive display also goes a bit weird when changing between desktop and mobile view - The dates need an overflow fix.

While there is a bit of work still to go, I am pretty happy with how it turned out for now and there is that great feeling that goes with figuring out a coding problem!

← Home