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

blog-logo-watermark

Add Ylang Labs logo watermarks to blog artwork images without resizing or cropping.

Updated Nov 1, 2024
Search Tags:#brand assets#blog publishing#watermarking#logo placement#image compositing#contrast-aware
One-click install
npx skills add https://github.com/artreimus/ylang-labs-blog --skill blog-logo-watermark
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blog-logo-watermark
Source: https://github.com/artreimus/ylang-labs-blog/tree/main/.agents/skills/blog-logo-watermark
Command: npx skills add https://github.com/artreimus/ylang-labs-blog --skill blog-logo-watermark

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill prevents inconsistent branding by automatically adding the Ylang Labs logo watermark to your blog artwork while preserving the original image framing and dimensions.

Core Features & Use Cases

  • Contrast-aware logo color selection: Automatically chooses black or white for readable watermark contrast against the local background (or forces a specific color).
  • Safe, non-destructive workflow: Supports in-place or output-to-new-file watermarking and keeps dimensions unchanged; creates a local unwatermarked backup when overwriting source images.
  • Works on standard blog assets: Applies the watermark to both source-image.png and blogHeader.png for a given blog slug when both exist.
  • Placement and sizing controls: Lets you choose corner placement (lower-left/right, upper-left/right) and tune scale, margin, and opacity.

Quick Start

Use this skill to watermark a blog’s images in public/static/images/blogs/<slug>/source-image.png and public/static/images/blogs/<slug>/blogHeader.png using the default lower-right, auto black/white logo choice, with an untracked source-image-no-watermark.png backup created when overwriting the source image.

Frequently Asked Questions about blog-logo-watermark

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

FAQPage Schema
How do I add a logo watermark to blog images without resizing or cropping the original?▼

To add a logo watermark to blog images without resizing or cropping, this Skill composites the correct logo PNG onto your specified source assets while preserving the original image framing and dimensions. It validates input parameters like corner, scale, margin, and opacity.

What is contrast-aware watermarking and how does it choose logo color?▼

Contrast-aware watermarking automatically selects either a black or white logo to ensure readable watermark contrast against the local background. You can also optionally force a specific logo color rather than relying on the automatic contrast selection.

Can I overwrite source images with watermarks and still keep an unwatermarked backup?▼

Yes, you can overwrite source images with watermarks while keeping an unwatermarked backup. The non-destructive workflow creates a local unwatermarked backup file named `source-image-no-watermark.png` when overwriting the original source image in place.

Does the sharp library support applying watermarks to both source-image.png and blogHeader.png?▼

Yes, using the sharp library, this Skill applies watermarks to both `source-image.png` and `blogHeader.png` for a given blog slug. It composites the correct logo PNG onto both standard blog assets when they exist in the specified directory.

What are the placement and sizing options for watermarking blog artwork?▼

Placement and sizing options for watermarking blog artwork include choosing corner placement (lower-left/right, upper-left/right) and tuning scale, margin, and opacity. The default setting uses lower-right placement with automatic black or white logo color selection.

Related Skills

Explore More Design & Creative Skills→
artreimusartreimus

blog-image-cropper

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

Community
Intermediate
Cao-RCao-R

image-generation

Generate images from text descriptions using the z-ai-web-dev-sdk.

Community
Advanced
datamonsterrdatamonsterr

image-processing

Automate image resizing, format conversion, and trimming with Python and Pillow.

Community
Intermediate
JosiahSiegelJosiahSiegel
51

ffmpeg-shapes-graphics

Generate and apply shapes, text, and image overlays to videos with FFmpeg.

Community
Intermediate