Cloudinary Blog

How to Create a Thumbnail Image for Office Files using Cloudinary and Aspose

How to Create a Thumbnail Image for Office Files

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

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 transformation capabilities to match the converted images to their sites’ graphic design

aspose add-on

Webinar
How to Optimize for Page Load Speed

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:
Copy to clipboard
Cloudinary::Uploader.upload("my_file_name.docx", 
  :public_id => "sample_document.docx", 
  :resource_type => 'raw', :raw_convert => 'aspose')
PHP:
Copy to clipboard
\Cloudinary\Uploader::upload("my_file_name.docx", 
  array(
    "public_id" => "sample_document.docx",
    "resource_type" => "raw",
    "raw_convert" => "aspose"
));
Python:
Copy to clipboard
cloudinary.uploader.upload("my_file_name.docx",
  public_id = "sample_document.docx",
  resource_type = "raw",
  raw_convert = "aspose")
Node.js:
Copy to clipboard
cloudinary.uploader.upload("my_file_name.docx", 
  function(result) { console.log(result); }, 
    { public_id: "sample_document.docx",
      resource_type: "raw",
      raw_convert: "aspose"
});
Java:
Copy to clipboard
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 transform 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:
Copy to clipboard
cl_image_tag("sample_document.docx")
PHP v1:
Copy to clipboard
cl_image_tag("sample_document.docx")
PHP v2:
Copy to clipboard
(new RawTag('sample_document.docx'));
Python:
Copy to clipboard
CloudinaryImage("sample_document.docx").image()
Node.js:
Copy to clipboard
cloudinary.image("sample_document.docx")
Java:
Copy to clipboard
cloudinary.url().imageTag("sample_document.docx");
JS:
Copy to clipboard
cloudinary.imageTag('sample_document.docx').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_document.docx")
React:
Copy to clipboard
<Image publicId="sample_document.docx" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample_document.docx" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample_document.docx" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("sample_document.docx")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("raw").generate("sample_document.docx");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("raw").generate("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:
Copy to clipboard
cl_image_tag("sample_document.docx.pdf")
PHP v1:
Copy to clipboard
cl_image_tag("sample_document.docx.pdf")
PHP v2:
Copy to clipboard
(new ImageTag('sample_document.docx.pdf'));
Python:
Copy to clipboard
CloudinaryImage("sample_document.docx.pdf").image()
Node.js:
Copy to clipboard
cloudinary.image("sample_document.docx.pdf")
Java:
Copy to clipboard
cloudinary.url().imageTag("sample_document.docx.pdf");
JS:
Copy to clipboard
cloudinary.imageTag('sample_document.docx.pdf').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_document.docx.pdf")
React:
Copy to clipboard
<Image publicId="sample_document.docx.pdf" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample_document.docx.pdf" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample_document.docx.pdf" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("sample_document.docx.pdf")
Android:
Copy to clipboard
MediaManager.get().url().generate("sample_document.docx.pdf");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("sample_document.docx.pdf")!, cloudinary: cloudinary)

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.

How to create thumbnail images and previews

By leveraging Cloudinary’s various image transformation capabilities, you can convert and transform your generated PDF. Cloudinary supports transformations, 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 transformation URL for the first page of the PDF document:

Ruby:
Copy to clipboard
cl_image_tag("sample_document.docx.png", :width=>200, :height=>300, :crop=>"fill")
PHP v1:
Copy to clipboard
cl_image_tag("sample_document.docx.png", array("width"=>200, "height"=>300, "crop"=>"fill"))
PHP v2:
Copy to clipboard
(new ImageTag('sample_document.docx.png'))
  ->resize(Resize::fill()->width(200)->height(300));
Python:
Copy to clipboard
CloudinaryImage("sample_document.docx.png").image(width=200, height=300, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("sample_document.docx.png", {width: 200, height: 300, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(300).crop("fill")).imageTag("sample_document.docx.png");
JS:
Copy to clipboard
cloudinary.imageTag('sample_document.docx.png', {width: 200, height: 300, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_document.docx.png", {width: 200, height: 300, crop: "fill"})
React:
Copy to clipboard
<Image publicId="sample_document.docx.png" >
  <Transformation width="200" height="300" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample_document.docx.png" >
  <cld-transformation width="200" height="300" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample_document.docx.png" >
  <cl-transformation width="200" height="300" crop="fill">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(300).Crop("fill")).BuildImageTag("sample_document.docx.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(300).crop("fill")).generate("sample_document.docx.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(300).setCrop("fill")).generate("sample_document.docx.png")!, cloudinary: cloudinary)
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:
Copy to clipboard
cl_image_tag("sample_document.docx.jpg", :transformation=>[
  {:width=>200, :height=>200, :gravity=>"north", :page=>2, :effect=>"saturation:100", :crop=>"fill"},
  {:effect=>"sharpen"},
  {:border=>"1px_solid_rgb:bbb"},
  {:effect=>"shadow"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("sample_document.docx.jpg", array("transformation"=>array(
  array("width"=>200, "height"=>200, "gravity"=>"north", "page"=>2, "effect"=>"saturation:100", "crop"=>"fill"),
  array("effect"=>"sharpen"),
  array("border"=>"1px_solid_rgb:bbb"),
  array("effect"=>"shadow")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('sample_document.docx.jpg'))
  ->resize(Resize::fill()->width(200)->height(200)->gravity(Gravity::compass(Compass::north())))
  ->adjust(Adjust::saturation()->level(100))
  ->extract(Extract::getPage()->byNumber(2))
  ->adjust(Adjust::sharpen())
  ->border(Border::solid(1, Color::rgb('bbb')))
  ->effect(Effect::shadow());
Python:
Copy to clipboard
CloudinaryImage("sample_document.docx.jpg").image(transformation=[
  {'width': 200, 'height': 200, 'gravity': "north", 'page': 2, 'effect': "saturation:100", 'crop': "fill"},
  {'effect': "sharpen"},
  {'border': "1px_solid_rgb:bbb"},
  {'effect': "shadow"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("sample_document.docx.jpg", {transformation: [
  {width: 200, height: 200, gravity: "north", page: 2, effect: "saturation:100", crop: "fill"},
  {effect: "sharpen"},
  {border: "1px_solid_rgb:bbb"},
  {effect: "shadow"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(200).height(200).gravity("north").page(2).effect("saturation:100").crop("fill").chain()
  .effect("sharpen").chain()
  .border("1px_solid_rgb:bbb").chain()
  .effect("shadow")).imageTag("sample_document.docx.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample_document.docx.jpg', {transformation: [
  {width: 200, height: 200, gravity: "north", page: 2, effect: "saturation:100", crop: "fill"},
  {effect: "sharpen"},
  {border: "1px_solid_rgb:bbb"},
  {effect: "shadow"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_document.docx.jpg", {transformation: [
  {width: 200, height: 200, gravity: "north", page: 2, effect: "saturation:100", crop: "fill"},
  {effect: "sharpen"},
  {border: "1px_solid_rgb:bbb"},
  {effect: "shadow"}
  ]})
React:
Copy to clipboard
<Image publicId="sample_document.docx.jpg" >
  <Transformation width="200" height="200" gravity="north" page="2" effect="saturation:100" crop="fill" />
  <Transformation effect="sharpen" />
  <Transformation border="1px_solid_rgb:bbb" />
  <Transformation effect="shadow" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample_document.docx.jpg" >
  <cld-transformation width="200" height="200" gravity="north" page="2" effect="saturation:100" crop="fill" />
  <cld-transformation effect="sharpen" />
  <cld-transformation border="1px_solid_rgb:bbb" />
  <cld-transformation effect="shadow" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample_document.docx.jpg" >
  <cl-transformation width="200" height="200" gravity="north" page="2" effect="saturation:100" crop="fill">
  </cl-transformation>
  <cl-transformation effect="sharpen">
  </cl-transformation>
  <cl-transformation border="1px_solid_rgb:bbb">
  </cl-transformation>
  <cl-transformation effect="shadow">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Height(200).Gravity("north").Page(2).Effect("saturation:100").Crop("fill").Chain()
  .Effect("sharpen").Chain()
  .Border("1px_solid_rgb:bbb").Chain()
  .Effect("shadow")).BuildImageTag("sample_document.docx.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(200).height(200).gravity("north").page(2).effect("saturation:100").crop("fill").chain()
  .effect("sharpen").chain()
  .border("1px_solid_rgb:bbb").chain()
  .effect("shadow")).generate("sample_document.docx.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setHeight(200).setGravity("north").setPage(2).setEffect("saturation:100").setCrop("fill").chain()
  .setEffect("sharpen").chain()
  .setBorder("1px_solid_rgb:bbb").chain()
  .setEffect("shadow")).generate("sample_document.docx.jpg")!, cloudinary: cloudinary)
200x200 JPEG saturation increased sharpened thumbnail

Learn more about Cloudinary’s image transformation 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.

About Cloudinary

Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter.

Recent Blog Posts

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more