Cloudinary Blog

How to quickly build a stock photo site using Cloudinary

By Tal Lev-Ami
Image Authentication and Delivery of Private Images

UPDATE - Since this post was published, we have added a more advanced solution that allows delivering private and authenticated images to your users. See the documentation on Media access control for more details.

 

Different web applications have very different requirements when images are involved. A dating website will focus its image-related attention on normalizing and delivering his user uploaded snapshots. A pinterest style service is focused on retrieving external images from around the web and fitting them to its cool layout. An eCommerce website is focused on the effective delivery of the many product thumbnails it depicts.
 
While every website has different image related needs, they all share many commonalities. At Cloudinary we strive to coalesce all of our customers' image requirements into a single coherent image pipeline management service.
 
In the past several months we were repeatedly asked about private images and strict transformations. These two features are now available through Cloudinary, and what better way to tell you about them then showing you how these work in a real-world use-case - building a stock photo site.
 

Stock Photo Service - Requirements

So what does building a stock photo service entails?
 
Our photos website’s content manager will want to upload the original hi-resolution images to the cloud for safe storage. These are our most prized assets and will need to be protected from prying eyes (and clicks). We will want to publicly display smaller, low resolution thumbnails of our photos for potential buyers to browse. We'll also want to add watermarks to all of our images to prevent copying, and deliver these many images through a fast CDN for quick browsing. Finally, after a purchase was made, we'll want to allow our buyer (and only him) access to his purchased hi-resolution photo.
 
If you are familiar with Cloudinary, you already know that we make it quite simple to upload images to the cloud, generate thumbnails, add watermarks and deliver the resulting images through a fast CDN. Today we wanted to introduce our latest two features - uploading private, authenticated images and strict transformations.
 
To make this post shorter, most of the examples below are for Ruby-on-Rails. The same can be easily accomplished with any one of our client libraries, or by directly using our URL-based APIs.
 

Uploading Private Images to the Cloud

When uploading images to Cloudinary, both the original images and their transformed versions are publicly available through a CDN. Our default randomly generated public IDs will prevent users from guessing your URLs.
 
This is all very nice for the majority of websites out there, but simply won't do for our stock photo site. Here, we'll want a far more secured approach, and this is where private uploads comes in.
 
Starting today, you can upload private images to Cloudinary. Simply set the type parameter to 'private' (instead of the default 'upload' type). For example, the following Ruby code uploads a private image to Cloudinary:
Copy to clipboard 
Cloudinary::Uploader.upload("sheep.jpg", :public_id => "sheep", :type => :private)
 
Same in PHP, Python and Node.js:
Copy to clipboard 
\Cloudinary\Uploader::upload("sheep.jpg", "public_id" => "sheep", "type" => "private")
Copy to clipboard 
cloudinary.uploader.upload("sheep.jpg", public_id = "sheep", type = "private")
Copy to clipboard 
cloudinary.uploader.upload("sheep.jpg", function(result) { }, 
                           {public_id: 'sheep', type: "private"})
If you use CarrierWave in your Ruby project, simply add 'make_private' to your uploader class. In the example below we also request to eagerly generate a 164 by 164 thumbnail on upload, and store it in JPG format with 80% quality:
Copy to clipboard 
class PictureUploader < CarrierWave::Uploader::Base  
    include Cloudinary::CarrierWave  
    make_private
    eager

    version :medium do    
      process :resize_to_fill => [164, 164, 'North']
      process :convert => 'jpg'
      cloudinary_transformation :quality => 80
    end
  end
Trying to publicly access the uploaded image is not possible:
https://res.cloudinary.com/private-demo/image/private/sheep.jpg
 

Strict transformations

One of Cloudinary's more powerful features is the ability to dynamically transform images on-the-fly. However, in some cases, like our stock photo site example, you might prefer to prevent your users from accessing just any type of image transformation. You want to strictly define the transformations you allow.

Starting today, you can switch your account to a strict transformations mode by enabling the new "Strict Transformations" setting in your Cloudinary management console's settings page:

When strict transformations are enabled, users can publicly access only images created through named transformations or dynamic transformations that you personally marked as allowed. In addition, incoming or eager transformations generated using an authenticated request to our API, are also allowed.

To mark a transformation as allowed or disallowed, head to the "Transformations" section of the Management Console. Near each transformation, you’ll find a green / red icon. Click it to allow or disallow the transformation. You can also pre-allow dynamic transformations when Strict Transformations are still disabled - can be useful when you're in development mode.

 

Trying to generate and access an allowed transformation will work fine:

https://res.cloudinary.com/private-demo/image/private/w_300,h_200,c_fill,r_20/sheep.jpg

 

Trying to access any other transformation, either disallowed or non-existing, will simply fail. As you can see below, you can always check the X-Cld-Error response header for finding out the reason of non-delivered images.

https://res.cloudinary.com/private-demo/image/private/c_fill,h_200,w_320/sheep.jpg

https://res.cloudinary.com/private-demo/image/private/w_1.0,r_20/sheep.jpg

Status Code: 401 Unauthorized
X-Cld-Error: Transformation w_1.0,r_20 is not allowed

Back to our stock photo site - we can't just allow anyone to dynamically create hi-res transformations of our originals, can we? We will be better off allowing only low resolution transformations that add a watermark to all images:

.../image/private/w_200,h_150,c_fill/l_watermark,w_200,h_150/sheep.jpg

 

Private download URLs

Privately uploading images together with strict transformations allow safe, cloud-based storage for images that are inaccessible to your users, side-by-side with publicly available scaled down versions of these same images.

This is a great start for our stock photo site, but one crucial feature still remains. Assume that a buyer purchases a photo, how can we deliver the original image to him (and only to him) while our originals are inaccessible to anyone but us?

For that, you (and only you) can generate a unique, signed URL, based on your account's API Key and Secret. Anyone you share this URL with will have temporary access to download the original, high-resolution image. This URL will automatically expire after one hour.

For example, generating such a URL in Rails is done by simply calling the cl_private_download_url view helper method (or Cloudinary::Utils.private_download_url from your model or controller):

Copy to clipboard 
<%= link_to("Download", cl_private_download_url("sheep", :jpg)) %>

This will generate a link similar to the following (this one has already expired...):

https://api.cloudinary.com/v1_1/private-demo/image/download?api_key=824698761754661&format=jpg&public_id=sheep&signature=d994c2b972c30d84d33fde684aa377fc17878be6&timestamp=1346076992

This method delivers the original images through a secure authenticated API request and not through the faster CDN. Therefore, this method is most appropriate when the original images are not accessed very frequently.

Summary

Uploading private and authenticated content were features frequently requested by many of Cloudinary's customers. Supporting these now, opens a wide range of new image management streamlining use-cases that Cloudinary can cover, such as our imaginary new stock photo site.

Strict transformations and private uploading are available to all of our plans, free and paid. As mentioned above, authenticated image delivery through a CDN is available for the Advanced plan or higher (contact us for details).

The stock photo example is a very cool use case. There are plenty of other use cases that these features are relevant for. Do you have such an interesting use-case you can share? Tell us about it and we will be happy to share it with our community.

Recent Blog Posts

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more

Compelling Visual Experiences Are Imperative for DTC E-Commerce

By Pradip Lal
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more

Automatically Translating Videos for International Outreach

By
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more

Minted Delivers High-quality Art at Scale with Cloudinary

By
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more

ImageCon 2021 by the Numbers: Fun Facts and Event Highlights

By
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more