DEV Community: Sharon Yelenik

Managing Media Files in Flask (Images, Videos, and Audio)

Sharon Yelenik — Mon, 23 Mar 2026 19:07:00 +0000

You’re building an app for a small business or website, maybe a portfolio site or boutique store, and you know high-quality visuals are key for attracting buyers and showcasing your work. But without a designer on the team, you’re responsible for handling all the images and videos yourself.

So how do you manage a moderate amount of media files in the simplest and most efficient way?

In this blog post, we’ll unveil transformative techniques for managing media files in Flask with Cloudinary to make your life easier as a developer.

Benefits of Streamlined Media Management

Before we get into the practical steps, here some of the advantages of establishing a solid media management approach in your Flask application:

Less custom code and reduced storage complexity. Offloading large media files from your database or filesystem keeps your application simpler and avoids managing bulky binary data.
Reliable uploads that scale. A predictable upload flow prevents issues with file size limits, timeouts, or custom route handling, especially when users submit large images or videos.
Consistent, high-quality digital media. Automated tasks like resizing, compression, tagging, and background removal help keep your images and videos optimized without manual editing.
Optimized, searchable delivery. Well-structured metadata and scalable search make assets easier to find, while delivering the right size and format improves performance across devices.

By storing your digital media in Cloudinary instead of on your server or in your database, you can take advantage of these benefits immediately, while keeping your Flask codebase lightweight and focused on application logic.

Managing media files in Flask becomes much simpler with the steps we cover next (tap the icons to navigate to the related section):

Setup and Configuration

Before we dive into the specifics of media management with Python and Flask, you'll need to sign up for Cloudinary. It's quick and straightforward.

Installing and Configuring Cloudinary in Your Python/Flask App

To get started with Cloudinary in your Python/Flask app, follow these steps:

Install the Cloudinary Python library using pip install cloudinary.
Configure Cloudinary in your Flask application, typically inside app.py or a separate config.py file:

# config.py or app.py
import cloudinary
import cloudinary.uploader
import cloudinary.api

cloudinary.config(
    cloud_name="your_cloud_name",
    api_key="your_api_key",
    api_secret="your_api_secret"
)

Note: Replace your_cloud_name, your_api_key, and your_api_secret with your actual Cloudinary credentials, which you can find on the API keys page of the Console Settings.

If you're using a config.py, you'd load it in your Flask app like this:

from flask import Flask
import config  # or your preferred config structure

app = Flask(__name__)

With these steps, you've successfully integrated Cloudinary into your Flask project, and you're ready to leverage its powerful media management capabilities.

Enhanced Media Processing With Upload Presets

Upload presets in Cloudinary help you automate your media workflow by applying transformations, metadata rules, and upload behaviors the moment a file arrives. This means less processing in your Flask routes and far more consistent results across all your media.

In this article, we’ll focus on two powerful capabilities you can unlock through presets: automated transformations and auto-tagging. You can explore many other preset options in Cloudinary’s documentation, but these two alone can dramatically simplify your media pipeline.

Automating Transformation Settings

Upload presets allow you to automatically apply transformations such as resizing, cropping, recoloring, background removal, and more, without writing additional code in Flask. For example, you can create presets that remove backgrounds from uploaded logos, ensure all portfolio images are a consistent size, or sharpen older or lower-quality photos.

Each preset applies its rules automatically when the file is uploaded.

Tip: By applying the g_auto AI-powered transformation, you can ensure that crops preserve the important parts of your images and keep the main subject of your videos in focus.

By defining these settings once, every uploaded media file stays consistent and optimized with no manual editing or external image processing tools required.

Leveraging Auto-TaggingCopy link to this heading
If you enable auto-tagging through Cloudinary’s categorization engines, images are automatically analyzed and tagged based on their content. These tags can support a variety of downstream tasks, including:

organizing assets
improving searchability
enabling content discovery
powering filters in your UI or internal tools

For example, an image of a woman on a city street using a smartphone and carrying a bag might receive tags such as “woman,” “bag,” “mobile phone,” “purse,” or “car,” depending on the AI model you use.

Important: Important: To use auto-tagging, you’ll need to subscribe to one of Cloudinary’s auto-tagging add-ons. The examples in this blog use the Rekognition Auto Tagging add-on.

Red-haired woman in stylish outfit chatting on phone

Tip: Check out the Computer Vision Image Analysis for Your E-commerce Website demo to see Cloudinary in action, returning information about the content it identifies in your images.

Creating an Upload Preset

You can create an upload preset using the Cloudinary Admin API right from your Flask application or a setup script. Here’s an example using the Python SDK:

# Define the upload preset details
upload_preset_name = "my_preset"
upload_preset_options = {
    "unsigned": False,
    "folder": "my_folder",
    "tags": "my_tags",
    "transformation": [
        {"width": 500, "height": 500, "crop": "fill"},
        {"effect": "vignette"},
    ],
    "categorization": "aws_rek_tagging",
    "auto_tagging": 0.9
}

# Create the upload preset using the SDK
upload_preset = cloudinary.api.create_upload_preset(
    name=upload_preset_name,
    settings=upload_preset_options
)

# Check if the upload preset was created successfully
if upload_preset.get("name") == upload_preset_name:
    print("Upload preset created successfully.")
else:
    print("Failed to create upload preset.")

Once created, simply reference the preset name during upload, and all rules will apply automatically.

Uploading Media With Python and Flask

Uploading files is central to your Flask workflow, and Cloudinary provides two flexible methods: the Upload Widget for client-side uploads and server-side uploads from your Flask routes.

Let’s explore both.

Upload Widget

If your app accepts user-generated content (UGC), such as portfolio images from creators or product photos submitted by small business owners, the Cloudinary Upload Widget provides a smooth, reliable upload experience directly from the browser. You can attach any upload presets you’ve created so transformations, optimization, tagging, and other processing happen automatically on upload, without additional Flask code.

Tip: You can also create a preset that automatically moderates user-uploaded images and videos to help ensure that the content appearing on your site is appropriate.

Example Use Case

A portfolio gallery or a simple shop catalog where users can upload photos or videos is an ideal scenario for the Upload Widget. It handles the entire client-side upload flow, while your presets manage all media processing in the background.

How to Implement the Upload Widget in Flask

Create a route that renders the template:

# app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/upload-media")
def upload_media():
    return render_template("upload_media.html")

Create the template (templates/upload_media.html):

<!DOCTYPE html>
<html>
<head>
    <title>Media Upload</title>
</head>
<body>
    <button id="upload_widget" class="cloudinary-button">Upload files</button>

    <script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"></script>  

    <script type="text/javascript">  
        var myWidget = cloudinary.createUploadWidget({
            cloudName: 'my_cloud_name',
            uploadPreset: 'my_preset'
        }, (error, result) => {
            if (!error && result && result.event === "success") {
                const imageUrl = result.info.secure_url;
                console.log("Done! Here is the file info: ", result.info);

                // Optional: Send imageUrl to your Flask backend
                // fetch('/save-media', { method: 'POST', body: JSON.stringify({ url: imageUrl }) })
            }
        });

        document.getElementById("upload_widget").addEventListener("click", function() {
            myWidget.open();
        }, false);
    </script>
</body>
</html>

Add the URL rule (if not using decorators):

# app.py
app.add_url_rule("/upload-media", view_func=upload_media)

Test it by visiting:

http://localhost:5000/upload-media

You now have a complete client-side upload flow, with Cloudinary handling media processing automatically.

Server-Side Upload

Server-side uploads are perfect when you need automation or want to process files uploaded through a traditional

Example Use Case

News aggregators, podcast platforms, or content curation apps often automate large-scale ingestion:

analyze images

apply tags

create captions

run moderation

convert formats

Cloudinary can handle these tasks server-side with very little code.

Uploading From Flask

from flask import request
import cloudinary.uploader

@app.route("/upload", methods=["POST"])
def upload():
    file_to_upload = request.files["file"]
    result = cloudinary.uploader.upload(
        file_to_upload,
        upload_preset="my_upload_preset"
    )
    return {"url": result["secure_url"]}

And that’s it. Your media is uploaded, transformed, stored, and ready to deliver.

Searching Made Simple

Once your assets are stored in Cloudinary, especially with auto-tagging enabled, searching becomes incredibly fast.

Instead of digging through folders or writing custom queries, you can retrieve matching media with a single expression:

def search_media_by_tags(tags):
    return cloudinary.Search().expression(f"tags:{tags}").execute()

Example queries:

tags:portrait
tags:handmade
resource_type:video AND tags:nature

Use search to build quick admin dashboards, galleries, filters, or automated content workflows.

Delivering Your Media

With Cloudinary managing your media, delivery becomes as powerful as upload. You can apply on-the-fly transformations directly in the image or video URL with no processing required in Flask.

Example: Dynamic Image Sizing in a Flask Template

<img 
  src="{{ cloudinary_url(public_id, width=width, height=height, crop='fill') }}"
  alt="Your Image"
/>

Or, using the SDK:

from cloudinary.utils import cloudinary_url

url, options = cloudinary_url(
    public_id,
    width=400,
    height=300,
    crop="fill"
)

