Super simple Cloudinary auto-upload implementation for WordPress.

alpipego

ResizeFly

Dynamically resize your WordPress images on the fly. Upload them once and don't worry about missing or new image sizes.

Junaid Bhura

<p><a href="https://github.com/junaidbhura/auto-cloudinary" rel="nofollow ugc">Check out the Github Repository ♥</a></p>
<p>This plugin provides a <strong>super simple</strong> <a href="https://cloudinary.com/documentation/fetch_remote_images#auto_upload_remote_resources" rel="nofollow ugc">Cloudinary auto-upload</a> implementation for WordPress.</p>
<p>It is inspired by <a href="https://developer.wordpress.com/docs/photon/" rel="nofollow ugc">Photon</a> and <a href="https://github.com/humanmade/tachyon-plugin" rel="nofollow ugc">Tachyon</a>.</p>
<p>Cloudinary will <strong>automatically fetch and serve the images</strong> from your media library like a <strong>CDN</strong>, without you having to worry about the complicated upload API! Just <a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Setup" rel="nofollow ugc">set up auto-upload</a> in your Cloudinary settings, enter the details in the plugin’s options, and you’re all set!</p>
<p>Easy peasy 😎</p>
<h3>Important</h3>
<p>This plugin is <strong>incompatible with the official Cloudinary plugin</strong>. You’d need to disable that plugin before using this one.</p>
<h3>Quick Links</h3>
<p><a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Setup" rel="nofollow ugc">Setup</a> | <a href="https://github.com/junaidbhura/auto-cloudinary/issues" rel="nofollow ugc">Issues</a> | <a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Functions" rel="nofollow ugc">Functions</a> | <a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Filters" rel="nofollow ugc">Filters</a> | <a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Best-Practices" rel="nofollow ugc">Best Practices</a></p>
<h3>Why did you build this plugin?</h3>
<p>There already is an <strong>official Cloudinary plugin</strong> available. But in my opinion, it’s a bit of an overkill and takes over the admin UI. This plugin aims to be:</p>
<ul>
<li><strong>Super simple</strong> and light-weight</li>
<li>Totally seamless and <strong>out of the way</strong></li>
<li>A flexible tool for <strong>WordPress developers</strong></li>
</ul>
<h3>What is Cloudinary Auto-Upload?</h3>
<p>Cloudinary gives you two options to upload files to it’s servers:</p>
<ol>
<li>The complicated <strong>Upload API</strong> 😱</li>
<li>The super easy and magical <strong>Fetch API</strong> 🎩</li>
</ol>
<h4>Upload API</h4>
<p><em>TL;DR: Too complicated and in the way</em> 👎</p>
<p>Cloudinary gives you an API, using which, you can manually upload the images to Cloudinary. So you’d need an <strong>API key</strong>, etc. The <strong>official plugin</strong> uses this method. When you upload an image to the media library, it in turn, uploads it to Cloudinary. This could be a problem if you have thousands of <strong>existing images</strong>, and might not be flexible enough to support <strong>custom architecture</strong>.</p>
<h4>Fetch API</h4>
<p><em>TL;DR: Magical</em> 👍</p>
<p>This plugin uses the super easy <strong>Auto-Upload</strong> feature in the <strong>Fetch API</strong>. We just tell Cloudinary where to find the files on our server (or on S3 or anywhere on the Internet), and it <strong>automatically downloads</strong> it from there and saves it on to it’s servers the <strong>first time you ask for it</strong>, like a CDN would!</p>
<h3>What does this plugin do?</h3>
<p>This plugin does two main things:</p>
<ol>
<li>Provides a simple function <code>cloudinary_url()</code> to get a Cloudinary auto-upload URL for any image in your media library, with all the Cloudinary transformations, so you can <strong>dynamically manipulate an image on the fly</strong>.</li>
<li>Attempts to automatically convert all image URLs on the front-end into a Cloudinary auto-upload URL, so you can <strong>use Cloudinary as an image CDN</strong>.</li>
</ol>
<h3>The magical function 🎩</h3>
<p><strong><code>cloudinary_url( $identifier, $args )</code></strong></p>
<p>This function returns a Cloudinary Auto Upload URL for an image. Please read the <a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Best-Practices" rel="nofollow ugc">Best Practices</a> page before using this.</p>
<h4>Parameters</h4>
<ul>
<li><strong>identifier</strong> (integer/string)(required) : Either the ID of the attachment, or a full image URL.</li>
<li><strong>args</strong> (array)(optional) : Arguments to manipulate the image.</li>
</ul>
<h4>Return Value</h4>
<p>Returns a URL (string):</p>
<pre><code>'https://res.cloudinary.com/cloud-name/auto-mapping-folder/2017/12/your-image.jpg'
</code></pre>
<h4>Arguments</h4>
<p>You can optionally send an array of arguments which can transform the image, and set a dynamic file name. Ex:</p>
<pre><code>array(
    'transform' => array( // Optional. All transformations go here.
        'width'   => 300,
        'height'  => 200,
        'crop'    => 'fill',
        'quality' => '80',
        'gravity' => 'face',
    ),
    'file_name' => 'whatever-file-name-you-want', // Optional. If you want to use a dynamic file name for SEO. Don't use the file extension!
);
</code></pre>
<p>Here’s a <a href="https://cloudinary.com/documentation/image_transformations" rel="nofollow ugc">full list of transformations</a> you can achieve with Cloudinary.</p>
<h3>Examples</h3>
<pre><code><?php
$url_1 = cloudinary_url( 123, array(
    'transform' => array(
        'width'   => 300,
        'height'  => 200,
        'crop'    => 'fill',
        'quality' => '80',
        'gravity' => 'face',
    ),
    'file_name' => 'dynamic-file-name',
) );

$url_2 = cloudinary_url( 'https://www.yourwebsite.com/wp-content/uploads/2017/12/my-image.jpg', array(
    'transform' => array(
        'width'   => 100,
        'height'  => 100,
    ),
) );

// $url_1 : https://res.cloudinary.com/cloud-name/images/w_300,h_200,c_fill,q_80,g_face/auto-mapping-folder/2017/12/my-image/dynamic-file-name.jpg
// $url_2 : https://res.cloudinary.com/cloud-name/w_100,h_100/auto-mapping-folder/2017/12/my-image.jpg
?>

<img src="<?php echo esc_url( $url_1 ); ?>" width="300" height="200" alt="">
<img src="<?php echo esc_url( $url_2 ); ?>" width="100" height="100" alt="">
</code></pre>


Auto Cloudinary

my experience with this plugin:

1. installed
2. did the setup, which is well documented
3. works!

Alternatives to Auto Cloudinary

Top alternatives