diff --git a/skills/cloudinary-transformations/SKILL.md b/skills/cloudinary-transformations/SKILL.md index 12d7a15..1b35ebe 100644 --- a/skills/cloudinary-transformations/SKILL.md +++ b/skills/cloudinary-transformations/SKILL.md @@ -4,7 +4,7 @@ description: Create and debug Cloudinary transformation URLs from natural langua license: MIT metadata: author: cloudinary - version: '1.0.3' + version: '1.0.4' --- # Cloudinary Transformation Rules @@ -439,7 +439,8 @@ For complete syntax, arithmetic operations, nested conditionals, and real-world 7. ✅ **`g_auto` compatibility** (only works with `c_fill`, `c_lfill`, `c_crop`, `c_thumb`, `c_auto`) 8. ✅ **Background as qualifier** (use with pad crop: `b_color,c_pad,w_X`, not `/b_color/`) 9. ✅ **Format/quality at end** (prefer `f_auto/q_auto` as final components) -10. ✅ **Flags/parameters match the base asset type** (asset-type-specific syntax — e.g. video-only `fl_splice`, `du_`, `fps_`, `vc_` — often no-ops silently on the wrong base, in either direction; verify the output and check the reference when unsure — see [Asset Type Matters](#asset-type-matters-image-vs-video)) +10. ✅ **Flags/parameters match the base asset type** (asset-type-specific syntax — e.g. video-only `fl_splice`, `du_`, `fps_`, `vc_` — often no-ops silently on the wrong base, in either direction; verify the output and check the Asset Type Matters section above) +11. ✅ **Transformation parameters are valid** (don't make up any parameter names - check against [Transformation Reference](https://cloudinary.com/documentation/transformation_reference.md?install_source=skillspack&referrer=trans-skill)) **Quick syntax check:** - Commas separate parameters within a component: `c_fill,g_auto,w_400` @@ -495,9 +496,9 @@ fetch('https://res.cloudinary.com/demo/image/upload/w_abc/sample.jpg') - `Resource not found` - Asset doesn't exist or public ID is incorrect - `Transformation limit exceeded` - Account transformation quota reached -**Online tool:** Use the [X-Cld-Error Inspector](https://cloudinary.com/documentation/advanced_url_delivery_options?install_source=skillspack&referrer=trans-skill#x_cld_error_inspector_tool) to check any Cloudinary URL +**Online tool:** Use the [X-Cld-Error Inspector](https://cloudinary.com/documentation/advanced_url_delivery_options.md?install_source=skillspack&referrer=trans-skill#x_cld_error_inspector_tool) to check any Cloudinary URL -For more details, see [Error Handling](https://cloudinary.com/documentation/advanced_url_delivery_options?install_source=skillspack&referrer=trans-skill#error_handling) +For more details, see [Error Handling](https://cloudinary.com/documentation/advanced_url_delivery_options.md?install_source=skillspack&referrer=trans-skill#error_handling) ## Transformation Costs @@ -510,7 +511,7 @@ For complete cost details and cost reduction strategies, see [references/transfo ### Skill References (Progressive Disclosure) - [references/debugging.md](references/debugging.md) - Use when transformations return errors or unexpected results - [references/ai-transformations.md](references/ai-transformations.md) - Use when you need AI transformation prompt syntax, cost details, or complex AI combinations -- [references/video-transformations.md](references/video-transformations.md) - Use when working with video codecs, trimming strategies, or concatenation +- [references/video-transformations.md](references/video-transformations.md) - Use when working with video codecs, trimming strategies, concatenation, or creating animated images from videos - [references/advanced-features.md](references/advanced-features.md) - Use when building complex logic with variables, conditionals, or arithmetic - [references/responsive-images.md](references/responsive-images.md) - Use when implementing responsive images, configuring Client Hints, or using dpr_auto/w_auto - [references/transformation-costs.md](references/transformation-costs.md) - Use when optimizing for cost or explaining cost implications to users diff --git a/skills/cloudinary-transformations/references/debugging.md b/skills/cloudinary-transformations/references/debugging.md index 3528629..d593a44 100644 --- a/skills/cloudinary-transformations/references/debugging.md +++ b/skills/cloudinary-transformations/references/debugging.md @@ -32,7 +32,7 @@ crop_scale,width_400 c_scale,w_400 ``` -**Why:** Cloudinary uses abbreviated parameter names. Always check the [Transformation Reference](https://cloudinary.com/documentation/transformation_reference?install_source=skillspack&referrer=trans-skill). +**Why:** Cloudinary uses abbreviated parameter names. Always check the [Transformation Reference](https://cloudinary.com/documentation/transformation_reference.md?install_source=skillspack&referrer=trans-skill). ## Gravity Issues @@ -454,7 +454,7 @@ When a transformation doesn't work: - Slashes between components: `c_scale,w_400/f_auto/q_auto` 3. **Validate parameter names** - - Cross-reference with [Transformation Reference](https://cloudinary.com/documentation/transformation_reference?install_source=skillspack&referrer=trans-skill) + - Cross-reference with [Transformation Reference](https://cloudinary.com/documentation/transformation_reference.md?install_source=skillspack&referrer=trans-skill) - Check for typos and abbreviations 4. **Check action vs qualifier** diff --git a/skills/cloudinary-transformations/references/examples.md b/skills/cloudinary-transformations/references/examples.md index ffef4ca..ea8a8c9 100644 --- a/skills/cloudinary-transformations/references/examples.md +++ b/skills/cloudinary-transformations/references/examples.md @@ -677,7 +677,7 @@ Automatic quality with low setting for smaller files. ## DPR and Responsive -**Important:** `dpr_auto` and `w_auto` parameters only work on Chromium-based browsers (Chrome, Edge, Opera, Samsung Internet) with Client Hints enabled. They do NOT work inside named transformations. For broader browser support, see the [Responsive Images documentation](https://cloudinary.com/documentation/responsive_images?install_source=skillspack&referrer=trans-skill). +**Important:** `dpr_auto` and `w_auto` parameters only work on Chromium-based browsers (Chrome, Edge, Opera, Samsung Internet) with Client Hints enabled. They do NOT work inside named transformations. For broader browser support, see the [Responsive Images documentation](https://cloudinary.com/documentation/responsive_images.md?install_source=skillspack&referrer=trans-skill). ### Specific DPR ``` diff --git a/skills/cloudinary-transformations/references/named-transformations.md b/skills/cloudinary-transformations/references/named-transformations.md index 9290b99..ed5fc9e 100644 --- a/skills/cloudinary-transformations/references/named-transformations.md +++ b/skills/cloudinary-transformations/references/named-transformations.md @@ -57,8 +57,8 @@ Baseline transformations (`bl_`) cache the result of a nam - **Transformations with special transformation counts** (75-230 tx) that you need to reuse **Consider eagerly generating baselines:** -- On upload using the [upload method](https://cloudinary.com/documentation/image_upload_api_reference?install_source=skillspack&referrer=trans-skill#upload_method) or [upload preset](https://cloudinary.com/documentation/upload_presets?install_source=skillspack&referrer=trans-skill) -- For existing assets using the [explicit method](https://cloudinary.com/documentation/image_upload_api_reference?install_source=skillspack&referrer=trans-skill#explicit_method) +- On upload using the [upload method](https://cloudinary.com/documentation/image_upload_api_reference.md?install_source=skillspack&referrer=trans-skill#upload_method) or [upload preset](https://cloudinary.com/documentation/upload_presets.md?install_source=skillspack&referrer=trans-skill) +- For existing assets using the [explicit method](https://cloudinary.com/documentation/image_upload_api_reference.md?install_source=skillspack&referrer=trans-skill#explicit_method) ### Syntax diff --git a/skills/cloudinary-transformations/references/video-transformations.md b/skills/cloudinary-transformations/references/video-transformations.md index 1db566e..8063f7e 100644 --- a/skills/cloudinary-transformations/references/video-transformations.md +++ b/skills/cloudinary-transformations/references/video-transformations.md @@ -62,6 +62,29 @@ c_fill,h_300,w_450/du_5/fl_splice,l_video:second_clip/c_fill,h_300,w_450/du_5/fl **Important:** Both videos should be resized to matching dimensions before splicing +## Animated WebP from Video + +To deliver an animated WebP from a video, use **one** of these valid combinations: + +**Path A (simplest):** `f_auto:animated` — sufficient on its own; no extension or fl_ flags required. +``` +du_5/f_auto:animated/q_auto # First 5 seconds as animated WebP (or GIF where unsupported) +du_5/e_loop/f_auto:animated # Looping animated WebP +``` + +**Path B:** `fl_animated,fl_awebp` together, **plus** a WebP delivery signal (`f_webp`, `f_auto`, or `.webp` extension): +``` +du_5/fl_animated,fl_awebp/f_webp/q_auto # Animated WebP via fl_ flags + f_webp +du_5/e_loop/fl_animated,fl_awebp/f_auto # Looping, with f_auto as WebP signal +``` + +**WRONG — these do NOT produce animated WebP:** +- `fl_animated` alone (missing `fl_awebp`) +- `fl_animated,fl_awebp` with no format parameter and no `.webp` extension +- `f_auto` alone with a `.webp` extension (returns a still frame, not animated) + +**Additional controls:** `e_loop` makes it loop; `vs_N` controls frame sampling rate; `dl_N` controls frame delay (milliseconds). + ## Common Video Patterns ```