Why It’s Powerful

You don’t store multiple versions of each image
Users automatically receive optimized formats (WebP, AVIF, MP4, etc.)
Dynamic resizing keeps your site lightweight and fast

For responsive layouts, check out:

Secret to Media File Management

In short, the features we’ve covered include upload presets, smart uploads, AI-powered search, and dynamic delivery. Apply these features to take managing media files in Flask from “painful but necessary” to “effortless and scalable.”

Instead of writing boilerplate logic for uploads, storage, and optimization, you can focus on building features your users care about.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

How to Create a Digital Portfolio That Visually Pops

Sharon Yelenik — Mon, 23 Mar 2026 18:13:17 +0000

Job searching can be tough, and so is standing out among the competition.

When putting together job applications, there’s always that question: How should I describe myself? Will potential employers care more about past experience or a list of skills? A digital portfolio answers that question in a way a résumé alone can’t. It shows what you’re actually capable of.

That’s why I put together this digital portfolio demo project.

Instead of talking about performance, polish, and visual quality in theory, I wanted to demonstrate what that looks like in practice. This portfolio is built the way I’d recommend anyone build one today: fast, visually sharp, and optimized from the start.

In this guide, I’ll walk you through how I build a frontend portfolio project using Cloudinary to handle all the image and video magic. No endless hours in Photoshop. No massive file sizes. And, no manual resizing for every device.

Live Demo (Optional, but Highly Recommended)

Before diving into the code, you can check out the live portfolio demo here:

View the live demo on StackBlitz

Feel free to explore it, then come back and see how everything works under the hood.

Your browser does not support the video tag.

Keys to Making Your Digital Portfolio Stand Out

Building a great-looking digital portfolio is a no-brainer. However, the real question is: How do you make yours stand out? One of the biggest differentiators is focusing on performance and visual polish. When your portfolio feels fast, smooth, and thoughtfully built, it immediately comes across as more professional.

And when you build it efficiently, you’re also signaling to future employers that you know how to work efficiently:

Deliver images that load fast but look crisp.
Make videos that play smoothly without eating bandwidth.
Create responsive layouts that look perfect on every device.
Apply visual effects that make content pop.
Optimize everything without sacrificing quality.
So really, building a great portfolio is just practice for the real * thing. And that’s pretty cool.

The Tech Stack I ChoseCopy link to this heading

For my portfolio, I went with tools that are popular in the industry and honestly just fun to work with:

React 19 with TypeScript for type safety and component architecture.
Vite for lightning-fast development and optimized builds.
CSS for beautiful, responsive styling.
Cloudinary for all image and video transformations.

Feel free to clone my code and adapt it to whatever you’re used to working with.

Getting Started

I’m sharing my portfolio with you as a starting point. Once you get a feel for how it works, you can customize the design to match your style and add sections that show off what matters to you.

# Clone the starter portfolio repo
git clone https://github.com/your-username/digital-portfolio.git

# Install dependencies
cd digital-portfolio
npm install

# Start the development server
npm run dev

I’m excited to see how you make it your own.

How Cloudinary Helps Meet Stand-Out Goals

A portfolio that stands out needs to be fast, visually sharp, and responsive across devices.

Without automation, that usually means resizing images manually, generating multiple breakpoints, compressing files carefully, and managing large video assets.

Cloudinary handles image and video delivery, optimization, and transformations through simple URL parameters. In this project, cropping, resizing, blur effects, format conversion, and quality optimization are all applied directly in the media URLs.

Transformations run on the fly, and the right size and format are delivered automatically for each device and browser.

Instead of maintaining multiple asset versions or editing files manually, I define the transformation once and move on, without sacrificing quality or performance.

Swap the Demo Media for Your Own

This project uses Cloudinary’s demo account (res.cloudinary.com/demo) with sample images and videos, so it works out of the box. When you’re ready, switch to your own Cloudinary account to display your own images and videos.

Step 1: Create a Cloudinary Account

Step 2: Find Your Cloud Name

After logging in, copy your cloud name from the dashboard. You’ll use it in URLs like this:

https://res.cloudinary.com/<your_cloud_name>/image/upload/<public_id>

Step 3: Update One Line in the Code

In your project, change this:

// Set this to your cloud name when you're ready to use your own media
const CLOUDINARY_CLOUD_NAME = 'demo'

…to your cloud name:

const CLOUDINARY_CLOUD_NAME = '<your_cloud_name>'

That’s it. Since CLOUDINARY_BASE is built from CLOUDINARY_CLOUD_NAME, all image/video URLs that use CLOUDINARY_BASE will automatically point to your account.

Step 4: Upload Your Own Media and Swap the Public IDs

In your code, you reference assets using public IDs — for example:

image: 'docs/profile-pic'

That means Cloudinary is looking for an asset with the public ID docs/catwalk in your cloud.

After you upload your own images/videos to Cloudinary, replace those image values with your own public IDs, for example:

image: 'portfolio/catwalk'

Note: You don’t need to change the transformations. Everything in the URL after /upload/ (like c_fill,g_auto,h_400,w_600/f_auto/q_auto) can stay the same.

The Cool Cloudinary Features I Used

1. Smart Cropping With Face Detection

For the testimonials section, I needed consistent circular profile images that focused tightly on each person’s face.

Here’s the original image:

https://res.cloudinary.com/demo/image/upload/
docs/profile-pic.jpg

And here’s the transformed version:

https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_300,w_300/r_max/e_sharpen:80/f_auto/q_auto/docs/profile-pic.jpg

What the Transformation Does

c_thumb,g_face automatically detects the face and crops around it.
h_300,w_300 enforces a fixed square size.
r_max makes the image circular.
e_sharpen:80 restores clarity after resizing.
f_auto,q_auto handle format and compression.

The result isn’t just a circle. It’s a consistent 300×300 headshot, centered correctly every time — regardless of how the original photo was framed.

That means no manual cropping, guessing focal points, or layout inconsistencies.

2. Hero Background Blur

For the hero section, I wanted a full-width background image that wouldn’t compete with the foreground content.

Original image:

https://res.cloudinary.com/demo/image/upload/vieste_italy.jpg

Transformed version:

https://res.cloudinary.com/demo/image/upload/c_fill,g_auto,h_1080,w_1920/e_blur:800/f_auto/q_auto/vieste_italy.jpg

What the Transformation Does

c_fill,g_auto crops intelligently to 1920×1080.
e_blur:800 applies a strong blur effect.
f_auto,q_auto optimize delivery.

The original image is detailed and high contrast — great for photography, not ideal for text overlays.

By blurring it at delivery time, I keep the color and atmosphere while removing visual noise. The background supports the content instead of competing with it. No separate “blurred copy” of the file is needed.

3. AI-Enhanced Portrait

For the hero portrait, I wanted a clean, high-quality look — even if the source image wasn’t studio-perfect.

Original:

https://res.cloudinary.com/demo/image/upload/docs/profile-pic1.jpg

Transformed:

https://res.cloudinary.com/demo/image/upload/c_fill,g_face,h_300,w_300/r_max,bo_2px_solid_green/e_enhance/f_auto/q_auto:best/docs/profile-pic1.jpg

What the Transformation Does

g_face centers the subject.
r_max applies a circular crop.
bo_2px_solid_green adds a clean, circular border.
e_enhance enhances lighting and contrast using AI.
q_auto:best balances compression with quality.

The enhancement isn’t dramatic — it’s subtle. Skin tones are more balanced, contrast is cleaner, and the framing is consistent.

It looks like a designed component, not just an uploaded image.

4. Responsive Project Images

In my project grid, the source images came from different industries — fashion, e-commerce, outdoor photography — all with different aspect ratios.

Here’s one of the original images:

https://res.cloudinary.com/demo/image/upload/woman_mountain_ledge.jpg

And here’s the version used in the grid:

https://res.cloudinary.com/demo/image/upload/c_fill,g_auto,h_400,w_600/r_20/e_saturation:20/f_auto/q_auto/woman_mountain_ledge.jpg

What the Transformation Does

c_fill,h_400,w_600 forces a consistent 600×400 frame.
g_auto intelligently selects the focal area.
r_20 adds rounded corners.
e_saturation:20 slightly boosts color.
f_auto,q_auto optimize delivery.

The original image has its own natural proportions.

The transformed version guarantees:

Every card in the grid is exactly the same size.
No distortion.
No manual cropping.
No awkward whitespace.

Even though the source images vary wildly, the layout stays predictable and clean. That’s what makes the grid feel cohesive.

5. Video Transformations That Actually Work

Video is usually where portfolios fall apart. Files are large, aspect ratios are inconsistent, and playback isn’t optimized.

Here’s the original full video:

Your browser does not support the video tag.

https://res.cloudinary.com/demo/video/upload/v1731855790/guy_woman_mobile.mp4

And here’s the version used in the portfolio:

Your browser does not support the video tag.

https://cloudinary-res.cloudinary.com/video/upload/so_133,eo_147/c_pad,h_400,w_600/b_rgb:d4a520/f_auto/q_auto/guy_woman_mobile.mp4

