Banner Creator

{
  "name": "banner-creator",
  "version": "1.0.0",
  "description": "Create banners using AI image generation. Discuss format/style, generate variations, iterate with user feedback, crop to target ratio for GitHub, Twitter, LinkedIn, etc.",
  "author": {
    "name": "ReScienceLab"
  },
  "homepage": "https://github.com/ReScienceLab/opc-skills/tree/main/skills/banner-creator",
  "repository": "https://github.com/ReScienceLab/opc-skills",
  "license": "MIT",
  "keywords": [
    "banner",
    "header",
    "hero image",
    "cover image",
    "create banner",
    "github banner",
    "twitter header",
    "readme banner"
  ],
  "skills": [
    "./SKILL.md"
  ],
  "commands": [
    "./scripts/"
  ]
}

#!/usr/bin/env python3
"""
Crop banner to target aspect ratio.

Usage:
    python crop_banner.py input.png output.png --ratio 2:1 --width 1280
    python crop_banner.py input.png output.png --ratio 16:9
    python crop_banner.py input.png output.png --size 1500x500
"""

import argparse
import sys
from PIL import Image


def parse_ratio(ratio_str: str) -> tuple[int, int]:
    """Parse ratio string like '2:1' or '16:9' into (width, height) parts."""
    parts = ratio_str.split(':')
    if len(parts) != 2:
        raise ValueError(f"Invalid ratio format: {ratio_str}. Use format like '2:1' or '16:9'")
    return int(parts[0]), int(parts[1])


def parse_size(size_str: str) -> tuple[int, int]:
    """Parse size string like '1280x640' into (width, height)."""
    parts = size_str.lower().split('x')
    if len(parts) != 2:
        raise ValueError(f"Invalid size format: {size_str}. Use format like '1280x640'")
    return int(parts[0]), int(parts[1])


def crop_to_ratio(img: Image.Image, target_ratio: tuple[int, int]) -> Image.Image:
    """Crop image to target aspect ratio, centered."""
    orig_width, orig_height = img.size
    target_w, target_h = target_ratio
    
    target_aspect = target_w / target_h
    orig_aspect = orig_width / orig_height
    
    if orig_aspect > target_aspect:
        # Image is wider than target, crop width
        new_width = int(orig_height * target_aspect)
        new_height = orig_height
        left = (orig_width - new_width) // 2
        top = 0
    else:
        # Image is taller than target, crop height
        new_width = orig_width
        new_height = int(orig_width / target_aspect)
        left = 0
        top = (orig_height - new_height) // 2
    
    right = left + new_width
    bottom = top + new_height
    
    return img.crop((left, top, right, bottom))


def main():
    parser = argparse.ArgumentParser(description='Crop banner to target aspect ratio')
    parser.add_argument('input', help='Input image path')
    parser.add_argument('output', help='Output image path')
    parser.add_argument('--ratio', '-r', help='Target aspect ratio (e.g., 2:1, 16:9)')
    parser.add_argument('--size', '-s', help='Target size (e.g., 1280x640)')
    parser.add_argument('--width', '-w', type=int, help='Target width (maintains ratio)')
    parser.add_argument('--height', type=int, help='Target height (maintains ratio)')
    
    args = parser.parse_args()
    
    if not args.ratio and not args.size:
        print("Error: Must specify --ratio or --size", file=sys.stderr)
        sys.exit(1)
    
    try:
        img = Image.open(args.input)
        print(f"Input: {img.size[0]}x{img.size[1]}")
        
        if args.size:
            target_w, target_h = parse_size(args.size)
            target_ratio = (target_w, target_h)
        else:
            target_ratio = parse_ratio(args.ratio)
            target_w, target_h = None, None
        
        # Crop to ratio
        cropped = crop_to_ratio(img, target_ratio)
        print(f"Cropped: {cropped.size[0]}x{cropped.size[1]}")
        
        # Resize if target dimensions specified
        if args.size:
            cropped = cropped.resize((target_w, target_h), Image.Resampling.LANCZOS)
            print(f"Resized: {cropped.size[0]}x{cropped.size[1]}")
        elif args.width:
            ratio = args.width / cropped.size[0]
            new_height = int(cropped.size[1] * ratio)
            cropped = cropped.resize((args.width, new_height), Image.Resampling.LANCZOS)
            print(f"Resized: {cropped.size[0]}x{cropped.size[1]}")
        elif args.height:
            ratio = args.height / cropped.size[1]
            new_width = int(cropped.size[0] * ratio)
            cropped = cropped.resize((new_width, args.height), Image.Resampling.LANCZOS)
            print(f"Resized: {cropped.size[0]}x{cropped.size[1]}")
        
        cropped.save(args.output)
        print(f"Saved: {args.output}")
        
    except Exception as e:
        print(f"Error: {e}", file=sys.stderr)
        sys.exit(1)


