Auto Cloudinary

Descrizione

Check out the Github Repository โ™ฅ

This plugin provides a super simple Cloudinary auto-upload implementation for WordPress.

It is inspired by Photon and Tachyon.

Cloudinary will automatically fetch and serve the images from your media library like a CDN, without you having to worry about the complicated upload API! Just set up auto-upload in your Cloudinary settings, enter the details in the plugin’s options, and you’re all set!

Easy peasy ๐Ÿ˜Ž

Important

This plugin is incompatible with the official Cloudinary plugin. You’d need to disable that plugin before using this one.

Quick Links

Setup | Issues | Functions | Filters | Best Practices

Why did you build this plugin?

There already is an official Cloudinary plugin available. But in my opinion, it’s a bit of an overkill and takes over the admin UI. This plugin aims to be:

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

What is Cloudinary Auto-Upload?

Cloudinary gives you two options to upload files to it’s servers:

  1. The complicated Upload API ๐Ÿ˜ฑ
  2. The super easy and magical Fetch API ๐ŸŽฉ

Upload API

TL;DR: Too complicated and in the way ๐Ÿ‘Ž

Cloudinary gives you an API, using which, you can manually upload the images to Cloudinary. So you’d need an API key, etc. The official plugin 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 existing images, and might not be flexible enough to support custom architecture.

Fetch API

TL;DR: Magical ๐Ÿ‘

This plugin uses the super easy Auto-Upload feature in the Fetch API. We just tell Cloudinary where to find the files on our server (or on S3 or anywhere on the Internet), and it automatically downloads it from there and saves it on to it’s servers the first time you ask for it, like a CDN would!

What does this plugin do?

This plugin does two main things:

  1. Provides a simple function cloudinary_url() to get a Cloudinary auto-upload URL for any image in your media library, with all the Cloudinary transformations, so you can dynamically manipulate an image on the fly.
  2. Attempts to automatically convert all image URLs on the front-end into a Cloudinary auto-upload URL, so you can use Cloudinary as an image CDN.

The magical function ๐ŸŽฉ

cloudinary_url( $identifier, $args )

This function returns a Cloudinary Auto Upload URL for an image. Please read the Best Practices page before using this.

Parameters

  • identifier (integer/string)(required) : Either the ID of the attachment, or a full image URL.
  • args (array)(optional) : Arguments to manipulate the image.

Return Value

Returns a URL (string):

'https://res.cloudinary.com/cloud-name/auto-mapping-folder/2017/12/your-image.jpg'

Arguments

You can optionally send an array of arguments which can transform the image, and set a dynamic file name. Ex:

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!
);

Here’s a full list of transformations you can achieve with Cloudinary.

Examples

<?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="">

Screenshot

  • WordPress Options
  • Cloudinary Cloud Name
  • Cloudinary Auto Upload Setup

Installazione

Upload ‘auto-cloudinary’ to the ‘/wp-content/plugins/’ directory.

Activate the plugin through the ‘Plugins’ menu in WordPress.

Recensioni

20 Dicembre 2019 1 risposta
Insta crashed my site as soon as it was activated. Just renamed the folder and was able to regain admin access and uninstall it, but obviously doesn't work for me for some reason. Fatal error: Cannot redeclare cloudinary_url() (previously declared in /home1/sceniccoachtours/public_html/wp-content/plugins/auto-cloudinary/inc/helpers.php:11) in /home1/sceniccoachtours/public_html/wp-content/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/lib/Helpers.php on line 414 There has been a critical error on your website. Please check your site admin email inbox for instructions.
15 Febbraio 2019
If you are using the Screenshots as instructions, it takes just 10 Minutes to make it work. Works for me out of the box with: + GeneratePress + WP Rocket Cache - Lazy Loader - HTML, CSS & JavaScript Combine + Minification + Foo Gallery & Foobox - Only the "visible" Images/Thumbnails. + Yuzo Related Post Thumbnails
Leggi tutte le recensioni di 13

Contributi e sviluppo

“Auto Cloudinary” รจ un software open source. Le persone che hanno contribuito allo sviluppo di questo plugin sono indicate di seguito.

Collaboratori

Traduci “Auto Cloudinary” nella tua lingua.

Ti interessa lo sviluppo?

Esplora il Codice segui il Repository SVN iscriviti al Log delle Modifiche. Puoi farlo tramite RSS con un lettore di feed.

Changelog (registro delle modifiche)

1.3.0

  • Better handling of soft crops #41

1.2.3

  • Fixed missing admin settings page #32

1.2.2

  • Re-opened and fixed “Fix images sizes in block editor” #25

1.2.1

  • Fix images sizes in block editor #25

1.2.0

1.1.1

  • Better AJAX support #13

1.1.0

1.0.3

1.0.2

  • Remove empty width and height from URL #1

1.0.1

  • Add default crop to replaced content images.

1.0.0

  • First stable release.