How To Upload Images Using PHP On Cloudinary – A Free Image Hosting Service

Web developers always heard a word CDN. CDN means content delivery network or content distribution network. By hosting our CSS, JS and images on cloud and access 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 delivered from third-party servers to our server. This process saves an extra call for files and as a result load on our own server.

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

Free Plan

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

Get API Key And API Secret

Our application is going to interact with the 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.

API Keys

Next thing need to do is, 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 get our API credentials. We also installed the PHP library. Now, we are ready to go ahead and write a piece of code which upload 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 HTML img tag and display the image. In case of public_id, to display the image you need to write code as below.

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

Additionally, you can set width, height, alt attribute 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 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.

Posted in PHP

Leave a Reply

Your email address will not be published. Required fields are marked *