if __name__ == '__main__':
    main()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Banner Preview</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #1a1a1a;
      color: #fff;
      padding: 20px;
    }
    h1 {
      text-align: center;
      margin-bottom: 20px;
      font-weight: 300;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      max-width: 1600px;
      margin: 0 auto;
    }
    .card {
      background: #2a2a2a;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    .card img {
      width: 100%;
      height: auto;
      display: block;
    }
    .card-info {
      padding: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card-number {
      font-size: 14px;
      font-weight: 600;
      color: #888;
    }
    .card-fav {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      opacity: 0.3;
      transition: opacity 0.2s;
    }
    .card-fav:hover, .card-fav.active {
      opacity: 1;
    }
    
    /* Modal */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.95);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      padding: 40px;
    }
    .modal.active { display: flex; }
    .modal img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .modal-close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      opacity: 0.7;
    }
    .modal-close:hover { opacity: 1; }
    .modal-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 60px;
      color: #fff;
      cursor: pointer;
      opacity: 0.5;
      user-select: none;
    }
    .modal-nav:hover { opacity: 1; }
    .modal-prev { left: 20px; }
    .modal-next { right: 20px; }
    .modal-info {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.8);
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 14px;
    }
    
    /* Favorites summary */
    .favorites {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #333;
      padding: 16px 20px;
      border-radius: 8px;
      max-width: 300px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .favorites h3 {
      font-size: 14px;
      margin-bottom: 8px;
      color: #888;
    }
    .favorites-list {
      font-size: 16px;
      font-weight: 600;
    }
    .favorites:empty { display: none; }
    
    @media (max-width: 1200px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <h1>Banner Variations</h1>
  
  <div class="grid" id="grid"></div>
  
  <div class="modal" id="modal">
    <span class="modal-close" onclick="closeModal()">&times;</span>
    <span class="modal-nav modal-prev" onclick="navModal(-1)">&#8249;</span>
    <img id="modal-img" src="" alt="">
    <span class="modal-nav modal-next" onclick="navModal(1)">&#8250;</span>
    <div class="modal-info" id="modal-info"></div>
  </div>
  
  <div class="favorites" id="favorites"></div>

  <script>
    // Configuration - UPDATE THIS
    const BANNER_COUNT = 20;
    const BANNER_PREFIX = 'banner-';
    const BANNER_EXT = '.png';
    
    let currentIndex = 0;
    let favorites = new Set();
    
    function init() {
      const grid = document.getElementById('grid');
      
      for (let i = 1; i <= BANNER_COUNT; i++) {
        const num = String(i).padStart(2, '0');
        const filename = `${BANNER_PREFIX}${num}${BANNER_EXT}`;
        
        const card = document.createElement('div');
        card.className = 'card';
        card.innerHTML = `
          <img src="${filename}" alt="Banner ${num}" onclick="openModal(${i-1})">
          <div class="card-info">
            <span class="card-number">#${num}</span>
            <button class="card-fav" onclick="toggleFav(${i}, event)">★</button>
          </div>
        `;
        grid.appendChild(card);
      }
    }
    
    function openModal(index) {
      currentIndex = index;
      updateModal();
      document.getElementById('modal').classList.add('active');
      document.body.style.overflow = 'hidden';
    }
    
    function closeModal() {
      document.getElementById('modal').classList.remove('active');
      document.body.style.overflow = '';
    }
    
    function navModal(dir) {
      currentIndex = (currentIndex + dir + BANNER_COUNT) % BANNER_COUNT;
      updateModal();
    }
    
    function updateModal() {
      const num = String(currentIndex + 1).padStart(2, '0');
      const filename = `${BANNER_PREFIX}${num}${BANNER_EXT}`;
      document.getElementById('modal-img').src = filename;
      document.getElementById('modal-info').textContent = `Banner #${num}`;
    }
    
    function toggleFav(num, event) {
      event.stopPropagation();
      const btn = event.target;
      if (favorites.has(num)) {
        favorites.delete(num);
        btn.classList.remove('active');
      } else {
        favorites.add(num);
        btn.classList.add('active');
      }
      updateFavorites();
    }
    
    function updateFavorites() {
      const el = document.getElementById('favorites');
      if (favorites.size === 0) {
        el.innerHTML = '';
      } else {
        const nums = Array.from(favorites).sort((a,b) => a-b).map(n => `#${String(n).padStart(2,'0')}`);
        el.innerHTML = `<h3>Favorites</h3><div class="favorites-list">${nums.join(', ')}</div>`;
      }
    }
    
    document.addEventListener('keydown', (e) => {
      if (!document.getElementById('modal').classList.contains('active')) return;
      if (e.key === 'Escape') closeModal();
      if (e.key === 'ArrowLeft') navModal(-1);
      if (e.key === 'ArrowRight') navModal(1);
    });
    
    init();
  </script>
</body>
</html>