Cloudinary Blog

Cloudinary's jQuery plugin for embedding and transforming images

As web developers, we closely monitor the shifts in today's modern web applications architecture stack. We find the client vs. server-side HTML rendering debate particularly interesting.
 
In the past several years, we’ve witnessed the enormous rise in popularity of client-side JS/CoffeeScript MVC & MVVM solutions. From popular libraries such as Backbone.js that strive to add basic structure to client-side apps, all the way to feature-rich libraries that manage your entire client-side stack, with data-binding, client-server model sync, dependency tracking, templates and more. The involvement of high-profile companies and individuals in this market is also fascinating, between KnockoutJS contributions from Microsoft, the Google-backed Angular and Yehuda Katz's Ember, the heat is definitely on. 
 
Client-side rendering adoption will most likely continue to grow as major companies adopt the concept and treat the browser as just another device to access their server-based APIs. Twitter is one of these companies. Twitter's engineers has moved to client-side rendering a year and a half ago as part of their last major redesign work. They even went a step further and open sourced their entire Javscript toolbelt as part of the Bootstrap project.
 
Since we at Cloudinary have been longtime fans of server-side rendering, the first web application development framework we've integrated Cloudinary with was Ruby-on-Rails. 
Due to popular demand, we really wanted to help simplify image management for Javascript developers - client-side rendering and node.js developers alike. Fortunately, Cloudinary’s techniques are already based on simple URL and HTTP interfaces that can be easily integrated with any web-dev framework.
 
Without further ado, we want to introduce Cloudinary’s jQuery plugin. It is open-source and available at GitHub.
 
We have big plans for this jQuery plugin. We’ll tell you more about it in the follow-up posts. In the meantime, we wanted to show you how to easily integrate Cloudinary for embedding images and transforming images using Javascript.
 
For example, a JPG file was uploaded to Cloudinary and was assigned the 'sample' public ID.
 
First, configure your cloud name:
Copy to clipboard
$.cloudinary.config("cloud_name", "your_cloud_name_goes_here");
 
The following Javascript command returns the URL of a 150x100 transformed version of the uploaded image:
Copy to clipboard
$.cloudinary.url("sample.jpg", 
                 { width: 150, height: 100,
                   crop: 'fill', gravity: 'south'});
 
It returns the following Cloudinary URL that goes through AWS CloudFront CDN. Note that 'demo' should be replaced with your Cloudinary's cloud name.
 

 
Cloudinary's jQuery plugin includes the 'image' function. It returns an IMG HTML element that you can add to your page.
 
The following example generates a 150x100 PNG version of the uploaded image, this time with rounded corners. It also generated an IMG tag and adds it to the HTML DOM elements with the 'image_holder' class:
Copy to clipboard
$('.image_holder').append(
     $.cloudinary.image("sample.png", 
                        { width: 150, height: 100,
                          crop: 'fill', gravity: 'south', radius: 20}
                        ).addClass('my_class_name'));

This would generate the following HTML elements:
Copy to clipboard
<div class="image_holder">
   ...
  <img width="150" height="100" class="my_class_name"   
           src="https://res.cloudinary.com/demo/image/upload/
                       w_150,h_100,c_fill,g_south,r_20/sample.jpg"/>
</div>

You can use the same method to create an image tag with a Facebook profile picture. Simply specify the user's Facebook name, fan page name or numeric ID and the required format.
For example, the following Javascript commands returns Cristiano Ronaldo's Facebook profile picture. Using Cloudinary's image transformations, the picture is cropped to a face detection based thumbnail of 80x100 pixels.
Copy to clipboard
$.cloudinary.facebook_profile_image("Cristiano.jpg",
                    { width: 80, height: 100,
                      crop: 'thumb', gravity: 'face'});

 
See our documentation of Facebook & Twitter profile picture for more details.
 
Note: '$' in all examples can be replaced with ‘jQuery’.
 
Another useful thing you can do with the jQuery plugin is lazy loading of images and resizing on demand and on the fly. 
 
For example, add the following image tag to your HTML:
Copy to clipboard
<img src="blank.png" class="dynamic_image”"
     data-src="couple.jpg" 
     data-width="115" data-height="135
     data-crop="thumb" data-gravity="faces" data-radius="20"/>
 
It points to a placeholder 'blank.png' image, but the actual image is 'couple.jpg'. 'couple' is a public ID of an image previously uploaded to Cloudinary. All attributes starting with 'data-' are parameters to Cloudinary's image transformation engine.
 
Simply running 'cloudinary' on a given jQuery selector would process all images matching the given selector. The following example processes all elements with the dynamic_image class when the document is ready:
Copy to clipboard
$(document).ready(function() {
     $(".dynamic_image").cloudinary();
});
 
This would automatically generate transformed versions on the fly. In this example, a 115x135 rounded-cornered thumbnail based on face detection. The transformed image is delivered through a fast CDN. The IMG tag would be converted to the following and the requested image would be displayed:
Copy to clipboard
<img src="https://res.cloudinary.com/demo/image/upload/
                    w_115,h_135,c_thumb,g_faces,r_20/couple.jpg"
     width="115" height="135" class="dynamic_image"/>

 
What do you think? We would love to hear your feedback on our jQuery plugin and your ideas for enhancements. We are already working on some cool additions, we would update you soon...
 

Recent Blog Posts

Identifying Errors in Customer Media Assets With an Internal Tool

I still remember well my first week as a DevOps at Cloudinary. The year was 2017. Everything was new to me—people, laptop, processes—all of which to become familiar with in short order. A mantra often repeated to me in those days was that, Cloudinary being a SaaS, continuous service uptime is its most important goal.

Read more
Transformation Management Made Easy With Cloudinary

Transforming images with Cloudinary is simple, right? You find the ones you want and add them to your URL, building them up and trying them out until they’re perfect. You can then save the transformations that you created as named transformations for reuse. That final step sounds straightforward, but up until now has been a little tricky. With Cloudinary’s slick and new UI, creating and managing transformations through the Management Console just got even simpler. That UI now includes—

Read more
Generate Personalized Video Slideshows Automatically

Slideshows. Though sometimes boring, they are an essential cog in the corporate wheel, having served for decades as the medium for presentations. For a more lively display, consider combining various media types into a single video slideshow, which could serve as compelling, personalized, and engaging content for your users. Additionally, you can apply sophisticated transition configurations and Cloudinary’s many transformation capabilities.

Read more
It’s High Time to Replace JPEG With a Next-Generation Image Codec

I can be quite passionate about image codecs. A “codec battle” is brewing, and I’m not the only one to have opinions about that. Obviously, as the chair of the JPEG XL ad hoc group in the JPEG Committee, I’m firmly in the camp of the codec I’ve been working on for years. Here in this post, however, I’ll strive to be fair and neutral.

Read more
Adopting New Image Format AVIF With Cloudinary

AVIF is a new image format for the web. Before I tell you all about it, let me show you what AVIF can do.

One way to compare image codecs is to encode the same image in different formats at matched file sizes and then compare the visual quality of the resulting images. For example, I rendered the AVIF below with a q_50 quality transformation. It weighs 12.3 KB and, compared to the lossless original it looks pretty good subjectively.

Read more