Cloudinary Blog

Uploading, converting and generating thumbnails for PDF documents

How to Create PDF Thumbnails Automatically
Web applications that manage user data, commonly allow their users to upload such data as PDF documents. A common UI practice employed by such services is to show a thumbnail of the PDF cover letter for quick identification, and thumbnails of the different PDF pages for fast access.
 
Using Cloudinary, you can accomplish such tasks with ease. 
 
In this blog post we wanted to showcase some of Cloudinary’s powerful PDF (and multi-page TIFF) management capabilities.
 

page load speed


Uploading PDF files

From a website’s perspective, PDF assets share many usability characteristics as regular image files, and so we treat them quite the same as images. You can simply use our standard upload API for uploading PDF files.

Ruby on Rails:
Copy to clipboard
Cloudinary::Uploader.upload("SinglePageSample.pdf", :public_id => "single_page_pdf"
Python:
Copy to clipboard
cloudinary.uploader.upload("SinglePageSample.pdf", public_id = 'single_page_pdf')
Node.js:
Copy to clipboard
cloudinary.uploader.upload("SinglePageSample.pdf", function(result) { }, 
                           {public_id: 'single_page_pdf'})
PHP:
Copy to clipboard
\Cloudinary\Uploader::upload("SinglePageSample.pdf", "public_id" => 'single_page_pdf')
 The uploaded PDF is available for downloading as-is through a fast CDN:
 

This means that if you allow your users to upload images in multiple formats, they could also upload PDFs.

Generating PDF thumbnails

To generate images and thumbnails from your PDF file, you can simply use Cloudinary’s resize and crop transformations, as you would for regular images.

For example, the following URL converts a PDF into a PNG image, as a 200x250 pixels thumbnail:


 
Same example in Rails: 
Copy to clipboard
<%= cl_image_tag("single_page_pdf.png", :width => 200, :height => 250, :crop => :fill) %>
You can also apply any of Cloudinary’s powerful transformations on your PDFs. For example, here is the same page, but this time rotated and converted to grayscale with a watermark added:
 

 
 
While you can generate any thumbnail your graphics design requires, you can also dynamically generate and deliver a full sized image version of your PDF. To control the image’s quality, you can state the density (DPI) used to convert the PDF to an image. Simply use the new 'density' transformation parameter (or 'dn' for URLs) with an integer value between 1 and 300 (the default is 150).
 
The following examples generate a low density and a high density image versions of the uploaded PDF:
 
 
Same example in Rails:
Copy to clipboard
<%= cl_image_tag("single_page_pdf.png", :density => 50) %>
  

Multi-page support

In the examples above, we’ve shown how to generate an image version of the first page of the PDF. But what about multi-page documents
 
You’ll be happy to hear that Cloudinary allows you to generate images and thumbnails for any page of a multi-page document. You can also use the same APIs to manage multi-page TIFF files.
 
In order to extract a single page out of a document, use the new 'page' parameter (or 'pg' for URLs).
 
The following example delivers a 200x300 JPG thumbnail created from the second page of the 'multi_page_pdf' PDF file.
 
 
 
Same example in Rails:
Copy to clipboard
<%= cl_image_tag("multi_page_pdf.jpg", :width => 200, :height => 250,
                 :crop => :fill, :page => 2) %>
In the following example we also reduced quality to 50% to generate a smaller file that can be downloaded faster.
 
 
 

Tips and tricks

Cloudinary offers many additional features in the PDF management department, and you can also mix and match these with all of Cloudinary’s existing image manipulation and delivery capabilities. Following are a few quick ideas.
 
Using Cloudinary, it is easy to extract a single page from a multi-page PDF while returning it as a new PDF:
 
You can also convert arbitrary images to PDFs. For example, consider the following image depicting grazing horses:
 
 
Simply change this image’s suffix to .PDF and Cloudinary will convert the image to PDF and return it as a PDF file.
 
Cloudinary can even programmatically tell you how many pages are available in an uploaded PDF. Our upload API returns this number as its 'pages' parameter:
Copy to clipboard
{  
"public_id":"multi_page_pdf",
"version":1343305663,
"width":612,
"height":792,
"format":"pdf",
"pages":3,
"url":"https://res.cloudinary.com/demo/image/upload/v1343305663/multi_page_pdf.pdf",
...
}
You can also upload a PDF as JPG, storing only the JPG on Cloudinary. This will require less storage and make sure that the image is available immediately on upload, rather than created lazily on demand. The following code sample converts an uploaded PDF to JPG while uploading, before storing it in the cloud and generating additional transformed versions. 

PHP:
Copy to clipboard
\Cloudinary\Uploader::upload("SinglePageSample.pdf", "public_id" => 'single_page_pdf', 
                             "format" => 'jpg')
As usual with Cloudinary, all generated images, documents and thumbnails are cached and delivered through thousands of worldwide CDN servers (currently leveraging Amazon CloudFront).
 
PDF upload, PDF thumbnail creation and transformations, together with multi-page document support, are all available now for both of our free and paid plans. Click here to quickly set up an account if you don't already have one.
 
Additional resources about generating PDF files from images using PHP, JavaScript and how to build a PDF viewer.
 
 

Recent Blog Posts

Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more