Changing the Post list style

I received a email from the contact form on my old blog (which I had completely forgot about). The email was just spam but it reminded me that I haven't yet deleted my old wordpress blog site. While I have moved all the posts across I was comparing it against this netlify one and I noticed that the post list on the old site was displaying cards instead of the list I had on this version.

I set myself a challenge of recreating the 'card' style of post list of the old wordpress blog in this site as opposed to the table list like I currently have configured on the archive page.

At first I thought I would create a table and add each post as a card in a cell but I needed a way of repeating the method across rows. Netlify sets the post list up as a 'For each post in a list, do this' which I struggled to put into a multi row table. I thought about modifiying the 'For statement to say: 'for the first two posts, do this, then add a row and then for the next 2 posts do this, and so on' however I thought there must be a better more scalable method.

Using the card and responsive layout functionality within the w3 css, I was able to set up a row and have a seperate card for each of the posts (containing date, hyperlinked title and tags). The card width can be adjusted (half, third quarter width) which then in turn applies to all post cards (which makes it better than the static 2 cell width of a table). It is also responsive which is another plus as when the screen drops below 601px, the cards realign into a signle column automatically. I initially had some drama when the title was wider than the card. Not a huge issue when using a widescreen but when using a smaller screen (tablet or mobile) the cards would not longer be aligned and it looked terrible. Enter text-overflow!

Now when the text is wider than the card, it displays an ellipsis (...) instead of the text wrapping to the next line and stuffing the verticle alignment. So much cleaner! The next thing I would like to do is to include a picture thumbnail as a header for each card. Ideally I would like to pull through an image from the post itself - I suspect that I might have to add an additional metadata field to the post template though (similar to date, title, and description fields) so that it can be pulled through by the 'for each' functionality when it generates the post list. I shall test and see how it goes.