MediaFlows combines the power of Cloudinary’s image processing, editing, and optimization into graphical workflows that can be triggered by events, integrated with third-party services, and more. It also enables you to rapidly prototype powerful media processing workflows that can be shared and deployed.
To make the most of MediaFlows, it’s important to have a handle on the basic building blocks. In this blog post, you’ll learn about the building blocks of a flow and the amazing features to help you put them together.
Before you get started with MediaFlows, you’ll need to sign in to the MediaFlows website through your Cloudinary account and create a new project.
Once you’re logged in, there are a few different ways to create a new flow. You can:
- Use a template.
- Start from scratch.
- Leverage FlowAI’s AI-powered assistant.
However you end up building your MediaFlows, it will be useful to understand the building blocks so you can make adjustments as needed.
Templates are a great way to start a new MediaFlow, especially if it’s similar to what you’re trying to accomplish. Even if you can’t find a MediaFlow that fits your use case exactly, it could still be a good place to start. Looking through the template library will give you a good idea of the types of workflows that you can create.
The template library has categories that are useful to find what you’re looking for:
- Cloudinary Basics. A good place to get started with templates for editing and uploading media.
- Media Editing. Transform images to banners, a common use case of editing/transforming images.
- Media Management. You can find some more advanced examples here that integrate with third-party services like Shopify or AI tools.
MediaFlows are composed of blocks. There are several different types of blocks to accomplish various things. Each block is typically a well-defined and self-contained unit of work.
- Triggers. A trigger kicks off a flow. Cloudinary Upload, Schedule, and metadata changes are examples of different triggers.
- Flow Logic. A set of logical conditions that you can add to the flow. For example: “If the image metadata has this value, continue.”
- Developer Tools. These are various utilities for your flows. Some of these blocks can be useful in a variety of interesting ways.
- Cloudinary APIs. These blocks are the graphical version of various Cloudinary APIs that allow you to manage your media files.
- Cloudinary Add-ons. These blocks are integrations with other services that Cloudinary provides
- Integrations. These are third-party service integrations (e.g., Shopify, Mailchimp, etc.)
- Notifications. These integrations allow you to trigger notifications with various services from your flows.
- Transformations. Another key block type that allows you to edit and transform your media assets in various ways (cropping, overlays, etc)
In the UI, this idea is represented by blocks that are connected by some arrows. Each block takes input, does some work, and provides output. It’s not exactly like a pipe where the input is just the output from the previous block. Instead, the output of a block is made available as a state to any following blocks in the flow. We’ll see what this looks like in the next section.
The most simple and common flows consist of a trigger and transformation.
Trigger: Upload Image → Transformation: Crop
The upload image block being the trigger will pass the data of the newly uploaded image to the crop block in this example. Most flows will build and add more layers on top of this basic idea.
Trigger: Upload Image → Transformation: Optimize Media → Integration: Shopify Upload Image
In the MediaFlows UI, it’s pretty easy to imagine and visualize how various blocks fit together. This makes building flows feel natural and intuitive.
Each block has its own configuration. You can click a block in a flow and it will open a slide-out. The slide-out will typically contain information about the block and fields for configuration. Block configuration is a more involved part of creating a flow, and where the testing and prototyping will happen. The best way to get a handle on block configuration is by looking at blocks in templates that are already configured.
Let’s look through the Upload to Shopify template to learn more about configurations.
The flow consists of four blocks: a trigger, two conditions, and an integration.
- DAM App. This block contains an input called Application Image where we provide an image URL in our Cloudinary Media Library.
- Apply On Each. In the Input List input we provide the value of a list of assets from the previous block. This is a dynamic value provided by the previous block that we can select. The template has
[DAM App].result.assetsselected. This means that the following connected blocks will be executed for each item for this value. - If Image. This block has a field for two different values (First variable, Second variable) that will be compared based on the Operator field and Variable type field. The first variable configured in the template is the type of the asset passed in from the previous block. If the media type is an image, it will be passed along to the next block.
- Upload Image. This is the Shopify integration block that requires a Shopify Access Token and Store Name to be able to function. It’s configured to take a Product Id and an Image URL. It’s the final step in our flow.
The example provided from this template is a great starting point to get a handle on how block composition and configuration work.
MediaFlow provides a lot of power for quickly prototyping and debugging flows. We’ll look at how we can use FlowAI to give us a good starting point and use some of the debugging tools available to quickly get to a working flow that we can share or deploy.
This is a new feature that uses generative AI to create a flow based on a prompt. Let’s get started with a new flow by prompting FlowAI with what we want.
To use FlowAI, click on the template link. There is a section at the bottom of the template view for providing your prompt.
Let’s provide a prompt to get started:
When an image is uploaded to Cloudinary, analyze the image with OpenAI and send the result to Slack.
We get a flow with all the blocks we need already put together! I can’t think of an easier way to get going.
We have our blocks but we do need to go through and make sure that they’re all configured correctly. At the very least we’ll need to make sure that we add our Webhook URL for Slack. After you have your blocks configured, you’ll want to save your changes.
Since this is the first time we’ll run our flow, click the cog icon first to make sure you have the run configured. The setup involves providing the media or whatever data is required for our initial trigger block. For this example flow, it’ll be an upload. It comes prefilled with a URL to an image, but you might want to test with one of your own files instead.
Next, click Run to test out your flow! If you’ve configured the example flow, you’ll receive a Slack message with the analysis of the image that was uploaded. If you didn’t, you’ll need to do some debugging.
There are a few developer tool blocks dedicated to parsing and marshaling data, which can come in handy outside of debugging as well. It’s hard to beat good ol’ fashioned logging for debugging in a lot of situations though.
If we ran our example flow and didn’t receive a notification, start debugging by connecting the OpenAI block to a Add To Log block to see if there’s a response from the API.
We can attach an additional Add To Logs block to our OpenAI Analyze Image block. We just need to configure it with a dynamic value from the OpenAI block.
We can then rerun our flow and check the logs sidebar to see if we get the result we expected from OpenAI.
We can see that we’re getting the expected result from OpenAI, so this means the issue is somewhere in our Slack block.
MediaFlows is a powerful tool for quickly building media workflows with an easy-to-use UI builder. Understanding block composition and configuration is all you need to start building your own flows. We’ve seen how we can use tools like Templates and FlowAI to help us quickly prototype and create new flows. We’ve also taken a look at using logs to debug issues in a flow. Once we’ve tested a new flow and are getting the results that we are looking for, we can easily share them with a team member from the MediaFlow UI or use them in production scenarios.
Get started for free with MediaFlows today.
