DEV Community

Cover image for Create Perfectly Sized Cover Images for Dev.to
Jeremy Grifski
Jeremy Grifski

Posted on

Create Perfectly Sized Cover Images for Dev.to

As a heads up, I'm making this post as a plug for my Image Titler tool that I've been developing in my spare time for a little over a year now:

GitHub logo TheRenegadeCoder / image-titler

An image title generator using The Renegade Coder style

Image Titler

Discord

The Image Titler is a tool which provides options for generating thumbnails for various social media platforms Currently, the tool has a predefined style which looks roughly like the following image:

23 Tech Topics to Tackle

To see more examples, check out our list of samples.

How to Run

The following code snippet demonstrates a few ways you might use the script:

pip install image-titler # Installs the script
image-titler # Runs as default
image-titler --title "Hello, World!"  # Adds a custom title
image-titler --output_path "path/to/output"  # Sets the output path
image-titler --path "path/to/image"  # Sets the image path
image-titler --tier "free"  # Sets the membership tier which changes the rectangle borders
image-titler --logo_path "path/to/logo"  # Adds a 145x145 logo to the lower left corner of the image
image-titler --batch  # Runs the program in batch mode on a directory
image-titler --font 
Enter fullscreen mode Exit fullscreen mode

Basically, it's a Python tool for generating cover images with titles on them. I originally developed it to speed up the process of creating featured images for my own website, but now I'm trying to get it in front of a larger audience.

To do that, I recently added a feature in v2.3.2 that automatically resizes and crops images for the dev.to platform (1000x420). Here's a demo of the GUI using the image from this article:

Image Titler 2.3.2 DEV Demo

If you're interested in using this tool yourself, grab the latest version of Python (3.8+) and run the following commands:

pip install image-titler
image-titler-gui
Enter fullscreen mode Exit fullscreen mode

That'll launch up this tool, so you can begin making your own cover images. When you're done, feel free to let me know what you think!

Top comments (6)

Collapse
 
defufna profile image
Ivan Savu • Edited

It's a bad idea to align text to the right edge of the image because the og:image dev.to generates from the header image will be cropped. Anything after 840px will be cropped. Here's how it looks for this article

Image description

Collapse
 
renegadecoder94 profile image
Jeremy Grifski

That's true! I will say that this seems more like an issue on DEV's side of things. Even official DEV team folks have images with the same issues: dev.to/devteam/announcing-the-gith...

Collapse
 
shostarsson profile image
Rémi Lavedrine

It's a great tool and an elegant solution to a problem you encounter frequently when you are posting content on a regular basis.
I personally developed an Automator script on MacOS to do just that.

You can watermark an image file, with rotation effect if you want to and resize the image. You can add this as a right-click option for images on your File Explorer.
But it is Mac only.

Collapse
 
lewiskori profile image
Lewis kori • Edited

Thanks I'll try this out. I just finished version 2 of my website today! and was in the market for such a tool for my new content. Thanks.

Collapse
 
renegadecoder94 profile image
Jeremy Grifski

Let me know if there are any features you’d like this to support!

Collapse
 
promode profile image
Pramod Dutta

Wow, Really helpful