Steampunk Fairy Tales: Volume 3 now available!

Read about it »

Design Thumbnails Using Imagemagick

To make the site more appealing, I started playing with imagemagick to generate eye-catching thumbnails. Our site still has a long way to go, but I prefer to make small improvements over time to holding up our site (and our writing) for a massive redesign.

The blue borders around thumbnails were an indicator that you can click the image to go to the article, but it feels heavy. It also clashes against images with certain palettes.

 

 

Additionally, thumbnails in our blog articles had the default bootstrap border around them, which felt inconsistent with the rest of the site.

 

 

 

 

Here’s a few more before-and-afters:

 

 

 

 

 

 

I wrote a script that uses a few basic imagemagick commands to resize, tilt, and add a frame:

convert $BigFileName -resize x200 $FileName

convert $FileName -background $Color -gravity SouthEast -extent {$Width}x{$Height} $FileName

convert $FileName -bordercolor $Color -border $BorderSize $FileName $FileName

convert $FileName -rotate $Degrees $FileName

The script automatically generates the thumbnails for new articles, so it’s hands-off. Remember, image thumbnails should be a smaller image – if you just scale down the picture using HTML or CSS then your page will load slowly.

Eventually, I’d like to move toward a more steampunk aesthetic, but that will come in time.

 
Related Articles

Blog Design Tweaks
I’m not a designer. Not even close. So when I built this site, I just used bootstrap, kept it simple, and focused on functionality over aesthetic. But it’s time to make a few changes. I’m not sure how much these changes will impact viewers, but I hope sharing this information will help you scrutinize your own blog. Read on

 

 


Blog Redesign
I just tweaked the design a few days ago, but I had some ideas while on the treadmill. Remember, I’m not a designer and I want to invest most of my time on writing. Read on
 
Random Articles

Sprint 5: Deprioritizing and Scope Creep
I’m a little late with writing this sprint article because Leslie and I have been tied up with promoting Dream Eater’s Carnival using our KDP free days. But, it’s time to talk about how we did in April and what we will strive for in May. This article is focused on deprioritizing tasks and dealing with “scope creep.” Read on

 


Curing The “I’ve Read My Manuscript Too Many Times” Blues
We’ve been editing and re-reading our manuscript for days now. Leslie is a machine; she can pour over the same words all day, every day, and make significant improvements. I, however, am weak. I’ve had a hard time contributing lately because all I see are negatives. But, this morning, I found a way to cure it. Read on