CDN is not a new word for web developers. CDN means content delivery network or content distribution network. Hosting our CSS, JS, and images on the cloud and accessing through CDN reduce the load on our own server which ultimately helps in website performance.

When we host our files on the cloud and access them through CDN, these files are delivered from third-party servers to our server. This process saves an extra call for files and as a result loads on our own server.

Cloudinary is an image hosting service that allows us to manage our images and videos. They provide both free and paid plans. Cloudinary free plan is quite good. Below is the screenshot of their free plan.

In this article, we study how to upload images on Cloudinary, and display images from Cloudinary using PHP.

Get API Key And API Secret

Our application is going to interact with Cloudinary. To communicate with the Cloudinary we need to create API keys. For that, you need to create an account on Cloudinary and get your API keys. In our case, we require 3 things – Cloud name, API Key and API Secret. You will get all these details from the Cloudinary dashboard.

The next thing that needs to do is, to install the official PHP library of a Cloudinary. You should have Composer installed on your system.

Open the terminal in your project root directory and run the below command.

composer require cloudinary/cloudinary_php

Upload Image On Cloudinary

We have created an account on Cloudinary and got our API credentials. We also installed the PHP library. Now, we are ready to go ahead and write a piece of code that upload an image on Cloudinary.

<?php
require_once "vendor/autoload.php";
 
\Cloudinary::config(array( 
    "cloud_name" => 'YOUR_CLOUD_NAME', 
    "api_key" => 'YOUR_API_KEY', 
    "api_secret" => 'YOUR_API_SECRET'
));
 
$arr_result = \Cloudinary\Uploader::upload(__DIR__. "/images/sample.png");
print_r($arr_result);
?>

In the above code, you need to replace placeholders with the actual values. You should also set a path for your image. In our case, we set it to __DIR__. "/images/sample.png".

When we print the response, we get the output like below.

Array
(
    [public_id] => sample
    [version] => 1312461204
    [width] => 864
    [height] => 576
    [format] => jpg
    [bytes] => 120253
    [url] => https://res.cloudinary.com/demo/image/upload/v1371281596/sample.jpg
    [secure_url] => https://res.cloudinary.com/demo/image/upload/v1371281596/sample.jpg
)

Here, you need to store public_id or secure_url(or URL) in your database. By storing secure_url you can directly pass this URL to the HTML img tag and display the image. In the case of public_id, to display the image you need to write the code as below.

<?php
echo cl_image_tag('PASTE_PUBLID_ID_HERE');
?>

Additionally, you can set width, height, and alt attributes using the same method.

<?php
echo cl_image_tag('PASTE_PUBLID_ID_HERE', ['alt' => 'test', 'width' => 100, 'height' => 150]);
?>

You may also like to read Cloudinary’s official PHP integration documentation.

We hope you understand how to work with the Clodinary APIs. We recommend using this image hosting service which help you in improving the site performance.

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.