How to Create a Cloudinary Image Transformation

How to create a Cloudinary Image Transformation: Create a Cloudinary Transformation in this step-by-step tutorial and learn how to create a new transformation preset.

This tutorial was created by Neil Humphrey & Pamela Peña.

Table of Contents

How to create a Cloudinary image Transformation.
How to create a Cloudinary image Transformation.

Create a Cloudinary Image Transformation

Learn how to mold and manipulate the design of your images using parameters to create your own unique design system.

Cloudinary Image Transformations.

Image Uploading

Cloudinary Image Upload

  1. Login to your Cloudinary Dashboard.
  2. Select Media Library.
  3. Click Upload Button.

Upload Image Button.

Image Transformation Parameters:

Use these parameters to manipulate your image in a single upload.

  • Width
  • Height
  • Crop
  • Aspect Ratio
  • Gravity
  • Zoom
  • X-axis
  • Y-axis
  • Format
  • Fetch Format
  • Quality
  • Radius
  • Angle
  • Effect
  • Opacity
  • Border
  • Overlay
  • Underlay
  • Default Image
  • Delay
  • Color Space
  • DPR (Direct Aspect Ratio)
  • Page
  • Density
  • Flags
  • Raw Transformation
  • Transformation
  • Arithmetic Operators
  • If
  • Variable

Image Presets & Manipulation

https://res.cloudinary.com/omaha-code/image/upload/t_cloud/v1564551783/rocket-3122690-pdf.jpg

  1. Click the Ellipses – Manage.
  2. For our example we are creating a preset for an article on LinkedIn, and we will only edit some basic image features:
    • Size: 1200Wx675L
    • Scale: Artistic Filter 
    • Filter: Frost 
    • Change the aspect Ratio: 16:9
    • DPR (device Pixel Ratio): 2.0 Pixel 
  3. Select Transformation.
  4. Create a new transformation.
  5. Save As: Preset name.
  6. Add to presets.

Manage Image Transformations.

 

Image Uploading

  1. Select Media Library.
  2. Choose New Preset.
  3. Copy URL Paper Clip or download it.
Image Manipulation.
Image Manipulation.

Cloudinary Media Developer Expert

Cloudinary MDEs will receive prioritized access to the Cloudinary platform, products and internal resources, as well as training opportunities and community events.

Certified MDEs will also play an important role in contributing to the broader developer network across the media management ecosystem through a variety of efforts including open-source projects, hackathons, meetups, conferences, workshops, content opportunities and more.

More Cloudinary Tutorials

Learn how to use Cloudinary from a trained Media Developer Expert.

 

Pamela Peña

Advisor at Carson Wealth since 2014.

Reach Out

Neil Humphrey

Lifelong learner and Software Engineer.

Reach Out

Create a Custom Linkedin Banner with Cloudinary

Create a Linkedin Profile Banner with Cloudinary

Design and create a Linkedin Profile background Image using Cloudinary Transformation presets.

Perfect Banner Images Every Time

Use upload presets to generate millions of opportunities for designers and frontend developers to mold and create.

Personal Linkedin Profile Banner Design

Design and create a Linkedin Profile background Image using Cloudinary Transformation presets.

Designing a Linkedin Profile Banner

Designing a custom linkedin profile banner with cloudinary transformation presets.

Cloudinary Tutorials - LinkedIn Profile Banner

Linkedin Profile Banner Dimensions

396 Pixels in Height

The image needs to be 396px tall to fit your linkedin profile banner.

1584 Pixels Wide

Additionally, your transformation preset width should be set to 1,584px wide.

Free Linkedin Profile Banners

Use the free images below for your own banner image or use them as transformations.

Mountains

City Skyline Illustration

Trees in Nature

Desert Landscape

Sunset Illustration

Floral Pattern

Kitten

Polygons

How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN

How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN

Speed up your WordPress site with a free CDN from Cloudinary.

Continue Learning Sign Up

How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN.
How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN

In this tutorial, I’ll show you how to speed up your WordPress website using a free Cloudinary Image CDN.

