DEV Community

Cover image for i made a quick blog cover generator
アッシャー
アッシャー

Posted on

i made a quick blog cover generator

  • so i love the minimalism and bright colors, combine those and you get simple covers like these, i made this is canva at first..

1


2


  • this is kinda perfect for me right now, yet I as any other developer thought "is automating this an option??"🤓
  • so my plan here was simple, to make these simple little covers without manual labor, in the first rendition of this i even wanted to add some stickers related to any tags i provided and then display them in bottom right corner, but decided against it cause i got bored trying to handle the subproblems that came with automating sticker download from the internet, yet more on this later.

before we start look at this cool monkey i found:
3

  • so i put out for dimensions of 1600x800 in my mind, which is generally used by most blog sites.
  • initially i set out to make it a cli only thing, yet decided against it, so if in future i want some new changes without making this again.
  • ohhh yes one cool "app" thing this has is, it will automatically translate your sub-title to japanese giving you that aesthetic yet clean look in the cover.

how it works:

  • it uses tkinter as it's GUI library duhh
  • the "fun" part is the image generation and the automatic translation yk, for this it uses PIL or Python Imaging Library more specifically Image, ImageDraw, ImageFont modules.
  • for translation part of that subtitle it was a bit tricky, yet it found a package named googletrans which works flawlessly.
  • it uses two fonts, one called opensans-light for title, and other called notosansjp for japanese subtitle.
  • now as i told before, i wanted it to work with emoji's yet it didn't cause i had tons of these things called an:
    4

  • ill later try getting this text generation and emojis working cause i made this project long time ago and kinda yk forgot..🤦‍♂️

  • yet so, this was a great side-side project, made me focus on python after a long time again.

code:

#actually works version

import tkinter as tk
from tkinter import messagebox
from PIL import Image, ImageDraw, ImageFont
from googletrans import Translator

def translate_to_japanese(text):
    translator = Translator()
    result = translator.translate(text, src='en', dest='ja')
    return result.text

def create_blog_cover(title, subtitle):
    # Image settings
    width, height = 1600, 840
    background_color = "#fffb29"
    font_path = "./fonts/OpenSans-Light.ttf"  # Replace with the path to your font
    font_jp = "./fonts/NotoSansJP-VariableFont_wght.ttf"  # Replace with the path to your Japanese font
    font_size_title = 140  # Increased font size for title
    font_size_subtitle = 80  # Increased font size for subtitle
    vertical_margin = 40

    # Create image with background color
    img = Image.new("RGBA", (width, height), background_color)
    draw = ImageDraw.Draw(img)

    # Load fonts
    title_font = ImageFont.truetype(font_path, font_size_title)
    subtitle_font = ImageFont.truetype(font_jp, font_size_subtitle)

    # Get English and Japanese subtitles
    translated_subtitle = translate_to_japanese(subtitle)

    # Get text bounding boxes
    title_bbox = draw.textbbox((0, 0), title, font=title_font)
    subtitle_bbox = draw.textbbox((0, 0), translated_subtitle, font=subtitle_font)

    # Extract width and height from bounding boxes
    title_width = title_bbox[2] - title_bbox[0]
    title_height = title_bbox[3] - title_bbox[1]
    subtitle_width = subtitle_bbox[2] - subtitle_bbox[0]
    subtitle_height = subtitle_bbox[3] - subtitle_bbox[1]

    # Calculate text positions
    title_x = (width - title_width) / 2
    title_y = (height - title_height - subtitle_height - 20 - vertical_margin) / 2  # Center vertically
    subtitle_x = (width - subtitle_width) / 2
    subtitle_y = title_y + title_height + 20 + vertical_margin

    # Draw text on image
    draw.text((title_x, title_y), title, font=title_font, fill="black")
    draw.text((subtitle_x, subtitle_y), translated_subtitle, font=subtitle_font, fill="black")

    # Save image
    output_path = f"./output/{title.replace(' ', '_')}_cover.png"
    img.save(output_path, "PNG")
    print(f"Cover image saved as {output_path}")

def generate_cover():
    title = title_entry.get()
    subtitle = subtitle_entry.get()
    create_blog_cover(title, subtitle)
    messagebox.showinfo("Cover Generated", "Cover image generated successfully!")

# Create a Tkinter window
root = tk.Tk()
root.title("Blog Cover Generator")

# Title label and entry
title_label = tk.Label(root, text="Enter the title:")
title_label.pack()
title_entry = tk.Entry(root, width=50)
title_entry.pack()

# Subtitle label and entry
subtitle_label = tk.Label(root, text="Enter the subtitle:")
subtitle_label.pack()
subtitle_entry = tk.Entry(root, width=50)
subtitle_entry.pack()

# Generate button
generate_button = tk.Button(root, text="Generate Cover", command=generate_cover)
generate_button.pack()

# Run the Tkinter main loop
root.mainloop()

Enter fullscreen mode Exit fullscreen mode
  • make sure to have /fonts [add both fonts .ttf files previously mentioned] and /output in your root dir something like:
root-dir:
   --app.py
   --/output
   --/fonts
Enter fullscreen mode Exit fullscreen mode

yooo bye have a great day i guess 🤠

5

Top comments (0)