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.
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.
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
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.