Migrate all of your existing WordPress images Cloudinary in minutes using the Auto Cloudinary Plugin.

Table of Contents


Image CDN Benefits

Hosting many images within your WordPress site slows down your sites performance and increases bandwidth. An Image CDN makes the process of serving images as seamless as possible. It increases the speed of your website by offloading images and caching static content. Image CDN’s also interpret the screen size and resolution of the device, the DPI, as well as supported image formats. In addition, an image CDN is able to dynamically render a master image to correspond with the specifications of the device.


Create a Free Cloudinary Account

You’ll need to sign up for a free account, then input your company or site name that will become your cloud name.

Create a Free Cloudinary Account.
Create a Free Cloudinary Account.

The cloud name is important when we configure the Auto Cloudinary Plugin.

  • First, create a free account with Cloudinary.
  • Create a cloud name used to configure Auto Cloudinary Plugin.

Once your signed in, you’ll be able to view a custom dashboard with your account details.


Your Cloudinary account details include:

  • Cloud-Name.
  • API Key.
  • API Secret.
  • Environment Variable.

Create a new Folder within the Media Library

The new folder will be used to automatically serve your new and existing images from a Cloudinary Image CDN. If you have a large site with many images stored within your WordPress Media Library, using a CDN will increase the performance of your website immediately.

Configure Your Cloudinary Settings

Now, select the settings icon located on the top right of the page within your dashboard menu. Cloudinary Settings.

Select Upload Settings

After selecting the uploads tab, scroll down to Auto Upload Mapping settings.


Cloudinary Auto Upload Settings.


Input the Name of the Folder You Created

Since I created a new folder titled omaha-code-cdn, this will be used as the name of the auto upload mapping folder.

URL Prefix

Now, Input the URL prefix of your WordPress uploads folder. The URL Prefix will appear as the your domain name and wp-content/uploads/. As you can see, my URL Prefix appears as https://omahacode.com/wp-content/uploads/. Note: Replace with your own domain. “https://yourdomain.com/wp-content/wp-uploads/”

Download The Auto Cloudinary Plugin

Navigate back to your WordPress dashboard and select the Plugins tab. Click Add New Plugin, then type “Auto Cloudinary” into the search bar. Upload Auto Cloudinary Plugin. You may have noticed that Cloudinary also created an official plugin. I prefer the Auto Cloudinary plugin because it’s much easier to setup.

Auto Cloudinary Plugin Benefits

The official Cloudinary Plugin is somewhat of an overkill, and takes over the user interface of your image admin within WordPress. Auto Cloudinary Plugin has also been tested with the latest WordPress Update, and the official Cloudinary Plugin is untested with the latest WordPress Update.

  • Super simple and light-weight.
  • Totally seamless and out of the way.
  • A flexible tool for WordPress developers.

Under Tools, Select the New Cloudinary tab

Within your WordPress Dashboard, select Tools > Cloudinary. Under Tools, Select Cloudinary Tab.

Configure Auto Cloudinary Options

Input your Cloud Name and the name of your auto mapping folder. My Cloud Name is Omaha-Code, and my auto mapping folder is omaha-code-cdn. Image CDN Configuration. Choose “Automatically use Cloudinary for all Images” to create a super easy Auto-Upload feature in the Fetch API. This plugin tells Cloudinary where to find the files on our server (or on S3 or anywhere on the Internet), and it automatically downloads it from there,  thus saving it on to it’s servers the first time you ask for it, like a CDN would!

Done.

Now Cloudinary will automatically fetch and serve the images from your WordPress media library using a Cloudinary Dynamic File name.

Cloudinary Auto-Upload for WordPress

View the github repository here.

Cloudinary Auto Upload Tutorial

Once an image has been auto-uploaded from the remote location, all requests for the image will reference the image stored in your Cloudinary account.

This feature supports all resource_types (image, video and raw).

Image CDN Cloudinary and WordPress.
Cloudinary Image CDN Tutorial Background.

Cloudinary’s Media Developer Experts

As a Cloudinary MDE, I’ve received 2 days of first-hand training from Cloudinary software engineers.

Cloudinary Expert Neil Humphrey