Paged and layered media

With Cloudinary, you can deliver media assets that include multiple pages or layers. This includes PDF and Photoshop files.

On this page:

Delivering content from PDF files
Creating PDF files from images
Delivering Photoshop images

Delivering content from PDF files

You can upload PDF files to Cloudinary as image types. You can deliver them via a CDN, convert them to images, and generate thumbnails.

Important note for free accounts

By default, free Cloudinary accounts are blocked from delivering files in PDF format for security reasons.
For details or to request that this limitation be removed for your free account, see Media delivery.

Deliver a PDF or selected pages of a PDF

To deliver a PDF that is stored in your Cloudinary account, just supply the basic delivery URL:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/long_multi_page_pdf

Ruby (cloudinary 1.x):

cl_image_tag("long_multi_page_pdf")

PHP (cloudinary_php 2.x):

(new ImageTag('long_multi_page_pdf'));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("long_multi_page_pdf")

Python (cloudinary 1.x):

CloudinaryImage("long_multi_page_pdf").image()

Node.js (cloudinary 1.x):

cloudinary.image("long_multi_page_pdf")

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation().imageTag("long_multi_page_pdf");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("long_multi_page_pdf");

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('long_multi_page_pdf').toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("long_multi_page_pdf")

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("long_multi_page_pdf");

React (cloudinary-react 1.x):

<Image publicId="long_multi_page_pdf" >

</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="long_multi_page_pdf" >

</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("long_multi_page_pdf");

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="long_multi_page_pdf" >

</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.BuildImageTag("long_multi_page_pdf")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().generate("long_multi_page_pdf")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation().generate("long_multi_page_pdf");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("long_multi_page_pdf") 
}.generate()

You can also generate a PDF on the fly that contains only specified pages or page ranges.

Use semi-colons to separate a list of pages: pg_3;5;7
Use hyphens to indicate a page range: pg_3-5
Use a hyphen with no ending page to indicate starting from a specified page until the end: pg_5-

Tips

You can also create PDF files and images from Office documents, using the Aspose add-on.
You can extract all text from a PDF when uploading it using the OCR Text Detection and Extraction.

Deliver a selected PDF page as an image

To deliver an image of the first page in a PDF file, just change the file extension from pdf to the image format of your choice in the Cloudinary delivery URL. For example, to deliver a JPEG image of the first page in a previously uploaded PDF file called multi_page_pdf (scaled down to a width of 300 pixels):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/c_scale,w_300/multi_page_pdf.jpg

Ruby (cloudinary 1.x):

cl_image_tag("multi_page_pdf.jpg", :width=>300, :crop=>"scale")

PHP (cloudinary_php 2.x):

(new ImageTag('multi_page_pdf.jpg'))
  ->resize(Resize::scale()->width(300));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("multi_page_pdf.jpg", array("width"=>300, "crop"=>"scale"))

Python (cloudinary 1.x):

CloudinaryImage("multi_page_pdf.jpg").image(width=300, crop="scale")

Node.js (cloudinary 1.x):

cloudinary.image("multi_page_pdf.jpg", {width: 300, crop: "scale"})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation().width(300).crop("scale")).imageTag("multi_page_pdf.jpg");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("multi_page_pdf.jpg").resize(scale().width(300));

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('multi_page_pdf.jpg', {width: 300, crop: "scale"}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("multi_page_pdf.jpg", {width: 300, crop: "scale"})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("multi_page_pdf.jpg").resize(scale().width(300));

React (cloudinary-react 1.x):

<Image publicId="multi_page_pdf.jpg" >
  <Transformation width="300" crop="scale" />
</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="multi_page_pdf.jpg" >
  <cld-transformation width="300" crop="scale" />
</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("multi_page_pdf.jpg").resize(scale().width(300));

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="multi_page_pdf.jpg" >
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Crop("scale")).BuildImageTag("multi_page_pdf.jpg")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setCrop("scale")).generate("multi_page_pdf.jpg")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation().width(300).crop("scale")).generate("multi_page_pdf.jpg");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("multi_page_pdf.jpg")
   resize(Resize.scale() { width(300) }) 
}.generate()

