DEV Community

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

Posted on

1

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay