Automate Creating Article Preview Cards With Hugo
Below is how I generate preview cards for this Hugo static-site on my home page. How the template works is by parsing every page in my site (unless a page is marked with list="never" in the head section) to grab the title, date, tags, a preview image, and the description of the page to generate the preview cards. I don’t always set the preview image or a description for my pages, so I have the template look for the first image in the article and the first 180 characters to generate the preview image and the description.
One issue I’ve noticed with using this template is that my homepage becomes sluggish from pulling a full-sized image from each of my webpages for each of the preview cards. I’ve looked into using Hugo’s image processing to generate preview images that are smaller to fix the issue (and also to generate images with a consistant size for all of my individual web pages), but I will probably wait until I redesign my site as all of my currently all my images for the site are dumped in the static folder. I’ve mitigated the speed issue of my home page by making the loading="lazy" for the preview images and by making sure that when I make new articles that the images I use are not too large..
Below is also the CSS I used to display the generated preview cards. A goal I had was to make the preview cards look good on both desktop and mobile, so I use the min-width css propertly to switch from showing three preview cards side-by-side (for desktop) to showing a single preview card that takes up the entire width of the screen (for mobile interfaces). I spent a lot of time with the css fiddling around with the parameters to make the preview cards look nice.