What the Transformation Does

so_133,eo_147 trims the clip to a specific 14-second segment.
c_pad,h_400,w_600 fits it into a 600×400 frame without cutting off content.
b_rgb:d4a520 fills extra space with a consistent background color.
f_auto,q_auto optimize format and compression.

Instead of uploading a separately edited clip, I trim and resize at delivery time.

That means:

The video is shorter and lighter.
The layout dimensions are guaranteed.
There are no black bars.
The browser gets the best possible format automatically.

It behaves like a designed component — not a raw media file dropped onto a page.

6. Small Details That Make a Difference

Once layout and performance were handled, I added subtle refinements.

Here’s the original image:

https://res.cloudinary.com/demo/image/upload/docs/profile-pic1.jpg

And here’s the polished version:

https://res.cloudinary.com/demo/image/upload/c_fill,g_auto,h_800,w_700/e_vignette:30/e_sharpen:100/r_20/bo_1px_solid_rgb:e0e0e0/f_auto/q_auto/docs/profile-pic1.jpg

What the Transformation Does

c_fill,g_auto enforces consistent framing.
e_vignette:30 darkens the edges slightly.
e_sharpen:100 restores clarity.
r_20 rounds the corners.
bo_1px_solid_rgb:e0e0e0 adds a subtle border.
f_auto,q_auto optimize delivery.

None of these effects are dramatic, but together they:

Improve edge definition.
Add separation from the background.
Standardize presentation across sections.
These are small adjustments, but they’re the difference between “image placed on a page” and “designed component.”

What This Means for Performance

You might be thinking, “All these effects must slow things down, right?” Actually, the opposite!

With Cloudinary:

70-80% smaller file sizes compared to unoptimized images.
3-5x faster loading thanks to automatic optimization.
Zero manual editing time.
Automatic device optimization — phone users get mobile-sized images, desktop users get high-res.

When someone views your portfolio on their phone, they automatically get perfectly-sized images. On a 4K monitor, they get crisp, detailed versions. It just works.

Notice how much this image was optimized and what that means for your website stats and loading time! Reduced from a 21.30 MB JPG to a 18.26 KB AVIF.

Bringing It Full Circle

Here’s what I love about this whole process: The skills you use to build an impressive portfolio are the same skills you’ll use every day in your job.

When you build this portfolio, you’re learning how to:

Build modern React applications with TypeScript.
Create responsive, mobile-first designs.
Optimize images and videos for real-world performance.
Use cloud services to solve practical problems.
Write clean, maintainable code.
Think about user experience.

Your portfolio becomes a preview of what you can do. So, you’ve shown you can build websites that look great, load fast, and feel professional. That’s exactly what teams are looking for.

Wrapping Up

Making a portfolio that stands out doesn’t have to be complicated or stressful. It’s really about:

Polish that shows you care about details.
Performance that respects people’s time.
Smart visual choices that guide the eye.
Responsive design that works everywhere.

Using the right tools (like Cloudinary) to make your life easier.
If you’re job searching right now, I hope this helps. You’ve got this.

Resources:

Live demo: https://stackblitz.com/github/cloudinary-devs/digital_portfolio?file=README.md
Source code: GitHub repository
Cloudinary docs: https://cloudinary.com/documentation

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

Docs and LLM Clients in the IDE: Smarter Together

Sharon Yelenik — Sun, 14 Sep 2025 11:33:24 +0000

Docs and developers have always had a symbiotic relationship. Product documentation has existed to give developers what they need to use a platform: setup instructions, code snippets, sample apps, tutorials, and more. In return, developers have been empowered (or held back) by how clearly and completely that information has been delivered.

Today, development is no longer just about browsing docs and writing code by hand. With AI, it’s about interacting, prompting, and building, often directly inside the IDE. Yet the traditional relationship still holds: an LLM client is only as good as the context it’s been given.

That means you need product documentation, compatibility rules, and a way to index code examples into your IDE. Without them, even the best LLM client can miss important details. But with the right context, it doesn’t just write accurate code. It can also reason about your system.

Whether you’re just getting started, picking up a new tool, or leaning on AI to carry the load, the question is: what docs do you need to get the most from your AI?

Tip: If you’d like to follow along with the examples, you’ll need an IDE that supports MCP servers. This post uses Cursor. You can also sign up for a free Cloudinary account to try the same tools. For hands-on help, see Cloudinary MCP servers and LLM tools (Beta).

From Lookup to Execution

LLM clients haven’t just changed how we use product documentation. They’ve changed where we use it. Inside your IDE, documentation isn’t something you look up anymore; it becomes part of your workflow.

Today, developers use a variety of LLM-powered IDEs, i.e., Cursor, VS Code extensions, or Claude Code, but the principle is the same: the more context you give, the better the LLM’s suggestions.

That means the code snippets, design patterns, and architectural suggestions provided by the AI are pulled directly from authoritative docs, keeping completions consistent and reliable.

And with MCP servers, you can tap into agentic behavior, such as performing background or configuration tasks without breaking flow. For example, you can upload a custom font to Cloudinary directly from your IDE. When documentation is properly integrated into your IDE, execution has a higher chance of succeeding without glitches.

Practical Guidance: Using Docs as Context

To make an LLM client effective inside your IDE, combine the following documentation inputs. Each plays a distinct role in ensuring accuracy, efficiency, and performance:

Reference the documentation site

Anchor your LLM client in the authoritative source of truth so its suggestions reflect not just valid syntax, but also best practices and consistent patterns drawn directly from the documentation.
Index docs with Context7

Bring all code snippets and examples from the documentation directly into your IDE, so AI can autocomplete from them instead of guessing.
Leverage rules

Supply the LLM client with structured, procedural rules (like Cloudinary’s transformation compatibility tables) so it produces valid, working code every time.
Pair docs with MCP Servers

When the LLM client executes admin or configuration tasks in your IDE (like uploading assets or applying presets), MCP servers ensure those actions follow the documented patterns and succeed.

Of course, you can only incorporate the product documentation that the provider makes available.

Reference the Documentation Site

Documentation has always been the source of truth for developers. That hasn’t changed. What’s new is that docs are now also the source of truth for your LLM client, as well. They define the parameters, requirements, and best practices to produce code that not just works but is also scalable and consistent.

Take Cloudinary as an example. Suppose you’re preparing a Father's Day campaign landing page. Here's the original image:

https://res.cloudinary.com/demo/image/upload/fathers-day-banner.jpg

You need this, along with all hero images, cropped consistently at 1600×900.

If your LLM isn’t grounded in the docs, it might recommend an inline transformation every time you resize or crop:

// Works, but inconsistent across your app

https://res.cloudinary.com/demo/image/upload/w_1600,h_900,c_fill,g_auto/f_auto/q_auto/fathers_day_banner.jpg

That technically works, but it creates inconsistencies across projects. If parameters are rearranged, you risk generating unnecessary derived assets over and over.

Armed with context from the Retail and e-commerce guide, the LLM knows a better practice: use a named transformation. Named transformations bundle your parameters into a reusable recipe that can be applied consistently across projects and teams.

Because it has this context, the LLM can also apply the practice in the smartest way: delegate the one-time creation of the transformation to the MCP server, then always reference it in delivery URLs:

// One-time setup: MCP creates the named transformation
import { v2 as cloudinary } from "cloudinary";

cloudinary.api.create_transformation("campaign_hero", {
  width: 1600,
  height: 900,
  crop: "fill",
  gravity: "auto",
  fetch_format: "auto",
  quality: "auto"
})

Then, when coding your delivery URLs, just reference the name:

// Best practice: consistent use of named transformation

https://res.cloudinary.com/demo/image/upload/t_campaign_hero/fathers_day_banner.jpg

Both URLs deliver a valid image, but providing your LLM client the context increases the chances that it will code a solution that scales and implements best practices.

https://res.cloudinary.com/demo/image/upload/t_campaign_hero/fathers-day-banner.jpg

How to Add Docs in Cursor

Note: If you’re using a different IDE, check its MCP or docs integration options. Many of the same principles apply.

