Cloudinary Blog
Learn more...

How-to generate thumbnails for Office documents using Cloudinary and Aspose

Nov 13, 2014 by Nadav Soferman

Many websites and mobile applications with user generated content allow you to upload all kinds of files. Images, PDFs, and Microsoft Office files, such as Word, Excel, and PowerPoint are all common types of uploads.

Web or mobile developers may want to build   applications that allow users to download PDFs, support document previews, or embed image thumbnails of Office files. However, implementing these types of capabilities can be quite a challenging task.

Aspose is one of the leading vendors that deals with file management APIs and conversion between different file formats. Having recently partnered with Aspose, we now offer an Aspose document conversion add-on. As a result, developers are able to upload Office files to Cloudinary, the same way as images, and convert them to PDF documents. Cloudinary can then convert the PDFs to images in order to display and embed them in websites, web applications or mobile apps. In addition, developers can use Cloudinary’s rich set of image manipulation capabilities to match the converted images to their sites’ graphic design

How to convert Office files to PDFs

Cloudinary uses Aspose to convert Office files to PDFs. To break it down a bit, you can upload any raw files to Cloudinary, using the API and client libraries, by setting the resource_type upload parameter to raw. Then, in order to convert the files, just set the raw_convert parameter to aspose when uploading. That’s it!

Below is a code sample in multiple frameworks that shows how to upload a Word document and request a conversion to PDF using Cloudinary’s Aspose add-on.

Ruby:
Cloudinary::Uploader.upload("my_file_name.docx", 
  :public_id => "sample_document.docx", 
  :resource_type => 'raw', :raw_convert => 'aspose')
PHP:
\Cloudinary\Uploader::upload("my_file_name.docx", 
  array(
    "public_id" => "sample_document.docx",
    "resource_type" => "raw",
    "raw_convert" => "aspose"
));
Python:
cloudinary.uploader.upload("my_file_name.docx",
  public_id = "sample_document.docx",
  resource_type = "raw",
  raw_convert = "aspose")
Node.js:
cloudinary.uploader.upload("my_file_name.docx", 
  function(result) { console.log(result); }, 
    { public_id: "sample_document.docx",
      resource_type: "raw",
      raw_convert: "aspose"
});
Java:
cloudinary.uploader().upload("my_file_name.docx", Cloudinary.asMap(
  "public_id", "sample_document.docx", 
  "resource_type", "raw", 
  "raw_convert", "aspose"));

When the conversion is done, an image resource of the generated PDF is also created and stored in your Cloudinary account.

You can then deliver the PDF or further manipulate it as an image. For example, if a Word document was uploaded as a raw file, and was assigned with the public ID (the uploaded resource’s unique identifier) sample_document.docx, it would be available for CDN delivery using the following URL:

Ruby:
cl_image_tag("sample_document.docx")
PHP:
cl_image_tag("sample_document.docx")
Python:
CloudinaryImage("sample_document.docx").image()
Node.js:
cloudinary.image("sample_document.docx")
Java:
cloudinary.url().imageTag("sample_document.docx")
jQuery:
$.cloudinary.image("sample_document.docx")
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("sample_document.docx")

Once the conversion is complete, a PDF 'image' file is available with a public ID same as the original document's file name (e.g., sample_document.docx). The delivery URL in our example would be as follows:

Ruby:
cl_image_tag("sample_document.docx.pdf")
PHP:
cl_image_tag("sample_document.docx.pdf")
Python:
CloudinaryImage("sample_document.docx.pdf").image()
Node.js:
cloudinary.image("sample_document.docx.pdf")
Java:
cloudinary.url().imageTag("sample_document.docx.pdf")
jQuery:
$.cloudinary.image("sample_document.docx.pdf")
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("sample_document.docx.pdf")

Note that the conversion process is the same for Excel and PowerPoint files, as well.

The URL above is an example of Cloudinary URLs that are used to access converted files. They are quickly delivered fully optimized with the appropriate cache settings via Akamai’s CDN.

Create image thumbnails and previews

By leveraging Cloudinary’s various image manipulation capabilities, you can convert and manipulate your generated PDF. Cloudinary supports manipulations, such as extracting certain pages, resizing, cropping, creating thumbnails, converting to other formats (i.e. PNG, JPG and more), applying filters or effects, and more. Check out Cloudinary’s capabilities here.

For example, you can use Cloudinary to generate different sizes of thumbnails of your newly created PDF. Depending on your needs, you can set certain dimensions to fit your graphic design, such as width and height.

The 200x300 PNG thumbnail below was created using Cloudinary’s dynamic image manipulation URL for the first page of the PDF document:

