Earlier this evening, I decided to invest a little bit of time on the web design of this very site.
While I don’t aim to have this site win any Awwwards any time soon, I do want it to look like it was made in the last decade at least.
Looking at what I could improve, the highest yield section to tackle on this very tiny site seemed to be the Recent Posts section on the home page.
The entries were too wide and ugly. And there were no images.
I figured it would be a quick win to spend some time on some basic PHP, HTML, and CSS to tidy this section up a bit.
And it was. But there were a few hitches.
No control over setting the markup
The first is in the markup of the thumbnail. I was surprised that the get_the_post_thumbnail WordPress function actually returns a fully formed HTML img with classes and other attributes set.
This is pretty convenient in one sense, since there’s less markup to define myself.
But the element is set with width and height attributes whose values come from the dimensions of the image. So it loads much bigger than I’d like for a thumbnail.
Too quick to turn to JavaScript
Perhaps it comes from a masochistic streak (I am a web developer by choice, after all), but I was way too hasty to look to JavaScript solve my problems. After writing it for two years, you’d think I would have learned my lesson by now.
Set max-width: 300px; on the element was my first thought. And if I had simply just remembered that height: auto; is a thing, I wouldn’t be sitting here writing this blog post. My little chunk of dev work would have been done, and I would have gone about my day.
But I didn’t remember that.
For whatever reason, my next idea was that I need to remove the height attribute from the element, so that the height would be set to auto by the browser.
Reading myself type that is making me want to slap myself.
So this was the code I came up with:
<style> img { max-width: 300px; }</style>
<script>
(function () {
const thumbnails = document.querySelectorAll('.home a > img');
for (thumbnail of thumbnails) {
thumbnail.removeAttribute('height');
}
})();
</script>
This actually worked, until I saved the files on my hosting server. Because it’s shared hosting, it’s a little slower. So the user can see the JavaScript changing the height of the images.
And it looked horrible. So I changed it to this:
<style> img { max-width: 300px; display:none; }</style>
<script>
(async function () {
const thumbnails = document.querySelectorAll('.home a > img');
for (thumbnail of thumbnails) {
thumbnail.removeAttribute('height');
await (thumbnail.style.display = unset);
}
})();
</script>
Unfortunately, this works. The script waits until the img has had its height attribute removed by the line above, and then unsets the display: none; set in the CSS. Disgusting, but acceptable.
One more line of CSS was all I needed
It wasn’t until I started writing this blog post that it occurred to me that I can actually just write height: auto; myself and remove the need for any of these absurd code gymnastics.
Why I didn’t think of it when writing my max-width: 300px; will forever be a mystery to me.
My optimistic side likes to think that next time, I’ll be more inclined to think about what I can do with CSS for a second or two longer before jumping into a wild implementation like this.
But maybe that’s the silly goose in me at work again.