Go to Cursor > Settings > Indexing & Docs
In the Docs section, click + Add Doc
Enter your doc site (e.g. https://cloudinary.com/documentation)

Tip: Some products make this even easier by providing Markdown versions of docs. With Cloudinary, every doc page includes:

Open as Markdown — copy the URL and provide it as context.
Download Markdown — save the file and upload it if your LLM doesn’t support URLs.

By anchoring your LLM to the doc site (or Markdown pages), you ensure its suggestions aren’t just valid code, but also reflect the documented best practices for your environment.

Index docs with Context7

If the documentation site is the source of truth, then Context7 makes that truth usable inside your IDE. It indexes the code snippets and examples from the docs so your LLM client can autocomplete from them directly.

That means the LLM client isn’t guessing at parameter order or inventing method names, it’s pulling from the same snippets you’d normally copy-paste from the docs.

Why does this matter? Because without indexed examples, your LLM is more likely to generate code that looks fine but won’t actually run.

Example: Uploading Campaign Assets

Suppose you’re adding images for your Father's Day campaign. Without Context7, the AI might suggest:

// Looks plausible, but this method doesn’t exist

cloudinary.upload("fathers_day_banner.jpg")

With Cloudinary’s docs indexed by Context7, your IDE can surface the real snippet from the Node.js SDK:

// Pulled directly from the Cloudinary SDK docs

import { v2 as cloudinary } from "cloudinary";
cloudinary.uploader.upload("fathers_day_banner.jpg", {
  use_filename: true,
  unique_filename: false,
  overwrite: false,
  upload_preset: "campaign_assets"
});

Now the code is syntactically correct, environment-aware, and aligned with documented best practices. Instead of breaking flow to check docs, you stay in the IDE and get it right the first time.

How to Add Context7 in Cursor

Go to Cursor > Settings > Tools & Integrations
From the MCP Tools section, click New MCP Server
Add Context7 to your JSON list of MCP servers:

 "context7": {
  "url": "https://mcp.context7.com/mcp"
}

Once set up, your LLM client can autocomplete directly from the indexed docs.

Tip: To enable doc ingestion with the Context 7 MCP server for a different IDE, check out the Context 7 GitHub repo README and choose an IDE.

Thousands of products already index their docs in Context7. If you’re using Cloudinary, you’re covered. If you’re using another product, make sure its documentation is included.

Leverage Rules

Examples and snippets are helpful, but they don’t cover the constraints that make code actually work. Documentation also defines rules: which parameters can be combined, how qualifiers interact, and what syntax is supported.

Without those rules as context, an LLM client might generate code that looks right but fails when you run it.

Example: Campaign Product Thumbnails

Suppose you’re creating thumbnails for product cards in your Father's Day campaign. You want them auto-cropped around the main subject. Your LLM knows about g_face (automatically crop around the largest detected face), but if it isn’t grounded in the docs, it might pair it with the wrong crop mode:

// Invalid: g_face doesn’t work with c_pad

https://res.cloudinary.com/demo/image/upload/c_pad,g_face,w_500,h_500/e_upscale/f_auto/q_auto/fathers_day_banner.jpg

The output URL looks fine, but the transformation will fail.
With rules indexed from the docs, the AI knows g_face only works with certain crop modes, such as c_auto:

// Valid: g_face with c_auto

https://res.cloudinary.com/demo/image/upload/c_auto,g_face,w_500,h_500/e_upscale/f_auto/q_auto/fathers_day_banner.jpg

This way, instead of generating “almost right” code that you'll later have to debug, the LLM produces correct transformations that will run reliably in production.

https://res.cloudinary.com/demo/image/upload/c_auto,g_face,w_500,h_500/e_upscale/fathers-day-banner.jpg

How to Add a Rules File in Cursor

Note: Cursor also has its own “rules” feature. In this case, you’re not adding a Cursor rule. You’re adding the product’s rules file as documentation context, so your LLM suggestions follow the product’s documented constraints.

Get the name of the rules file that the product you’re working with provides (e.g. cloudinary_transformation_rules.md).
Go to Cursor > Settings > Indexing & Docs
In the Docs section, click + Add Doc
Enter the name of the rules file

When writing a prompt about transformations, add this rules doc as context. In chat, use @ Add Context → Docs → + Add new doc, then paste the rules URL.

With rules in place, your LLM isn’t just copying snippets. It’s following the same guardrails defined in the product documentation.

Pair Docs with MCP Servers

Docs tell your LLM client what to do; MCP servers let it do it. Together they make documentation agentic so that the LLM client isn’t limited to suggesting code, but can also carry out actions correctly in your environment.

Example: Upload Presets for Campaign Assets

You need to standardize uploads for your Father's Day campaign, ensuring assets land in the right folder with consistent transformations and policies. Cloudinary supports this with upload presets, but the exact fields and allowed values (unsigned, asset_folder, tags, transformation, etc.) are defined in the documentation.

The MCP server can handle this configuration in the background so you can use the preset directly in your code. No need to open another interface or set it up manually.

Suppose you ask your LLM client to perform this agentic action:

“Make an unsigned upload preset called campaign_assets that stores images in fathers_day_2025 with a 1600×900 crop”

If the LLM client guesses on the parameters instead of using the docs, the result is more likely to fail:

// Plausible, but invalid (wrong folder format, unsupported option)

await cloudinary.uploader.upload("fathers_day_banner.jpg", {
  folder: "/fathers_day_2025",   // leading slash not allowed, parameter deprecated for dynamic folder mode
  crop_mode: "scale"        // invalid field name
});

With docs + MCP, the LLM knows the correct fields and can act directly in your IDE to create and apply a preset:

// One-time agentic action: create an upload preset for campaign assets

await cloudinary.api.create_upload_preset({
  name: "campaign_assets",
  unsigned: false,
  asset_folder: "fathers_day_2025",
  transformation: [
    { width: 1600, height: 900, crop: "fill", gravity: "auto" }
  ],
  tags: ["campaign", "fathers_day_2025"]
});

Once that's done, you can add the preset to your upload code:

// Use the preset to upload consistently

await cloudinary.uploader.upload("fathers_day_banner.jpg", {
  upload_preset: "campaign_assets"
});

Here, the docs provide the valid fields and constraints, and MCP makes it actionable right inside your IDE. The result: assets uploaded consistently, without guesswork or manual dashboard setup.

How to Add MCP Servers in Cursor

Go to Cursor > Settings > Tools & Integrations
From the MCP Tools section, click New MCP Server
Add the Cloudinary MCP servers to your JSON list:

 "cloudinary-asset-mgmt-remote": {
  "url": "https://asset-management.mcp.cloudinary.com/sse"
},
"cloudinary-env-config-remote": {
  "url": "https://environment-config.mcp.cloudinary.com/sse"
},
"cloudinary-smd-remote": {
  "url": "https://structured-metadata.mcp.cloudinary.com/sse"
}

In Cursor Settings, click Needs Login for each MCP server and sign in with your Cloudinary email and password to connect to your product environment.

When documentation and MCP servers work together, your IDE doesn’t just generate suggestions. It also executes them correctly in your environment, turning “looks right” code into “works right” code.

Docs for Humans

And don’t worry, product documentation is still there for you, not just your LLM client. AI can speed up routine coding and handle a lot of boilerplate, but when you need to understand what’s happening, debug an issue, or step back for a high-level view of the platform, the docs are still your best tool.

Whether you’re learning a new capability, checking constraints, or exploring an unfamiliar API, reading the documentation yourself gives you the context and insight that no autocomplete can replace.

Because ultimately, you’re still the guide. Documentation now serves two audiences, developers and LLM clients, but you remain the one steering the system toward the results you want.

Adaptive and Agentic Docs

We’ve reached a point where documentation is no longer just static reference, but rather part of an adaptive, agentic workflow:

Context-aware: available right where you code, without leaving your IDE.
Agentic: paired with tools so your LLM client can not only explain concepts but also generate accurate code and perform actions.
Human-first: still written to teach and guide developers, not just feed machines.

Looking ahead, documentation could become even more dynamic. Imagine a feedback loop where developer usage and AI interactions surface gaps, corrections, and improvements automatically. Instead of relying solely on manual updates, docs could evolve in near real time, reflecting how products are actually being used.

The future of product documentation is about giving LLM clients the best possible inputs, so they can reason and act safely while still giving developers the clarity they need to guide the process.

That’s how we’ll spend less time fixing and more time building. And as LLM clients grow more agentic, able to reason, plan, and execute, the need for accurate, structured, and adaptive documentation will only increase.

Let’s Build the Next Generation of Docs

We’re at an exciting point. AI can recommend, design, and even execute parts of our workflows—but only when given the right context. Documentation is no longer just for humans; it’s the fuel for intelligent, agentic tools.

Now it’s your turn:

Share your thoughts in the comments:
- What do you wish your docs did better?
- When have docs and AI worked well together for you?
- How do you want docs to support AI inside your IDE?
Try it out:
- Set up the Context 7 MCP server in your IDE.
- Pull in the Cloudinary MCP servers and doc tools, and upload an image from your local directory to Cloudinary.

Your feedback shapes the next generation of docs, for humans and AI. Let’s build smarter docs. And let’s keep them human.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

AI Video Workflows with PHP

Sharon Yelenik — Thu, 30 Jan 2025 09:21:56 +0000

Videos on your website can significantly boost conversions—by up to 80%, according to a study by Eye View Digital. But to maximize their impact, you need an efficient approach to uploading, processing, and delivering video content.

In this blog post, you'll learn how to streamline AI-powered video workflows in your PHP app using Cloudinary. You'll explore a PHP Product Catalog app that demonstrates how to:

✅ Enable seamless client-side video uploads

✅ Automatically moderate content without disrupting availability

✅ Edit videos dynamically to match your website’s needs

✅ Optimize videos for fast loading and smooth playback

✅ Deliver videos with a fully customizable video player

Read the full post to see these features in action!

Managing UGC Videos in Your App For Increased Engagement

Sharon Yelenik — Wed, 29 Jan 2025 10:13:31 +0000

User-generated content (UGC) videos can be a game-changer for your app. According to a study from ScienceDirect, short video UGC generates a stronger purchase intention than graphic UGC. In fact, user-generated videos are shown to generate 12 times more shares than text and images combined, significantly boosting engagement. (58 User-Generated Content Statistics for 2025)

These sources highlight the power of UGC videos in enhancing website conversions, building trust, and driving higher engagement. However, to maintain performance, security, and a great user experience, you need a well-structured approach to handling these videos.

Cloudinary makes it simple. Read this blog post to learn how to:

✅ Provide a seamless client-side upload interface

✅ Automatically moderate videos asynchronously to prevent inappropriate content without disrupting availability

✅ Edit videos on-the-fly to meet your website’s requirements

✅ Optimize videos for fast loading and a lightweight site

✅ Use adaptive bitrate streaming for smooth playback

✅ Deliver videos with a customizable video player

AI Image Workflows with PHP and Cloudinary – From Upload to Delivery

Sharon Yelenik — Tue, 21 Jan 2025 12:38:40 +0000

Do you work with images in your PHP apps? Check out this must-read article on streamlining and scaling your image workflow with AI.

The article walks you through a complete image workflow—from client-side upload and user-specified metadata to auto-generating alt text, dynamic transformations, and optimized delivery—all demonstrated in an end-to-end Product Catalog app.

Learn how to automate it all with Cloudinary’s PHP SDK.

Read the full post here.

Transform Your WordPress Images with Generative AI

Sharon Yelenik — Mon, 11 Nov 2024 08:59:08 +0000

Creating a WordPress site involves extensive image management. Imagine if you could seamlessly enhance your images, apply effects, and manage backgrounds—all without leaving your WordPress dashboard.

With the Cloudinary WordPress Plugin, you can use AI to:

Remove or adjust backgrounds for product images
Expand images to fit any layout
Fill in missing parts of cropped images
Recolor elements
Remove unwanted artifacts

Learn how to use AI with Cloudinary, and sign up to Cloudinary for free!

Boost Your WordPress Media Management with Cloudinary

Sharon Yelenik — Tue, 01 Oct 2024 11:14:03 +0000

Managing media on a WordPress site can quickly reveal the limitations of the default WordPress media library, especially as your collection of images, videos, and other files grows. For a more robust solution, Cloudinary’s WordPress Plugin offers a powerful Media Library. It’s accessible as a standalone extension that transforms media management with enhanced organization, optimization, and retrieval capabilities.

Integrated directly into your WordPress instance from within any page, Cloudinary’s Media Library goes beyond basic file management. It provides a range of features that enhance media handling, making it more efficient and powerful. Let’s explore some of the capabilities that can transform how you manage media on your WordPress site with Cloudinary’s Media Library, powered by the Cloudinary WordPress plugin.

How to Get Started

Excited to explore Cloudinary’s Media Library? Start with these steps to get set up and ready for the features we’ll discuss in this blog post:

Sign up for a free Cloudinary account.
Install the Cloudinary WordPress plugin.
Complete the setup wizard, following the instructions to add your connection string and select your sync and optimization settings.
Once the Cloudinary WordPress Plugin is installed, make sure Cloudinary is selected in the left navigation menu, and select Cloudinary DAM from the Extensions drop-down.

Note: DAM (Digital Asset Management) refers to a system for efficiently organizing, storing, and managing digital files like images, videos, and documents. With the Cloudinary WordPress Plugin, this functionality is provided through the Cloudinary Media Library.

Key Features of Cloudinary’s Media Library

Cloudinary’s Media Library offers a range of designed to streamline media management, enhance organization, and improve file discoverability. Here’s a glimpse of its transformative capabilities:

Centralized Media Management

Upload your media files to the Media Library for streamlined, centralized management of all assets. Serving as the single source of truth, it’s accessible from WordPress, the Cloudinary Console, and other integrations, ensuring seamless collaboration across teams and platforms. This setup simplifies reusing assets across channels like social media, Shopify and Magento. Additionally, collaboration tools—such as media file commenting on individual media files, user invitations, and public link creation—make it easy to coordinate workflows and share content effectively.

To open the Cloudinary Media Library:

Inside WordPress, click Cloudinary DAM in the left navigation menu. Make sure the Assets or Folders page is selected from the top navigation.
Alternatively, when adding an image to a page or post, select Media Library, and select the Cloudinary tab:

Note: This shows the Cloudinary Media Library activated from the block editor. The library is accessible from the classic editor, as well.

To open the Media Library outside of WordPress, go to cloudinary.com and login directly.

For more information, see Digital Asset Management Overview.

Advanced Editing

Cloudinary’s Studio provides an easy-to-use interface for editing multiple images at once, including AI-driven actions such as:

Resize and Crop: Set the crop of your choice and let AI center the most important part of the image.
Edit the Background: Remove backgrounds, add drop shadows, and select new background colors or images.
Add an Image Overlay: Enhance branding by adding watermarks or custom image overlays.
Generative AI: Restore and mend imperfections, recolor, remove, or replace elements using a prompt.
Enhance: Improve your image by adjusting colors, contrast, brightness, and sharpness, and highlighting edges and fine details.

When you’re done, download your enhanced images.

To open Studio for multiple images:

Make sure the Assets or Folders page is selected at the top navigation of the Cloudinary Media Library.
Select multiple images and hover over the Edit icon in the assets toolbar.
Choose the tool you want to apply from the drop-down menu.

Auto-Tagging and Metadata

With auto-tagging, you no longer need to manually tag each image or video. Cloudinary’s AI scans your media, identifying key elements and automatically generating relevant tags. This feature saves time and ensures consistent labeling for easy retrieval. You can also manually add tags and custom metadata to further enhance your media management.

To run the Cloudinary WordPress Plugin auto-tagging feature:

Double-click an asset within the Media Library to open the asset management page.
Go to the Analysis tab to generate tags based on detected objects. If a subscription is required for the analysis, click the Register button to subscribe.
Add the tags to your file’s metadata from the options menu next to the Minimum confidence slider.

To view and edit these tags and add custom metadata:

Go to the Metadata tab to provide additional context and improve searchability.

For more information, see the sections on Analysis and insights and Custom metadata in the Cloudinary documentation.

Advanced Search and Filtering

Cloudinary’s plugin offers powerful search capabilities, allowing you to quickly locate media based on tags, keywords, file names, and more. You can filter results by criteria such as file type, date, or tag, and sort them by relevance or other parameters. These tools make managing large media libraries more efficient and organized.

To perform a search:

In the Cloudinary Media Library, ensure the Assets tab is selected, then enter your search criteria to find specific media quickly.

For more information, see Advanced Search.

Not Just a Media Library: Fast CDN Delivery and More

Cloudinary’s WordPress Plugin is more than just a media library—it's a powerful all-in-one solution that saves you from managing multiple plugins. This single plugin streamlines your workflow by offering features like fast CDN delivery. Automatic integration with Cloudinary’s global CDN ensures your images and videos are served at lightning speed, significantly boosting load times and overall site performance without any additional setup. Enjoy the full power of seamless media delivery, keeping your site running smoothly no matter the scale.

Level Up Your Media Game

Cloudinary’s WordPress Plugin Media Library transforms media management by providing a central source of truth for all your media files, auto-tagging capabilities, and comprehensive metadata support. Its advanced search and filtering features simplify finding and organizing your media. Additionally, the plugin includes a host of other essential capabilities, including seamless integration with Cloudinary’s global CDN for fast and efficient media delivery.

Elevate your media management experience today with the Cloudinary WordPress Plugin, where powerful features and exceptional performance come together.

Note: Read more about the Cloudinary WordPress Plugin:

Choose the Best Storage Options for Your WordPress Media Files

Sharon Yelenik — Sun, 15 Sep 2024 06:53:26 +0000

The Cloudinary WordPress Plugin integrates smoothly with WordPress, moving your media files to Cloudinary’s powerful cloud infrastructure. This can free up your WordPress storage, depending on your chosen settings. Your images and videos are delivered through a high-performance Content Delivery Network (CDN), ensuring fast loading times worldwide. Everything is managed within WordPress, so you enjoy better performance and easier media management without leaving your WordPress instance or disrupting your workflow. Plus, by storing your media in Cloudinary, you gain the flexibility to easily reuse those assets across other platforms, including any external CMS or e-commerce platform, for a consistent and efficient media management experience.

Note: WooCommerce, already integrated within WordPress, gains additional media management features from Cloudinary, enhancing its overall media handling capabilities.

The Cloudinary Plugin saving bandwidth on a WordPress site

In This Blog

We’ll explore how the Cloudinary WordPress Plugin can streamline your media management by diving into its sync and storage options. In addition, discover use cases, practical tips, and tools to optimize your WordPress site and enhance your media workflow and storage efficiency.

How to Get Started

Sign up for a free Cloudinary account.
Install the Cloudinary WordPress plugin.
Complete the setup wizard.
Once the Cloudinary WordPress Plugin is installed, make sure Cloudinary is selected in the left navigation menu, and select Cloudinary DAM from the Extensions drop-down to enable the Media Library.

Set storage and sync options by navigating to Cloudinary > General settings.

Flexible Storage Solutions

Cloudinary provides versatile storage options for your WordPress media files. Choose the best fit for your needs:

If freeing up WordPress storage is your priority, choose the Cloudinary Only option. This option is ideal for media-heavy sites like travel blogs or real estate listings. It stores all your media exclusively on Cloudinary, freeing up space on WordPress while ensuring fast loading times. You can easily switch back to serving assets from WordPress if needed.
If you prefer having a fallback plan while still saving storage, select the Cloudinary and WordPress (Low Resolution) option. This moves all your media to Cloudinary and keeps low-resolution copies on WordPress for basic visibility. It's perfect for small businesses like local cafés or bakeries, offering a good balance between cost savings and WordPress storage use.
If having a full fallback is more important than saving storage, go with the Cloudinary and WordPress (Default) option. This stores your media on both Cloudinary and WordPress, providing Cloudinary’s optimization and fast delivery while enabling immediate access to assets in WordPress. It's ideal for sites like design portfolios or e-commerce stores that require complete redundancy.

Seamless Syncing Options

You can choose how your media files sync based on your needs for convenience or control:

Auto Sync (default): Automatically syncs all changes and uploads the media files to Cloudinary. This option prioritizes convenience by handling synchronization seamlessly in the background. For instance, if you frequently add new blog posts with images, Auto Sync ensures that all new media is instantly updated on Cloudinary without any extra effort from you.
Manual Sync: Provides the flexibility to review and selectively sync media from WordPress to Cloudinary. This approach allows precise control over when files are delivered in their updated form. For example, if you want to review newly updated images and videos before delivering them from Cloudinary, Manual Sync lets you perform the sync only when you're ready.

Note: By default, your WordPress assets will sync to the root folder of your Cloudinary product environment. To specify a different location, set a folder path in your Media Library Sync Settings. For example, to store assets in the cld-images sub-folder within the wordpress-assets folder, configure the Cloudinary folder path as wordpress-assets/cld-images.

Streamlined Delivery Methods

The Cloudinary WordPress Plugin offers flexible delivery options to suit different needs. With Manual Sync, you gain control over how and when media files are synced between WordPress and Cloudinary. This method allows you to:

Optimize performance: Choose which assets are delivered from Cloudinary, taking advantage of its high-performance CDN for faster global delivery. For example, sync high-resolution images from a new blog post to boost page load speed without syncing all media.
Control storage: Decide whether to keep files in WordPress for immediate access or offload them to Cloudinary, reducing storage demands on your WordPress site. For instance, sync old event photos that aren't frequently accessed to Cloudinary to save space on WordPress while keeping more recent, frequently accessed images locally.
Manage file types: Selectively sync specific file types, such as new gallery images that need optimization, to Cloudinary, while keeping others, such as PDFs that don’t need CDN benefits, in WordPress.

By using Manual Sync, you can tailor media delivery to fit your performance needs and storage preferences, ensuring that your critical media is delivered efficiently while maintaining control over where files are stored.

Use the bulk actions menu or the single file menu to sync and deliver files efficiently.

Bulk options

Single media file options

Note: You can also add metadata for individual files to the Cloudinary Report.

Delivery Status Indicator

The color of the Cloudinary icon in your WordPress media library list view indicates the status of each asset:

	Black icon: Asset not synced.
	Blue icon: Delivered from WordPress.
	Green icon: Synced with Cloudinary.

Extended Sync Options

Take your WordPress storage optimization to the next level by utilizing Cloudinary’s advanced features for media management.

Additional Asset Sync Settings: Extend Cloudinary’s benefits to media files beyond your WordPress media library. Sync assets from other plugins, themes, or external sources. For example, use this setting if your site uses a custom theme with built-in image assets that you want to sync to Cloudinary for optimization and delivery. Adjust settings in General Settings > Additional Asset Sync Settings.

External Asset Sync Settings: Sync externally hosted media (e.g., S3 bucket) or assets across multiple environments (e.g., staging, production) to Cloudinary. For example, if you host videos on an S3 bucket and want to use Cloudinary’s optimization and CDN, you can sync those assets to Cloudinary as well. Go to General Settings > External Asset Sync Settings to add relevant domains.

Monitor Your Real-Time Media Status

Stay updated on the delivery source of your assets directly from your website’s frontend. The Cloudinary plugin shows whether your images and videos are served from Cloudinary or directly from WordPress.

When media files are delivered from Cloudinary, you can instantly see how much bandwidth you're saving through optimization. For instance, if you run an e-commerce business like a fashion boutique with high-quality product images, monitoring the real-time status helps you ensure that large files are being served in optimized formats like WebP, and transformations such as resizing or quality adjustments are correctly applied.

You can compare the local file size with the optimized size, view the optimized format used for delivery, and check the percentage reduction to ensure optimal performance. And, you can see which transformations were applied to the delivered media, helping you verify that every asset meets your performance and quality standards directly from your site.

Enhanced Media Library

The Cloudinary WordPress Plugin integrates Cloudinary as your central media management hub, offering features like bulk editing, AI-powered auto-tagging, metadata handling, and powerful search. The Cloudinary Media Library widget within WordPress lets you manage all your media files seamlessly. For instance, on your e-commerce site, you can upload product images to Cloudinary directly from WordPress and quickly find and place each product on the appropriate page.

Non-WordPress users can also use Cloudinary’s Console to share media files, enhancing collaboration across teams and platforms. For example, designers can upload files to Cloudinary’s Console, making them instantly available in WordPress through the Media Library widget. This streamlines workflows and ensures all team members have access to the latest media.

Efficient Sync with WordPress CLI

For large-scale operations, use the WordPress CLI to sync images via command line. This is ideal for extensive asset libraries. For example, if you’re migrating a vast collection of media files from a legacy site to your new WordPress site and need to sync thousands of images efficiently, using the CLI can streamline the process and save time.

For more information, see Managing media sync using the WP-CLI.

Elevate Your Media Management with Cloudinary

Unlock the full potential of your WordPress site with the Cloudinary Plugin! Whether you choose to sync your images and videos automatically for seamless updates or manually sync for precise control, Cloudinary’s flexible storage and sync options help you streamline media management and save on WordPress storage. Don’t settle for less—enhance your site’s performance and efficiency today. Install the Cloudinary WordPress Plugin and transform the way you handle media. Start optimizing now!

5 Ways To Enhance Your Images and Videos On WordPress

Sharon Yelenik — Tue, 13 Aug 2024 21:26:54 +0000

It's no secret that visuals are the heart of your website. Your images and videos pump life and energy, captivating visitors and keeping them coming back.

Great visuals result in website success and increased sales. No doubt your images are carefully selected to fit your brand and captivate your audience. With the Cloudinary WordPress Plugin, the rest is automatic. You no longer have to worry about how a wide image will fit on mobile or allocate resources for personalizing 500 new product images and cropping them to fit the bounding box.

The Cloudinary WordPress Plugin seamlessly integrates into your WordPress media library, posts, tags, and other functionalities, allowing you to easily enhance, retrieve and manage your visuals without changing your workflow. Additionally, the plugin offers numerous essential optimization features in a single, comprehensive image and video management solution, eliminating the need for separate plugins for each enhancement.

Here are 5 ways to enhance the appearance of your images and videos on WordPress using the Cloudinary Plugin.

# 1 Crop Images and Videos with AI

If you're dealing with a single image, manual cropping makes sense. But with hundreds of images, automation becomes essential--and sometimes comes out even better than the human touch. That's particularly true when cropping images and videos to focus on specific areas. Check out the results you can achieve using the Cloudinary WordPress Plugin AI automatic cropping feature:

Here’s how to set cropping with AI in your Plugin’s Image settings. In the Additional image transformations section of Image – Global Settings, enter the automatic cropping and gravity parameters, c_auto,g_auto along with the desired dimensions, in this case w_600,h_600.

Tip: For more cropping options, see Image and Video resizing and cropping.

Now check out the results you can achieve using the Cloudinary WordPress Plugin AI automatic cropping feature:

Image cropping: This landscape image needs to fit a square bounding box. A standard center crop ruins the image. However, AI-powered cropping ensures a perfect crop that focuses on the essential areas. Moreover, AI face recognition cropping delivers a profile without unnecessary noise.

Original

Cropped: c_crop,w_600,h_600

AI-powered crop: c_auto,g_auto,w_600,h_600

AI-powered crop with face recognition: c_auto,b_face,w_600,h_600

Video cropping: In this example, the same video needs to be landscape for desktops and portrait for mobile. Simply cropping a landscape video to portrait often results in losing focus on the main subject, in this case the dog, leaving much of the viewport empty. However, by applying AI to focus on the dog, we ensure that it remains in the viewport throughout the entire video. Watch it in action!

Your browser does not support the video tag.

Original

Your browser does not support the video tag.

Regular crop: c_fill,h_400,w_244

Your browser does not support the video tag.

Crop with AI: c_fill,g_auto:dog,h_400,w_244

# 2 Personalize Images and Videos

Need to brand your visuals with watermarks? Looking to add some spice with special effects? Perhaps your videos need trimming, or your product image requires additional text? You can accomplish all that and more, with the flexibility to apply these modifications either site-wide or to specific files.

In the Video – Global Settings, specify a transformation, in this case, l_samples:logo/w_200,g_north_east,fl_layer_apply to add a watermark named “logo” from the “samples” folder of the Cloudinary Media Library, with a width or 200 pixels at the top left corner.

Here are some examples:

Watermarked Image

Zoompan Effect

Background removal with drop shadow effect

Your browser does not support the video tag.

Video with image and text overlays

# 3 Customize Your Video Player

When visitors scroll down the page, they might not notice a game-changing video you recently uploaded.

You can use Cloudinary's top-notch HTML5 Video Player available via the Plugin to make your videos pop. For example, you can select to play the video automatically when it enters the viewport. In addition, you can hide video controls and play the video infinitely. These are just a few ways to enhance user engagement with this customizable video player.

Monitor your usage using the Video Player metrics dashboard and watch your engagement increase.

This is the settings page for customizing videos. Notice that, in addition to customizing the video player, you can brand your videos with watermarks:

Take a look at this example in action:

Your browser does not support the video tag.

# 4 Upgrade Your Product Gallery

If your website is used for e-commerce, you undoubtedly showcase your product images within a gallery. As the essential method of conveying your product to visitors, the gallery you choose deserves careful consideration.

Introducing the Cloudinary Product Gallery. This visually appealing feature includes a customizable slider, video support, 360-spin sets, augmented reality (AR), and a customizable zoom mode, making it ideal for enhancing specific product pages on WooCommerce stores.

Your browser does not support the video tag.

# 5 Simplified management

Finally, simplify the organization and management of your images and videos with Cloudinary's Media Library, seamlessly integrated directly within WordPress. Explore its advanced AI-powered features like auto-tagging and smart search capabilities, all presented through a user-friendly and intuitive interface.

On Your Way to Enhanced Images and Videos

The Cloudinary WordPress Plugin consolidates all these features into a single, easy-to-configure solution. With most functionalities available out of the box, it eliminates the need to juggle multiple plugins or manually optimize and manage your media assets. You’ll be able to monitor how these features impact your site’s performance from a centralized dashboard. And, for developers or advanced users, you can adjust the Plugin's functionality to your needs using a range of filters.

Transform your WordPress site into a visual masterpiece with captivating images and videos. Start using the Cloudinary WordPress Plugin today to seamlessly enhance your media.

Next Steps

Watch a quick setup video to get started enhancing your media assets.
Feel free to share your thoughts with us on the Cloudinary Community Forum.
For more detailed information, visit the Cloudinary WordPress Plugin documentation.
Take the comprehensive Introduction to Cloudinary for WordPress Administrators Cloudinary Academy course.
Read about how the Cloudinary WordPress Plugin can optimize your images and videos!

Note: You can see this blog post on the Cloudinary site, as well.

6 Ways To Optimize Your Images and Videos On WordPress

Sharon Yelenik — Thu, 08 Aug 2024 12:08:49 +0000

If you're maximizing your website's potential, you're likely engaging visitors with lots of images and videos. While that's a real boon, it also comes with risks. If your website is heavy, your load times will be lengthy, and visitors won't necessarily have the patience to wait for your site to load before going elsewhere. Fast load times are not only crucial for user experience but also for improving search rankings--Google evaluates these metrics through Core Web Vitals, impacting your site's visibility and success.

The Cloudinary WordPress Plugin can help you achieve this. It seamlessly integrates into your WordPress media library, posts, tags, and other functionalities, allowing you to easily retrieve and manage your optimized visuals without changing your workflow. Additionally, the plugin offers numerous essential optimization features in a single, comprehensive image and video management solution, eliminating the need for separate plugins for each enhancement.

To enrich your website with captivating visuals while keeping loading times to a minimum, optimize your images and videos on WordPress using just one efficient plugin. Keep reading to discover how.

#1 Optimize File Sizes

You can reduce image and video sizes by activating Image optimization settings in the Cloudinary WordPress Plugin. This includes delivering images in the optimal format for each browser, automatically applying maximum compression without compromising visual quality, and resizing to avoid unnecessarily large dimensions. See how performant your website can become.

The size of this image was reduced from 147 KB to 27.8 KB:

Notes:

These settings are reflected in the image URL: f_auto for automatic format, q_auto for automatic quality and compression, and w_600 to reduce the width to 600 pixels.
Click these links to open the original and optimized images in the browser.
The original image is delivered as a JPG while the optimized one is delivered as an AVIF.

# 2 Leverage Lazy Loading

If you don't take action, your website will wait to render until all your visuals load. This can result in long wait times and unhappy visitors. The solution? Lazy loading. This technique allows your page to render immediately, while images load only when they enter the viewport.

Watch this video to see lazy loading in action within the Plugin:

Your browser does not support the video tag.

This is how lazy loading can look on your website:

Your browser does not support the video tag.

# 3 Render Responsive Images

Most likely, you display the same images on your website for both desktop and mobile. While the design might be slightly modified—such as showing four images in a row on desktop and in a column on mobile—the images might also get smaller or larger depending on screen size. The Cloudinary WordPress Plugin implements this functionality for you automatically, adjusting image sizes based on need. Simply set the pixel distance at which a different image size will be displayed.

Using responsive images ensures images are never delivered larger than necessary, saving bandwidth and speeding up loading times.

See setting up responsive images with the Cloudinary WordPress Plugin:

Your browser does not support the video tag.

Here's how responsive images can look on your website:

Your browser does not support the video tag.

# 4 Ensure Smooth Video Playback

Let's say visitors are really enjoying a video when network conditions suddenly fluctuate. The video begins buffering, causing visitors to lose patience. Will they wait it out and finish watching? Maybe... but they also might lose interest and leave.

You can avoid these scenarios by using Cloudinary's top-notch HTML5 Video Player available via the Plugin.

Select your optimization method to ensure smooth playback. Progressive optimization ensures faster initial loading times and smoother playback from the start, while adaptive bitrate streaming automatically adjusts video quality in real-time based on network conditions, providing a seamless viewing experience throughout.

Video Player metrics are provided within a user-friendly analytics dashboard.

Here's what the video settings look like when selecting Adaptive bitrate streaming:

Here's a Cloudinary video in action:

Your browser does not support the video tag.

# 5 Enable SVGs

The logos, icons and illustrations on your site shouldn't weigh it down because they can be delivered as light-weight SVGs. However, in order to have SVG support on your WordPress website, you need to enable the Cloudinary WordPress Plugin. Otherwise, you'll be serving resolution-independent images as PNGs or JPGs, which are several times larger than needed.

Here's enabling SVG support within the plugin:

Here's an example of a logo delivered as an SVG:

# 6 Deliver via CDN

Your website's most dedicated fans might be located halfway across the world. Consequently, they'll experience slower image and video loading times compared to someone nearby. Content Delivery Networks (CDNs) solve this issue by strategically placing servers worldwide to cache your media to optimize your images and videos on WordPress. This ensures that visitors from thousands of miles away are served as quickly as those next door. With the Cloudinary WordPress Plugin, your visuals are automatically delivered via CDN, optimizing global access and user experience.

Optimizing Your Visual Experience

So, here's your ticket to a performant WordPress website, full of visually appealing images and videos. We invite you to get started right now with the Cloudinary WordPress Plugin to effortlessly optimize your images and videos on WordPress.

Next Steps

Watch a quick setup video to get started enhancing your media assets.
Feel free to share your thoughts with us on the Cloudinary Community Forum.
For more detailed information, visit the Cloudinary WordPress Plugin documentation.
Take the comprehensive Introduction to Cloudinary for WordPress Administrators Cloudinary Academy course.
Read about how the Cloudinary WordPress Plugin can enhance the appearance of your images and videos!

Note: You can see this blog post on the Cloudinary site, as well.

Build a Dynamic Photo Collection App With Django

Sharon Yelenik — Mon, 15 Jul 2024 21:41:11 +0000

Creating a dynamic photo collection app that spans different industries is an exciting opportunity in web development. These apps, also known as lookbooks, can be used in fields like fashion, real estate, and travel to showcase visual content effectively.

Recently, I developed a comprehensive lookbook using Django and Cloudinary. You can get a thorough understanding of its functionalities by watching a video walkthrough and reading a detailed description. Additionally, we'll highlight some noteworthy features that developers may find intriguing.

Tip: You can fork the app from GitHub to explore its capabilities firsthand and sign up for a free Cloudinary account to get the app working. You can also watch a series of YouTube videos that that focus on specific aspects of the app.

App Description

Here’s what the app offers:

Homepage Navigation

View all lookbooks.
Filter lookbooks by the user.
See user profile pictures on their lookbooks.

User Account Features

Sign up and log in to create a profile with a bio and profile picture.
Create, edit, and delete lookbooks.
Upload and customize images using Cloudinary.

Noteworthy Features

This lookbook application integrates several advanced features for managing and displaying user-generated content. Below are some highlights that developers might find particularly interesting.

Integrating Cloudinary for Image Management

One of the standout features of this application is the integration of Cloudinary for managing images. Cloudinary's powerful image management, transformation and delivery capabilities make it an ideal choice for applications dealing with a lot of visual content. This includes:

CloudinaryField usage:
Using CloudinaryField in Django models simplifies image storage and management. It integrates seamlessly with Django's ORM and forms, and automatically uploads images to Cloudinary when the form is saved. (See Dynamic Form Handling.)

# models.py

from cloudinary.models import CloudinaryField

class Lookbook(models.Model):
    overlay_image = CloudinaryField('overlay_images')

Transformations and overlays:
The application utilizes Cloudinary’s AI-powered capabilities to automatically enhance lookbook images. Users can customize their lookbooks by choosing image overlays, image orientation and border styling. AI paints out the images to fit the selected orientation, ensuring they’re displayed correctly without manual adjustments. These features are supported by utility functions designed for efficient image processing.

In addition, when handling user-generated profile images, AI-based transformations optimize and uniformly crop and center the images, regardless of the original content.

Here’s an example of an original and transformed profile picture, along with the code to generate it. Notice how the crop honors the face’s placement in the center.

Tip: Click the links to open the images in a browser tab and see their URLs.

profile_url = CloudinaryImage(public_id).build_url(quality='auto', width=600, height=600, crop='auto', gravity='face')

Easy retrieval and display:
Images stored in Cloudinary can be easily retrieved using their URLs, simplifying the process of displaying images in templates. For example, when displaying all images in a lookbook.

When a user selects a lookbook to view, its ID is passed to the display function in the views.py file. The display function then retrieves a list of all images linked to that lookbook. The transformed delivery URLs of these images, stored in the Lookbook model, are sent to the template for rendering.

# views.py

def display(request, lookbook_id):
   lookbook = get_object_or_404(Lookbook, pk=lookbook_id)
   images = lookbook.images.all()
   return render(request, 'display.html', {'photos': images, 'lookbook': lookbook})

<!-- templates/display.html -->

{% for photo in photos %}
   <div class="gallery-col">
      <div class="gallery-image">
          <!-- Display transformed image -->
          <img src="{{ photo.transformed_image }}" alt="Image" class="img-fluid">
          <div class="gallery-overlay">
             <!-- Link to view in a new browser tab -->
             <a href="{{ photo.transformed_image }}" target="_blank"><h5>Click to View</h5></a>
          </div>
      </div>
   </div>
{% endfor %}

Scalability and reliability:
Cloudinary handles large volumes of images and high traffic, providing a scalable solution that grows with your application. Its infrastructure ensures high availability and reliability.

User-Generated Content Management

A focus in this app is user personalization and the ability for users to manage their own content. Here’s how that’s implemented:

User associations:
Users are linked to their content using a ForeignKey relationship:

# models.py

from django.contrib.auth.models import User

class Lookbook(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)

Profiles:
Another way user-generated content is personalized is through the integration of user profiles. Every user has a corresponding Profile that includes a bio and image. The profile is connected to its user and their lookbooks, enabling profile images to be displayed on the appropriate lookbooks. Here’s the code:

#models.py

class Profile(models.Model):
   user = models.OneToOneField(User, on_delete=models.CASCADE)
   profile_picture = CloudinaryField('profile_pictures')
   profile_url = models.URLField(blank=True, null=True, default='https://res.cloudinary.com/yelenik/image/upload/avatar')
   bio = models.TextField(blank=True)
   my_lookbooks = models.ManyToManyField(Lookbook, blank=True)

<!-- templates/all_lookbooks.html -->

def __str__(self):
       return self.user.username
div class="row">
   {% for lookbook in lookbooks %}
       <div class="col-md-4">
           <div class="card mb-4">
               <div class="card-body all">
                   <div class="d-flex align-items-center mb-3">
                       <img src="{{ lookbook.user.profile.profile_url }}" alt="{{ lookbook.user.username }}" class="rounded-circle mr-2" style="width: 40px; height: 40px;">
                       <h5 class="mb-0">{{ lookbook.user.username }}</h5>
                   </div>
                   <h5 class="card-title">{{ lookbook.title }}</h5>
                   <p class="card-text">{{ lookbook.description }}</p>
                   <a href="{% url 'display' lookbook.id %}" class="btn btn-primary card-btn">View</a>
               </div>
           </div>
       </div>
   {% empty %}
       <div class="col">
           <p>No lookbooks found.</p>
       </div>
   {% endfor %}
</div>

Dynamic Form Handling

Forms are essential for handling user inputs in any web application. This app uses LookbookForm and LookbookImageForm to manage lookbook creation and image uploads. These forms include custom save methods to handle specific logic, such as ensuring that image uploads are handled automatically via the CloudinaryImage field type.

# forms.py

class LookbookForm(forms.ModelForm):
    class Meta:
        model = Lookbook
        fields = ['title', 'description', 'overlay_image']

    def save(self, commit=True):
        instance = super().save(commit=False)
        if commit:
            instance.save()
        return instance

Utility Function for Image Processing

Remember how users can customize lookbooks by choosing formatting options? Well, they can also update these customized lookbooks. This makes it crucial to handle the bulk of image-processing tasks within utility functions, ensuring the codebase remains maintainable and consistent.

Functions like generate_transformation_options, get_public_id_from_url, and create_transformed_url are reused within the application, ensuring consistency during both creation and editing processes. These functions use Cloudinary’s AI-based transformations to generate modified copies of lookbook images based on user choices and updates.

Here’s an example of an original and transformed lookbook image, along with the code to generate it below:

Tip: Click the links to open the images in a browser tab and see their URLs.

# utils.py

def generate_transformation_options(lookbook):

   # Determine width and height based on orientation
   if lookbook.orientation == 'portrait':
       width, height = 400, 500
   elif lookbook.orientation == 'landscape':
       width, height = 800, 600
   else:  # square
       width, height = 800, 800

   # Initialize transformation list if not already present
   transformation_options = {                    }

   if 'transformation' not in transformation_options:
       transformation_options['transformation'] = []

   # Apply border style if border width is not '0px'
   if lookbook.border_width != '0px':
       transformation_options['border'] = f'{lookbook.border_width}_solid_{lookbook.border_color}'

   # Define base transformation options
   all_transformation = [
       {'quality': 'auto',
       'width': width,
       'height': height,
       'crop': 'pad',
       'background': 'gen_fill:ignore-foreground_true'}
   ]
   transformation_options['transformation'].insert(0, all_transformation)

   # Apply overlay image if provided
   if lookbook.overlay_image:
       overlay_transformation = [
           {'overlay': lookbook.overlay_image, 'gravity': 'north_east', 'width': 100, 'flags': 'layer_apply', 'x': 20, 'y': 20, 'opacity': 80}
       ]
       transformation_options['transformation'].insert(1, overlay_transformation)

   # Add scale transformation to make the width 800
   transformation_options['transformation'].insert(2, {'width': 800, 'crop': 'scale'})
   return transformation_options

def create_transformed_url(public_id, transformation_options):
   return CloudinaryImage(public_id).build_url(**transformation_options)

Efficient Data Querying and Filtering

Efficient data retrieval and filtering are vital for application performance. The lookbook app uses the Django ORM to fetch and filter lookbooks based on user selections. Take a look at the all_lookbooks function:

# views.py

def all_lookbooks(request):
    users = User.objects.all()
    user_ids = request.GET.getlist('user_ids')
    if not user_ids or 'all' in user_ids:
        user_ids = [str(user.id) for user in users]
    lookbooks = Lookbook.objects.filter(user__id__in=user_ids).order_by('title')
    return render(request, 'all_lookbooks.html', {'lookbooks': lookbooks, 'users': users, 'selected_user_ids': user_ids})

Robust URL Routing

A clear and intuitive URL routing scheme is essential for easy navigation within the application. The urls.py file defines clear URL patterns for accessing different views. In addition, it incorporates Django's built-in authentication views, simplifying user authentication management.

# urls.py

from django.urls import path
from lookbook_app import views
from django.contrib.auth import views as auth_views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/login/', auth_views.LoginView.as_view(), name='login'),
    path('accounts/logout/', auth_views.LogoutView.as_view(), name='logout'),
    path('signup/', views.signup, name='signup'),
    path('create_lookbook/', views.create_lookbook, name='create_lookbook'),
    path('display/<int:lookbook_id>/', views.display, name='display'),
    path('profile/', views.profile, name='profile'),
    path('my_lookbooks/', views.my_lookbooks, name='my_lookbooks'),
    path('all_lookbooks/', views.all_lookbooks, name='all_lookbooks'),
    path('', views.all_lookbooks, name='all_lookbooks'),
    path('edit_lookbook/<int:lookbook_id>/', views.edit_lookbook, name='edit_lookbook'),
]

Conclusion

This lookbook app demonstrates how Django and Cloudinary can create a robust platform for user-generated content. With features like Cloudinary integration, dynamic forms, and efficient querying, this project is an excellent example for developers interested in advanced web application techniques. Explore the project in GitHub and see how you can enhance its functionality. Learn more about specific Photo Collection App features on YouTube.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account