Baoyu Cover Image

Baoyu Cover Image is a community skill for generating cover images and social media cards for articles and content, covering title overlay rendering, brand template application, gradient and pattern backgrounds, multi-platform sizing, and automated cover generation pipelines.

What Is This?

Overview

Baoyu Cover Image provides patterns for automatically generating cover images from article metadata. It covers title overlay rendering that places article titles on background images with proper typography and contrast, brand template application that applies consistent logos, colors, and layouts to generated covers, gradient and pattern backgrounds that create visually appealing bases without stock photography, multi-platform sizing that generates covers for Open Graph, Twitter cards, and other social formats, and automated pipelines that generate covers as part of content publishing workflows. The skill enables content teams to produce branded cover images at publishing scale.

Who Should Use This

This skill serves content publishers needing cover images for every article across social platforms, blog teams generating Open Graph images for link previews, and marketing teams maintaining consistent branded covers across campaigns.

Why Use It?

Problems It Solves

Creating unique cover images for each article requires design time that bottlenecks publishing. Stock photos produce generic covers that lack brand identity. Different social platforms require different image dimensions for optimal display. Manual cover creation leads to inconsistent branding across articles.

Core Highlights

Title renderer places text with automatic sizing, wrapping, and contrast adjustment. Template engine applies brand colors, logos, and layouts consistently. Background generator creates gradients, patterns, and abstract visuals. Multi-size exporter produces covers for all required platform dimensions.

How to Use It?

Basic Usage

from PIL import Image,\
  ImageDraw, ImageFont

class CoverGenerator:
  SIZES = {
    'og': (1200, 630),
    'twitter': (1200, 600),
    'square': (1080, 1080),
  }

  def __init__(
    self,
    font_path: str,
    brand_color: str
      = '#1a1a2e'
  ):
    self.font_path =\
      font_path
    self.brand_color =\
      brand_color

  def generate(
    self,
    title: str,
    subtitle: str = '',
    size_key: str = 'og'
  ) -> Image.Image:
    w, h = self.SIZES[
      size_key]
    img = Image.new(
      'RGB', (w, h),
      self.brand_color)
    draw = ImageDraw.Draw(
      img)

    # Title text
    title_font =\
      ImageFont.truetype(
        self.font_path, 64)
    self._draw_wrapped(
      draw, title,
      title_font,
      (60, h // 3),
      w - 120, 'white')

    # Subtitle
    if subtitle:
      sub_font =\
        ImageFont.truetype(
          self.font_path, 32)
      draw.text(
        (60, h - 80),
        subtitle,
        fill='#cccccc',
        font=sub_font)
    return img

  def _draw_wrapped(
    self, draw, text,
    font, pos,
    max_width, fill
  ):
    words = text.split()
    lines, line = [], ''
    for word in words:
      test = f'{line} {word}'\
        .strip()
      bbox = font.getbbox(
        test)
      if bbox[2] > max_width:
        lines.append(line)
        line = word
      else:
        line = test
    lines.append(line)
    y = pos[1]
    for ln in lines:
      draw.text(
        (pos[0], y), ln,
        fill=fill, font=font)
      y += font.size + 10

Real-World Examples

from PIL import Image
import numpy as np

def gradient_background(
  width: int,
  height: int,
  color_start: tuple,
  color_end: tuple
) -> Image.Image:
  arr = np.zeros(
    (height, width, 3),
    dtype=np.uint8)
  for i in range(3):
    arr[:, :, i] =\
      np.linspace(
        color_start[i],
        color_end[i],
        height,
        dtype=np.uint8
      )[:, np.newaxis]
  return Image.fromarray(arr)

bg = gradient_background(
  1200, 630,
  (26, 26, 46),
  (22, 72, 99))

Advanced Tips

Use category-specific gradient color pairs to visually differentiate content topics while maintaining brand consistency. Add a semi-transparent overlay when placing text on photographic backgrounds to ensure readability. Generate covers at 2x resolution for retina displays and downscale for standard sizes.

When to Use It?

Use Cases

Generate Open Graph cover images for a blog that publishes daily articles. Create branded social media cards for a newsletter sharing platform. Build a CMS plugin that auto-generates covers when articles are saved.

Related Topics

Cover image generation, Open Graph images, social media cards, brand design, and content automation.

Important Notes

Requirements

Pillow library for image creation and text rendering. Font files in TTF or OTF format for typography. Brand guidelines defining colors, fonts, and logo placement.

Usage Recommendations

Do: test generated covers across platforms to verify text is not cropped by different preview sizes. Use high-contrast text colors against the background for readability. Generate multiple platform sizes from a single generation call.

Don't: place important text near image edges where platforms may crop. Use very long titles without implementing text wrapping or truncation. Rely on small font sizes that become unreadable in social media thumbnail previews.

Limitations

Text rendering with Pillow supports basic typography but lacks advanced features like kerning and ligatures. Generated covers cannot match the quality of custom graphic design for flagship content. Font licensing must be verified for use in generated image assets.