Ruby:
cl_image_tag("sample_document.docx.png", :width=>200, :height=>300, :crop=>:fill)
PHP:
cl_image_tag("sample_document.docx.png", array("width"=>200, "height"=>300, "crop"=>"fill"))
Python:
CloudinaryImage("sample_document.docx.png").image(width=200, height=300, crop="fill")
Node.js:
cloudinary.image("sample_document.docx.png", {width: 200, height: 300, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(300).crop("fill")).imageTag("sample_document.docx.png")
jQuery:
$.cloudinary.image("sample_document.docx.png", {width: 200, height: 300, crop: "fill"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(300).Crop("fill")).BuildImageTag("sample_document.docx.png")
300x200 PNG thumbnail

Another example, seen below, is a 200x200 JPEG thumbnail of the second page of the PDF document that was created, with increased saturation, sharpness, and a shadow:

Ruby:
cl_image_tag("sample_document.docx.jpg", :transformation=>[
  {:page=>2, :width=>200, :height=>200, :crop=>:fill, :gravity=>:north, :effect=>"saturation:100"},
  {:effect=>"sharpen"},
  {:border=>"1px_solid_rgb:bbb"},
  {:effect=>"shadow"}
  ])
PHP:
cl_image_tag("sample_document.docx.jpg", array("transformation"=>array(
  array("page"=>2, "width"=>200, "height"=>200, "crop"=>"fill", "gravity"=>"north", "effect"=>"saturation:100"),
  array("effect"=>"sharpen"),
  array("border"=>"1px_solid_rgb:bbb"),
  array("effect"=>"shadow")
  )))
Python:
CloudinaryImage("sample_document.docx.jpg").image(transformation=[
  {"page": 2, "width": 200, "height": 200, "crop": "fill", "gravity": "north", "effect": "saturation:100"},
  {"effect": "sharpen"},
  {"border": "1px_solid_rgb:bbb"},
  {"effect": "shadow"}
  ])
Node.js:
cloudinary.image("sample_document.docx.jpg", {transformation: [
  {page: 2, width: 200, height: 200, crop: "fill", gravity: "north", effect: "saturation:100"},
  {effect: "sharpen"},
  {border: "1px_solid_rgb:bbb"},
  {effect: "shadow"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .page(2).width(200).height(200).crop("fill").gravity("north").effect("saturation:100").chain()
  .effect("sharpen").chain()
  .border("1px_solid_rgb:bbb").chain()
  .effect("shadow")).imageTag("sample_document.docx.jpg")
jQuery:
$.cloudinary.image("sample_document.docx.jpg", {transformation: [
  {page: 2, width: 200, height: 200, crop: "fill", gravity: "north", effect: "saturation:100"},
  {effect: "sharpen"},
  {border: "1px_solid_rgb:bbb"},
  {effect: "shadow"}
  ]})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Page(2).Width(200).Height(200).Crop("fill").Gravity("north").Effect("saturation:100").Chain()
  .Effect("sharpen").Chain()
  .Border("1px_solid_rgb:bbb").Chain()
  .Effect("shadow")).BuildImageTag("sample_document.docx.jpg")
200x200 JPEG saturation increased sharpened thumbnail

Learn more about Cloudinary’s image manipulation capabilities.

Asynchronous conversion to PDF

Cloudinary’s Aspose document conversion add-on asynchronously converts MS Office documents to PDFs. This means that once the documents are uploaded to Cloudinary, and the upload API is complete, Aspose can complete the conversion. This can take up to a few minutes depending on the size and content of the file. Since the conversion runs in the background, you might want to be notified when it is complete. Therefore, Cloudinary has a background notifications and webhooks mechanism, that sends an HTTP POST request to a notification URL that you provide when the operation is done.

See our documentation for more details about how to use the Aspose add-on.

Summary

Developers can use Cloudinary to allow their apps' users to upload images and documents of any type. Together with the Aspose add-on you can now easily generate thumbnails from Office documents that can be embedded into your web or mobile applications. The Aspose add-on is available with all Cloudinary plans, including the free tier. You can try it out by subscribing to the free add-on plan.

Not using Cloudinary Yet? Sign up for a free Cloudinary account here.

Our free plan quota just got 500% bigger

Nov 05, 2014 by Orly Bogler
Tags: General, Startups
Free plan is biggerWe know what it's like to launch a new venture and what it takes to succeed as a company with bootstrapped origins.
 
Cloudinary was extremely fortunate to grow and become an established brand with an amazing customer base, and we never lost sight of our entrepreneurial spirit and love to the startup-y way of thought.
 
Images are a huge hassle and we'd love for everyone, both big and small to enjoy Cloudinary to the fullest and this is the motivation behind our free plan. We want to offer all companies the opportunity to try out our service, free of charge, without a time limit or hidden terms. And now, our Free plan has gotten even sweeter, because we've dramatically increased its quota, 500% its original size! Check it out:
→ Read the full post

10 Startups that manage their images in the cloud - Part 5

Oct 22, 2014 by Orly Bogler
Often developers these days realize that they may be "re-implementing the wheel" building in-house technical solutions that are external to their core proposition. To solve this problem, they are looking for the best off-the-shelf SaaS solutions that will help them focus, get to market sooner, with better products, for lower overall costs.
Often developers these days realize that they may be "re-implementing the wheel" building in-house technical solutions that are external to their core proposition. To solve this problem, they are looking for the best off-the-shelf SaaS solutions that will help them focus, get to market sooner, with better products, for lower overall costs.
→ Read the full post

JPEG-XR conversion with auto browser detection, optimize images for IE users

JPEG-XR Post Sites and apps are including more and more high-quality images. The more you can compress images to reduce their size in bytes, the smaller your bandwidth, the faster your site will load and the happier your users will be. But when compressing images, you need to make sure you maintain high visual quality.

Most web sites and mobile apps use the popular JPEG format to display their images and user uploaded photos. The JPEG format has efficient built-in compression that reduces image size while maintaining a reasonable visual quality. But you can reach much better results using more modern image file formats.

→ Read the full post

Reduce size of animated GIFs, automatically convert to WebM and MP4

Animated GIF to WebM and MP4

Short animated GIF-based video sequences seem to be spreading like wildfire around the web.

Media and news sites display short video segments, social apps allow their users to share animated GIFs with their friends, and while the dated animated GIF format is very useful for this purpose, it has one significant disadvantage - its huge file size.

Animated GIFs are not optimized for captured videos, resulting in large files, heavy bandwidth utilization, slow loading times, and sub-optimal user experience. Also, resizing and manipulating animated GIFs to match the graphic design of your site or app might be a lengthy, cpu-intensive process, as it consists of dozens or even hundreds of frames being manipulated individually.

→ Read the full post

How to automatically adapt website images to Retina and HiDPI devices

Jul 24, 2014 by Nadav Soferman

DPR Post Web development was much simpler only a few years ago, when we were building HTML pages that included images and photos, and all elements shared the same resolution units. If for example, you aimed at a standard 1024x768 screen, you knew these were exactly the number of pixels available for displaying HTML elements and images.

In 2010, Apple introduced the iPhone 4 with Retina display. In order to simplify things for developers, the logical screen resolution remained the same as previous iPhone models (640x960) while the physical screen resolution was exactly doubled (1280x1920). This means that if, for example, you embed an image tag in your HTML page with width of 200 pixels and height of 300 pixels, and you display a double-size image of 400x600 pixels, the Retina display shows all pixels of the larger image, resulting in a much clearer visual result and without performing browser-side down-scaling.

→ Read the full post

Automatic image moderation, removing adult or inappropriate photos using WebPurify and Cloudinary

Jul 22, 2014 by Nadav Soferman

WebPurify moderation add-on If your web or mobile application involves user-generated content, you may encounter users who upload inappropriate photos or images to your application. These could be images which offend other users - adult content, violent photos, etc. - or images which cause your site to violate laws or regulations.

There are two ways to identify and remove such images: you can either require approval of each image before it is displayed to your users, or display images immediately after upload, and then quickly remove them from your site as soon as a moderator has found them to be inappropriate.

→ Read the full post

Direct upload made easy, from browser or mobile app to the cloud

Jul 16, 2014 by Nadav Soferman

Unsigned upload Handling user uploaded images on your website can be a time consuming task. In this post, we'll show how Cloudinary's cloud-based image management service can help you turn user uploading into a lightweight operation that bypasses your servers altogether.

How do you handle user uploads today? If images are uploaded directly to your servers, this requires some heavy server-side processing, bandwidth and storage space. One way to offload images is to transfer them to cloud storage. But if you're handling the upload operation on your own servers (and then transferring them to the cloud), this is still wasteful of server resources.

→ Read the full post

Keep.com, releasing the image processing bottleneck

Jul 10, 2014 by Itai Lahan

Keep & Cloudinary Cloudinary is passionate about its users. We built our cloud-based image management features around real-world pain points, and it's gratifying to see our customers use those features to solve major business challenges.

One example is Keep.com, an innovative online commerce startup, which the Huffington Post has called "the only fashion app worth getting". We wanted to share the story of how Keep used Cloudinary to remove a major bottleneck in the development of their website and business.

→ Read the full post

Image manipulation recipes in the cloud. The Cloudinary Cookbook

Jun 26, 2014 by Nadav Soferman

Cloudinary Cookbook How do you crop an image to a custom shape? How do you add a shadow effect to an image with transparency? How do you add text overlay to an image without using HTML?

If you build or maintain a website with a lot of images, you've probably had many questions like these. Most developers who work with images have scripts or tools that can achieve dozens if not hundreds of image manipulations - from basics like crop and resize, to advanced stuff like shadow and transparency, watermarks, face detection, etc. But how do you mix and match these manipulations correctly to solve a problem or achieve a certain effect?

→ Read the full post
More posts...