How to extract public id from a Cloudinary URL easily
Tags: cloudinary, javascript, webdev, tutorial
Published: 2023-07-26 06:30:02

---
title: "How to extract public id from a Cloudinary URL easily"
description: "Explore how we can extract Cloudinary public id and build new URL using the cloudinary-build-url package"
published: true
img: "articles/Nuxt/transforms"
cover_image: https://res.cloudinary.com/mayashavin/image/upload/v1690314174/articles/cloudinary/Extract_Cloudinary_Public_Id_1.png
series: Image optimization with Cloudinary Series
tags: ['cloudinary', 'JavaScript', 'webdev', 'tutorial']
canonical_url: https://mayashavin.com/articles/extract-cloudinary-public-id
---

_In this post, we will learn how to extract the public id from a Cloudinary delivery URL and build a new URL with the desired transformations using the `cloudinary-build-url` package._

## Table of Content

- [Table of Content](#table-of-content)
- [Pre-requisites](#pre-requisites)
- [Understanding the Cloudinary delivery URL](#understanding-the-cloudinary-delivery-url)
- [Extracting the public ID and build the URL](#extracting-the-public-id-and-build-the-url)
- [Summary](#summary)

## Pre-requisites

Cloudinary is an end-to-end service offering image and video management, such as storage, run-time manipulation, and fast delivery as a CDN with optimization.

You need to get yourself [a FREE Cloudinary account](https://cloudinary.com/signup) and upload your images to Cloudinary or any data storage you choose. We assume the images are already uploaded to Cloudinary for this post.

We are ready to move on to the next section - understanding how the Cloudinary URL works.

## Understanding the Cloudinary delivery URL 

Before creating our image variants, let's look at the Cloudinary delivery URL format.

<img src="https://res.cloudinary.com/mayashavin/image/upload/q_auto,f_auto/v1597083188/articles/cloudinary_url_format" loading="lazy" alt="The Cloudinary URL format" class="mx-auto"/>

In which:

- `cloud-name` is your Cloudinary's cloud name, which you can find in the Dashboard or the Settings page of the Cloudinary app.

<img src="https://res.cloudinary.com/mayashavin/image/upload/q_auto,f_auto/v1629659840/articles/cloudinary/cloudinary_cloud_name" alt="Cloudinary cloud name" class="mx-auto" />

- `transformations` - a string of manipulation options (without space) to generate the desired version based on Cloudinary standards.
- `version` - auto-generated version for cache purposes from Cloudinary,
- `path-to-image` - or public id, the unique path of an image stored in Cloudinary, or the URL of an image stored in external sources (S3, for instance).

To make it easier to understand, we look at the below example:

```html
https://res.cloudinary.com/example_cloud/image/upload/w_100,h_100,c_thumb,r_max/v1/examples/avatar.png
```

In the above URL, we have:

- `example_cloud` - the cloud name
- `image` - the resource type
- `upload` - indicates that the image is stored in Cloudinary. If the image is from an external source, the value will be `fetch`.
- `w_100,h_100,c_thumb,r_max` - the transformations of 100x100 pixels in size, cropped as a thumbnail with auto face detection, and border-radius at maximum for a round shape.
- `v1` - the version of the image
- `examples/avatar` - the public id of the image

From here, you can directly modify the URL to get the desired transformation parameters manually or programmatically with the available official SDKs and tools.

However, for any SDK and tool, we still need to know and pass the public id of the image. Unfortunately, Cloudinary doesn't offer a straightforward way to get the public id from the console or its SDKs.

And that's what we are going to do next.

## Extracting the public ID and build the URL

To extract the public id from the Cloudinary delivery URL, we will first install the [cloudinary-build-url](https://cloudinary-build-url.netlify.app/) package using the command below:

```
yarn add cloudinary-build-url
```

Then in our JavaScript file `useCloudinary.js`, we can import the `extractPublicId` method from the package and use it to extract the public id from the URL:

```js
import { extractPublicId } from 'cloudinary-build-url'

const publicId = extractPublicId(
  'https://res.cloudinary.com/example_cloud/image/upload/w_100,h_100,c_thumb,r_max/v1/examples/avatar.png'
)
```

The above code will return the public id `examples/avatar` as a string. You then can pass this public id to the `buildUrl` method from the same package to build the URL with the desired transformations, such as 500x500 pixels size and with a grayscale effect.

```js
import { extractPublicId, buildUrl } from 'cloudinary-build-url'

const publicId = extractPublicId(
  'https://res.cloudinary.com/example_cloud/image/upload/w_100,h_100,c_thumb,r_max/v1/examples/avatar.png'
)

const url = buildUrl(publicId, {
  cloud: {
    cloudName: 'example_cloud',
  },  
  transformations: {
    resize: {
      type: 'scale',
      width: 500,
      height: 500,
    },
    effect: {
      name: 'grayscale',
    },
  },
})
```

The above function will return an URL as in the following format, ready for us to use in our application.

```
https://res.cloudinary.com/example_cloud/image/upload/w_500,h_500,c_scale,e_grayscale/examples/avatar
```

And that's it! We have successfully extracted the public id from a Cloudinary delivery URL and built a new URL with the desired transformations.

## Summary

In this post, we have learned how to extract the public id from a Cloudinary delivery URL and build a new URL with the desired transformations using the `cloudinary-build-url` package. Cloudinary is an excellent tool to help us handle image needs in our application with minimum effort.

What's next? How about integrating it into your application and seeing how it works?

👉 _Learn about Vue with my new book [Learning Vue](https://www.oreilly.com/library/view/learning-vue/9781492098812/). The early release is available now!_

👉 _If you'd like to catch up with me sometimes, follow me on [Twitter](https://twitter.com/MayaShavin) | [Facebook](https://www.facebook.com/mayashavin/) | [Threads](https://www.threads.net/@mayashavin)._

Like this post or find it helpful? Share it 👇🏼 😉