JPEG image of the first page of a PDF file

To deliver an image of a different page, use the page parameter (pg in URLs):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/c_scale,w_300/pg_2/multi_page_pdf.png

Ruby (cloudinary 1.x):

cl_image_tag("multi_page_pdf.png", :transformation=>[
  {:width=>300, :crop=>"scale"},
  {:page=>2}
  ])

PHP (cloudinary_php 2.x):

(new ImageTag('multi_page_pdf.png'))
  ->resize(Resize::scale()->width(300))
  ->extract(Extract::getPage()->byNumber(2));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("multi_page_pdf.png", array("transformation"=>array(
  array("width"=>300, "crop"=>"scale"),
  array("page"=>2)
  )))

Python (cloudinary 1.x):

CloudinaryImage("multi_page_pdf.png").image(transformation=[
  {'width': 300, 'crop': "scale"},
  {'page': 2}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("multi_page_pdf.png", {transformation: [
  {width: 300, crop: "scale"},
  {page: 2}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .page(2)).imageTag("multi_page_pdf.png");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("multi_page_pdf.png")
  .resize(scale().width(300))
  .extract(getPage().byNumber(2));

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('multi_page_pdf.png', {transformation: [
  {width: 300, crop: "scale"},
  {page: 2}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("multi_page_pdf.png", {transformation: [
  {width: 300, crop: "scale"},
  {page: 2}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("multi_page_pdf.png")
  .resize(scale().width(300))
  .extract(getPage().byNumber(2));

React (cloudinary-react 1.x):

<Image publicId="multi_page_pdf.png" >
  <Transformation width="300" crop="scale" />
  <Transformation page="2" />
</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="multi_page_pdf.png" >
  <cld-transformation width="300" crop="scale" />
  <cld-transformation page="2" />
</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("multi_page_pdf.png")
  .resize(scale().width(300))
  .extract(getPage().byNumber(2));

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="multi_page_pdf.png" >
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
  <cl-transformation page="2">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Crop("scale").Chain()
  .Page(2)).BuildImageTag("multi_page_pdf.png")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setCrop("scale").chain()
  .setPage(2)).generate("multi_page_pdf.png")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .page(2)).generate("multi_page_pdf.png");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("multi_page_pdf.png")
   resize(Resize.scale() { width(300) })
   extract(Extract.getPage() { byNumber(2) }) 
}.generate()

PNG image of the second page of a PDF file

You can control the resolution of the resulting image by changing the default dpi value of 150 with the density parameter (dn in URLs). For example, to deliver a JPEG image of the PDF file with a density of 20:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/dn_20/multi_page_pdf.jpg

Ruby (cloudinary 1.x):

cl_image_tag("multi_page_pdf.jpg", :density=>20)

PHP (cloudinary_php 2.x):

(new ImageTag('multi_page_pdf.jpg'))
  ->delivery(Delivery::density(20));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("multi_page_pdf.jpg", array("density"=>20))

Python (cloudinary 1.x):

CloudinaryImage("multi_page_pdf.jpg").image(density=20)

Node.js (cloudinary 1.x):

cloudinary.image("multi_page_pdf.jpg", {density: 20})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation().density(20)).imageTag("multi_page_pdf.jpg");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("multi_page_pdf.jpg").delivery(density(20));

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('multi_page_pdf.jpg', {density: 20}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("multi_page_pdf.jpg", {density: 20})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("multi_page_pdf.jpg").delivery(density(20));

React (cloudinary-react 1.x):

<Image publicId="multi_page_pdf.jpg" >
  <Transformation density="20" />
</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="multi_page_pdf.jpg" >
  <cld-transformation density="20" />
</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("multi_page_pdf.jpg").delivery(density(20));

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="multi_page_pdf.jpg" >
  <cl-transformation density="20">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation().Density(20)).BuildImageTag("multi_page_pdf.jpg")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setDensity(20)).generate("multi_page_pdf.jpg")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation().density(20)).generate("multi_page_pdf.jpg");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("multi_page_pdf.jpg")
   delivery(Delivery.density(20)) 
}.generate()

Tip

You can also use the explode method of the Admin API to explicitly generate derived images of all pages of a PDF, including optionally applying any transformation on all the pages before storing them. This method is useful for pre-generating all the pages, so that they do not need to be generated on the fly when first accessed by your users.

Creating PDF files from images

You can create a PDF file from images stored in your media library. Identify the images you want to include in the PDF by applying the same tag to each of the images. In the resulting PDF, they are ordered alphabetically by public ID with a page per image.

PDF files can be created from a maximum of 500 images if processed asynchronously (async parameter = true) or a maximum of 100 if synchronously (async = false). If the limit is exceeded, only the first 500 (or 100) images will be included.

To create a PDF file from a set of images that each have the tag "topic", use the multi method, specifying the format as pdf, and optionally add some transformations to each of the images that are added:

Ruby PHP Python Node.js Java .NET Go cURL All

Ruby (cloudinary 1.x):

Cloudinary::Uploader.multi("topic", :format => "pdf", :transformation => {:width => 800, :crop => "lfill", :gravity => "auto"})

PHP (cloudinary_php 2.x):

$cloudinary->uploadApi()->multi("topic", 
  ["format"=>"pdf", "transformation"=>["width"=>800,"crop"=>"lfill","gravity"=>"auto"]]);

PHP (cloudinary_php 1.x (legacy)):

\Cloudinary\Uploader::multi("topic", 
  ["format"=>"pdf", "transformation"=>["width"=>800,"crop"=>"lfill","gravity"=>"auto"]]);

Python (cloudinary 1.x):

cloudinary.uploader.multi("topic", format = "pdf", transformation={"width": 800, "crop": "lfill", "gravity": "auto"})

Node.js (cloudinary 1.x):

cloudinary.v2.uploader.multi("topic",
  {format: "pdf", transformation: {width: 800, crop: "lfill", gravity: "auto"}}, 
  function(error,result) {console.log(result, error) });

Java (cloudinary 1.x):

cloudinary.uploader().multi("topic", 
  ObjectUtils.asMap(
    "format", "pdf"
    "transformation", new Transformation().width(800).crop("lfill").gravity("auto"));

.NET (CloudinaryDotNet 1.x):

var multiParams = new MultiParams("topic"){Format = "pdf", Transformation = new Transformation().Width(800).Crop("lfill").Gravity("auto")};
var multiResult = cloudinary.Multi(multiParams);

Go (cloudinary-go 1.x):

resp, err := cld.Upload.Multi(ctx, uploader.MultiParams{
        Tag:            "topic",
        Format:         "pdf",
        Transformation: "c_scale,w_800/c_lfill,g_auto"})

curl:

curl https://api.cloudinary.com/v1_1/demo/image/multi -X POST --data 'tag=topic&format=pdf&transformation=w_800,c_lfill,g_auto&timestamp=173719931&api_key=436464676&signature=a788d68f86a6f868af'

cli:

cld uploader multi "topic" format="pdf" transformation='{"width": 800, "crop": "lfill", "gravity": "auto"}'

Learn more about the multi method in the Upload API reference.

Important

By combining multiple images in this way, the resulting PDF may exceed the maximum file size allowed in your plan, in which case you will see the error, "File size too large." Consider using a transformation on each of the images, using the transformation parameter, to reduce the size of the images so as to reduce the size of the resulting PDF file.

Delivering Photoshop images

If you upload a Photoshop (.psd) file and deliver it as a Cloudinary URL, it will enable users to download the original PSD file, including all layers. For example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/Cld_Sample_PSD.psd

Ruby (cloudinary 1.x):

cl_image_tag("Cld_Sample_PSD.psd")

PHP (cloudinary_php 2.x):

(new ImageTag('Cld_Sample_PSD.psd'));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("Cld_Sample_PSD.psd")

Python (cloudinary 1.x):

CloudinaryImage("Cld_Sample_PSD.psd").image()

Node.js (cloudinary 1.x):

cloudinary.image("Cld_Sample_PSD.psd")

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation().imageTag("Cld_Sample_PSD.psd");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("Cld_Sample_PSD.psd");

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('Cld_Sample_PSD.psd').toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("Cld_Sample_PSD.psd")

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("Cld_Sample_PSD.psd");

React (cloudinary-react 1.x):

<Image publicId="Cld_Sample_PSD.psd" >

</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="Cld_Sample_PSD.psd" >

</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("Cld_Sample_PSD.psd");

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="Cld_Sample_PSD.psd" >

</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.BuildImageTag("Cld_Sample_PSD.psd")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().generate("Cld_Sample_PSD.psd")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation().generate("Cld_Sample_PSD.psd");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("Cld_Sample_PSD.psd") 
}.generate()

You can also apply any standard image transformation, and deliver with another image extension (or explicitly set an image format in the transformation) to deliver it in a format that your website or mobile app can display. For example, below the Cld_Sample_PSD image is delivered as a 300 pixel-width jpg with the grayscale effect:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/c_scale,w_300/e_grayscale/Cld_Sample_PSD.jpg

Ruby (cloudinary 1.x):

cl_image_tag("Cld_Sample_PSD.jpg", :transformation=>[
  {:width=>300, :crop=>"scale"},
  {:effect=>"grayscale"}
  ])

PHP (cloudinary_php 2.x):

(new ImageTag('Cld_Sample_PSD.jpg'))
  ->resize(Resize::scale()->width(300))
  ->effect(Effect::grayscale());

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("Cld_Sample_PSD.jpg", array("transformation"=>array(
  array("width"=>300, "crop"=>"scale"),
  array("effect"=>"grayscale")
  )))

Python (cloudinary 1.x):

CloudinaryImage("Cld_Sample_PSD.jpg").image(transformation=[
  {'width': 300, 'crop': "scale"},
  {'effect': "grayscale"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("Cld_Sample_PSD.jpg", {transformation: [
  {width: 300, crop: "scale"},
  {effect: "grayscale"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .effect("grayscale")).imageTag("Cld_Sample_PSD.jpg");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("Cld_Sample_PSD.jpg")
  .resize(scale().width(300))
  .effect(grayscale());

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('Cld_Sample_PSD.jpg', {transformation: [
  {width: 300, crop: "scale"},
  {effect: "grayscale"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("Cld_Sample_PSD.jpg", {transformation: [
  {width: 300, crop: "scale"},
  {effect: "grayscale"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("Cld_Sample_PSD.jpg")
  .resize(scale().width(300))
  .effect(grayscale());

React (cloudinary-react 1.x):

<Image publicId="Cld_Sample_PSD.jpg" >
  <Transformation width="300" crop="scale" />
  <Transformation effect="grayscale" />
</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="Cld_Sample_PSD.jpg" >
  <cld-transformation width="300" crop="scale" />
  <cld-transformation effect="grayscale" />
</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("Cld_Sample_PSD.jpg")
  .resize(scale().width(300))
  .effect(grayscale());

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="Cld_Sample_PSD.jpg" >
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
  <cl-transformation effect="grayscale">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Crop("scale").Chain()
  .Effect("grayscale")).BuildImageTag("Cld_Sample_PSD.jpg")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setCrop("scale").chain()
  .setEffect("grayscale")).generate("Cld_Sample_PSD.jpg")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .effect("grayscale")).generate("Cld_Sample_PSD.jpg");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("Cld_Sample_PSD.jpg")
   resize(Resize.scale() { width(300) })
   effect(Effect.grayscale()) 
}.generate()

Deliver a Photoshop image as a JPG with transformations

In addition to these basic options, there are a few special options available for working with PSD files.

Tip

It is recommended to save PSD files in Maximize Compatibility mode for the best results when delivering Photoshop images from Cloudinary.

Deliver selected layers of a PSD image

You can use the page (pg in URLs) transformation parameter to deliver an image containing only specified layers of a Photoshop image, where pg_1 represents all layers, and pg_2 is the bottom layer. The layers are delivered in the order you specify, even if the specified order is different from the original PSD file.

Use semi-colons to separate a list of layers: pg_3;5;7
Use hyphens to indicate a range of layers: pg_3-5
Use a hyphen with no ending page to indicate starting from a specified layer until the end: pg_5-

For example, below the Cld_Sample_PSD is delivered with all layers except the record cover layer (7), and the cover's shadow layer(5):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/pg_2-4;6;8/c_scale,w_300/Cld_Sample_PSD.jpg

Ruby (cloudinary 1.x):

cl_image_tag("Cld_Sample_PSD.jpg", :transformation=>[
  {:page=>"2-4;6;8"},
  {:width=>300, :crop=>"scale"}
  ])

PHP (cloudinary_php 2.x):

(new ImageTag('Cld_Sample_PSD.jpg'))
  ->extract(Extract::getPage()
  ->byRange(2,4)
->byNumber(6)
->byNumber(8))
  ->resize(Resize::scale()->width(300));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("Cld_Sample_PSD.jpg", array("transformation"=>array(
  array("page"=>"2-4;6;8"),
  array("width"=>300, "crop"=>"scale")
  )))

Python (cloudinary 1.x):

CloudinaryImage("Cld_Sample_PSD.jpg").image(transformation=[
  {'page': "2-4;6;8"},
  {'width': 300, 'crop': "scale"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("Cld_Sample_PSD.jpg", {transformation: [
  {page: "2-4;6;8"},
  {width: 300, crop: "scale"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .page("2-4;6;8").chain()
  .width(300).crop("scale")).imageTag("Cld_Sample_PSD.jpg");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("Cld_Sample_PSD.jpg")
  .extract(
    getPage()
      .byRange(2, 4)
      .byNumber(6)
      .byNumber(8)
  )
  .resize(scale().width(300));

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('Cld_Sample_PSD.jpg', {transformation: [
  {page: "2-4;6;8"},
  {width: 300, crop: "scale"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("Cld_Sample_PSD.jpg", {transformation: [
  {page: "2-4;6;8"},
  {width: 300, crop: "scale"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("Cld_Sample_PSD.jpg")
  .extract(
    getPage()
      .byRange(2, 4)
      .byNumber(6)
      .byNumber(8)
  )
  .resize(scale().width(300));

React (cloudinary-react 1.x):

<Image publicId="Cld_Sample_PSD.jpg" >
  <Transformation page="2-4;6;8" />
  <Transformation width="300" crop="scale" />
</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="Cld_Sample_PSD.jpg" >
  <cld-transformation page="2-4;6;8" />
  <cld-transformation width="300" crop="scale" />
</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("Cld_Sample_PSD.jpg")
  .extract(
    getPage()
      .byRange(2, 4)
      .byNumber(6)
      .byNumber(8)
  )
  .resize(scale().width(300));

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="Cld_Sample_PSD.jpg" >
  <cl-transformation page="2-4;6;8">
  </cl-transformation>
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Page("2-4;6;8").Chain()
  .Width(300).Crop("scale")).BuildImageTag("Cld_Sample_PSD.jpg")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setPage("2-4;6;8").chain()
  .setWidth(300).setCrop("scale")).generate("Cld_Sample_PSD.jpg")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .page("2-4;6;8").chain()
  .width(300).crop("scale")).generate("Cld_Sample_PSD.jpg");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("Cld_Sample_PSD.jpg")
   extract(Extract.getPage() {
   byRange(2,4)
 byNumber(6)
 byNumber(8) })
   resize(Resize.scale() { width(300) }) 
}.generate()

You can also deliver layers by name (case-sensitive) using pg_name:. For example, now we'll deliver only the record cover and it's shadow:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/pg_name:record_cover;Shadow/c_scale,w_300/Cld_Sample_PSD.jpg

Ruby (cloudinary 1.x):

cl_image_tag("Cld_Sample_PSD.jpg", :transformation=>[
  {:page=>"name:record_cover;Shadow"},
  {:width=>300, :crop=>"scale"}
  ])

PHP (cloudinary_php 2.x):

(new ImageTag('Cld_Sample_PSD.jpg'))
  ->psdTools(PSDTools::getLayer()->byName("record_cover")
->byName("Shadow"))
  ->resize(Resize::scale()->width(300));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("Cld_Sample_PSD.jpg", array("transformation"=>array(
  array("page"=>"name:record_cover;Shadow"),
  array("width"=>300, "crop"=>"scale")
  )))

Python (cloudinary 1.x):

CloudinaryImage("Cld_Sample_PSD.jpg").image(transformation=[
  {'page': "name:record_cover;Shadow"},
  {'width': 300, 'crop': "scale"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("Cld_Sample_PSD.jpg", {transformation: [
  {page: "name:record_cover;Shadow"},
  {width: 300, crop: "scale"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .page("name:record_cover;Shadow").chain()
  .width(300).crop("scale")).imageTag("Cld_Sample_PSD.jpg");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("Cld_Sample_PSD.jpg")
  .psdTools(getLayer().byName("record_cover").byName("Shadow"))
  .resize(scale().width(300));

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('Cld_Sample_PSD.jpg', {transformation: [
  {page: "name:record_cover;Shadow"},
  {width: 300, crop: "scale"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("Cld_Sample_PSD.jpg", {transformation: [
  {page: "name:record_cover;Shadow"},
  {width: 300, crop: "scale"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("Cld_Sample_PSD.jpg")
  .psdTools(getLayer().byName("record_cover").byName("Shadow"))
  .resize(scale().width(300));

React (cloudinary-react 1.x):

<Image publicId="Cld_Sample_PSD.jpg" >
  <Transformation page="name:record_cover;Shadow" />
  <Transformation width="300" crop="scale" />
</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="Cld_Sample_PSD.jpg" >
  <cld-transformation page="name:record_cover;Shadow" />
  <cld-transformation width="300" crop="scale" />
</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("Cld_Sample_PSD.jpg")
  .psdTools(getLayer().byName("record_cover").byName("Shadow"))
  .resize(scale().width(300));

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="Cld_Sample_PSD.jpg" >
  <cl-transformation page="name:record_cover;Shadow">
  </cl-transformation>
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Page("name:record_cover;Shadow").Chain()
  .Width(300).Crop("scale")).BuildImageTag("Cld_Sample_PSD.jpg")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setPage("name:record_cover;Shadow").chain()
  .setWidth(300).setCrop("scale")).generate("Cld_Sample_PSD.jpg")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .page("name:record_cover;Shadow").chain()
  .width(300).crop("scale")).generate("Cld_Sample_PSD.jpg");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("Cld_Sample_PSD.jpg")
   psdTools(PSDTools.getLayer() { byName("record_cover")
 byName("Shadow") })
   resize(Resize.scale() { width(300) }) 
}.generate()

Note

If the PSD has more than one layer with the same name, you can refer to them using the name plus an index value. The first instance should be referred just by name, and the next should be referred to as name-1, and so on.

Extract the original content of an embedded object

A Photoshop image may include layers with embedded objects, such as Photoshop smart objects that are scaled down or otherwise modified. As long as the original image’s content is fully preserved in the PSD file, you can extract and deliver the original embedded object using the pg_embedded:<index> parameter, where the index is the layer index number in the PSD file, or you can use the pg_embedded:name:<layer name> parameter to specify the layer name of the embedded smart object.

For example, suppose you embed a high resolution city scene as a smart object layer in a PSD alongside other layers. You can use the pg_embedded:name option to extract the full resolution city image by specifying the layer name, skyline-3242040_1920. Alternatively, you could reference it as the layer at index 7 in the PSD file (pg_embedded:7).

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/pg_embedded:name:skyline-3242040_1920/cld_sample_smart_PSD.jpg

Ruby (cloudinary 1.x):

cl_image_tag("cld_sample_smart_PSD.jpg", :page=>"embedded:name:skyline-3242040_1920")

PHP (cloudinary_php 2.x):

(new ImageTag('cld_sample_smart_PSD.jpg'))
  ->psdTools(PSDTools::smartObject()->byLayerName("skyline-3242040_1920"));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("cld_sample_smart_PSD.jpg", array("page"=>"embedded:name:skyline-3242040_1920"))

Python (cloudinary 1.x):

CloudinaryImage("cld_sample_smart_PSD.jpg").image(page="embedded:name:skyline-3242040_1920")

Node.js (cloudinary 1.x):

cloudinary.image("cld_sample_smart_PSD.jpg", {page: "embedded:name:skyline-3242040_1920"})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation().page("embedded:name:skyline-3242040_1920")).imageTag("cld_sample_smart_PSD.jpg");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("cld_sample_smart_PSD.jpg").psdTools(
  smartObject().byLayerName("skyline-3242040_1920")
);

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('cld_sample_smart_PSD.jpg', {page: "embedded:name:skyline-3242040_1920"}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("cld_sample_smart_PSD.jpg", {page: "embedded:name:skyline-3242040_1920"})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("cld_sample_smart_PSD.jpg").psdTools(
  smartObject().byLayerName("skyline-3242040_1920")
);

React (cloudinary-react 1.x):

<Image publicId="cld_sample_smart_PSD.jpg" >
  <Transformation page="embedded:name:skyline-3242040_1920" />
</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="cld_sample_smart_PSD.jpg" >
  <cld-transformation page="embedded:name:skyline-3242040_1920" />
</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("cld_sample_smart_PSD.jpg").psdTools(
  smartObject().byLayerName("skyline-3242040_1920")
);

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="cld_sample_smart_PSD.jpg" >
  <cl-transformation page="embedded:name:skyline-3242040_1920">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation().Page("embedded:name:skyline-3242040_1920")).BuildImageTag("cld_sample_smart_PSD.jpg")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setPage("embedded:name:skyline-3242040_1920")).generate("cld_sample_smart_PSD.jpg")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation().page("embedded:name:skyline-3242040_1920")).generate("cld_sample_smart_PSD.jpg");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("cld_sample_smart_PSD.jpg")
   psdTools(PSDTools.smartObject() { byLayerName("skyline-3242040_1920") }) 
}.generate()

Full PSD as a jpg.
Click to view full size.

Extract full resolution of embedded object from PSD

Extracted original object.
Click to view full size.

Additional Photoshop image transformation options

When working with Photoshop images, you may also want to take advantage of the following:

You can trim the pixels of a PSD image according to a Photoshop clipping path that is stored in the image's metadata, using the fl_clip transformation flag.
- If there are multiple paths stored in the PSD, you can specify which path to use by path number or name using the page parameter (pg in URLs).
- For example, /fl_clip,pg_2/my_image.jpg will deliver your Photoshop image as a .jpg file, trimmed to the second clipping path in the file.
  Alternatively, fl_clip,pg_name:mypath will trim to the clipping path named mypath in your PSD file.
You can force all semi-transparent pixels in an image to be either fully transparent or fully opaque using the e_opacity_threshold transformation effect. This can be a useful solution when PhotoShop PSD files are delivered in a format that supports partial transparency, such as PNG, and the default results are not as expected. For details, see the e_opacity_threshold parameter in the Transformation URL API Reference.
You can get the original x (page_x) and y (page_y) co-ordinates of a layer (px and py in URLs), and use them to set user defined variables, or within arithmetic or conditional transformations. See this article for an example.

Limitations with Photoshop images

There are some known limitations when working with Photoshop images:

If a clipping mask is used in a PSD file, the mask only works if delivering the image as a whole. It does not work when delivering selected layers. Layer masks do work when delivering selected layers, so consider using layer masks instead if you intend to be selective about the layers you want to deliver.
PSD files using custom color spaces, such as duotone and palette mode, or those using spot colors from a non-default color book, do not always render correctly when delivered with an image extension. Try to stick to RGB, Grayscale and CMYK.
Layers that apply certain effects or blend modes cannot be accessed using the pg transformation parameter.
For example, in the PSD file shown in the screenshot below, the effect on the third layer is applied to the second layer, but accessing pg_4 returns an error: "Image only has 3 pages and page 4 requested" (pg_1 delivers the whole image, including the effect). Accessing pg_3 returns only the second layer without the effect.

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page: