skills.rest
artreimus
artreimusCOMMUNITY
Explore all skills by this author →
𝕏@artreimusGitHub

blog-image-cropper

Crop source images into Ylang Labs blog card and header PNG assets.

Updated Nov 1, 2024
Search Tags:#composition#aspect ratio#image cropping#blog artwork#png resizing#thumbnail prep#Ylang Labs
One-click install
npx skills add https://github.com/artreimus/ylang-labs-blog --skill blog-image-cropper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blog-image-cropper
Source: https://github.com/artreimus/ylang-labs-blog/tree/main/.agents/skills/blog-image-cropper
Command: npx skills add https://github.com/artreimus/ylang-labs-blog --skill blog-image-cropper

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of turning a source image into Ylang Labs blog artwork that fits required dimensions without awkward or story-breaking crops.

Core Features & Use Cases

  • Targeted Cropping for Two Formats: Produces a portrait card image (1080x1920) and a wide banner header (1260x700) from the same source.
  • Visual-First Composition: Inspects the image to choose the best focal crop for each aspect ratio instead of blindly center-cropping.
  • Path- and Filename-Accurate Outputs: Writes outputs to public/static/images/blogs/[slug]/ with exact filenames expected by blog frontmatter.
  • Source-Aware Fallback to Artwork Generation: If no source artwork is provided, prompts the oil-painting source artwork before cropping so the final card and header match house style.

Quick Start

Use blog-image-cropper to crop your provided image into public/static/images/blogs/[slug]/cardImage.png (1080x1920) and public/static/images/blogs/[slug]/blogHeader.png (1260x700) with visually chosen focal crops.

Frequently Asked Questions about blog-image-cropper

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I crop images for blog cards and headers without breaking the composition?▼

Image cropping for blog artwork requires visual analysis to pick appropriate crop regions per aspect ratio, ensuring focal points stay intact rather than blindly center-cropping. This Skill inspects the source image to choose the best focal crop for each required dimension.

What dimensions do I need for blog card images and header banners?▼

Blog artwork requires a portrait card image at 1080x1920 and a wide banner header at 1260x700. These exact PNG dimensions are saved as cardImage.png and blogHeader.png under the blog slug image directory.

How do I prepare PNG thumbnails for blog posts in the correct directory structure?▼

To prepare blog thumbnails, the source image is cropped and saved to public/static/images/blogs/[slug]/ with the exact filenames expected by blog frontmatter, producing cardImage.png and blogHeader.png in the required dimensions.

Can I use an image cropper if I don't have source artwork ready?▼

If no source artwork is provided, the process falls back to prompting an oil-painting source artwork generation before cropping, so the final card and header assets still match the house style.

Does center-cropping work for creating blog header banners from portrait images?▼

Center-cropping often produces awkward or story-breaking crops when converting portrait images to wide banner headers. Visual-first composition inspects the image to choose the best focal crop region per aspect ratio instead of relying on blind center-cropping.

Why do my blog images look stretched when I resize them for different aspect ratios?▼

Stretching happens when a single resize is applied across different aspect ratios instead of visually choosing crop regions. Analyzing the image first allows appropriate focal crops for both the portrait card and wide header formats independently.

Related Skills

Explore More Design & Creative Skills→
testomatiotestomatio
63

image-processing

Apply borders and shadows to screenshots, create GIFs from videos, and resize images.

Official
Advanced
tc9011tc9011

blog-to-wechat-pipeline

Translate blog articles into Chinese and format them for WeChat publishing.

Community
Advanced
miethemiethe

nano-banana

Generate AI images from prompts, reference images, and size controls.

Community
Advanced
cafe3310cafe3310
248

wx-emoji-maker

Convert PNG image collections into standardized 240x240 pixel WeChat sticker assets.

Community
Intermediate