Laravel custom attribute in Model for Scaling image using Cloudinary URL - php

Question

In my web app I am using Cloudinary for image storing. Image uploading is working properly but i want to create a custom attribute for image so when getting back the image url from the database with some modification with width and height.
The link of a image: https://res.cloudinary.com/wokong/image/upload/v1568570430/storyHeader/cxjir4g9tkaa8xepxodg.jpg
which is stored in database but when it fetch from the database, It should come with some scaling so that It wont take much time for website loading.
here is my StoryModel:
class Story extends Model
{
use Commentable, Searchable;
/**
* The attributes that are mass assignable.
*
* #var array
*/
protected $fillable = [
'title',
'summary',
'content',
'created_at',
'story_statuses_id',
'image', 'language',
'likes',
'views',
'url_key',
];
/**
* The attributes that should be cast to native types.
*
* #var array
*/
protected $casts = [
'is_public' => 'boolean',
];
I dont understand how to use it anyone can help?

Answer 1

Cloudinary supports runtime image resizing
As per their documentation instead of this
https://res.cloudinary.com/wokong/image/upload/v1568570430/storyHeader/cxjir4g9tkaa8xepxodg.jpg
use
https://res.cloudinary.com/wokong/image/upload/w_100,h_100,c_fit/v1568570430/storyHeader/cxjir4g9tkaa8xepxodg.jpg
As you can see, i have added /w_100,h_100,c_fit/ after upload to instruct Cloudinary to do the resizing on the fly
w is for width, h is for height and c is for scale type to be used while cropping
You can find the documentation here
UPDATE 1
Something like this should do it
$default_url = "https://res.cloudinary.com/wokong/image/upload/v1568570430/storyHeader/cxjir4g9tkaa8xepxodg.jpg";
$width = 100;
$height = 100;
echo str_replace("/upload", "/upload/w_".$width.",h_".$height.",c_fit", $default_url);
UPDATE 2
Your model will look like
class Story extends Model
{
use Commentable, Searchable;
/**
* The attributes that are mass assignable.
*
* #var array
*/
protected $fillable = [
'title',
'summary',
'content',
'created_at',
'story_statuses_id',
'image', 'language',
'likes',
'views',
'url_key',
];
/**
* The attributes that should be cast to native types.
*
* #var array
*/
protected $casts = [
'is_public' => 'boolean',
];
public function getImageForWebAttribute()
{
$width = 100; // You can keep this info in app config
$height = 100;
// Here i am assuming `image` is where you store Cloudinary url
return str_replace("/upload", "/upload/w_".$width.",h_".$height.",c_fit", $this->image);
}
}
and you can call it like
$story->image_for_web
Documentation for laravel custom mutators can be found here

Answer 2

Instead of saving the whole URL of the uploaded image in your database, you can save the public_id returned in the upload response.
Then you can just use Cloudinary's SDK to generate the transformation URLs for you, by passing the desired transformation parameters to the cloudinary_url() Helper function, along with the image's public_id.
For example, let's assume that you want to generate a URL of an image which its public_id is sample. In addition, you want that the image will be delivered with the best format possible, based on the client's device and browser. You would also like to use Cloudinary's automatic quality algorithm and scale the image down to a width of 500px while retaining its original aspect ratio.
You can achieve it by using the following code:
$url = cloudinary_url('sample', array(
'fetch_format' => 'auto',
'quality' => 'auto',
'crop' => 'scale',
'width' => 500
));
echo $url; will print the following:
http://res.cloudinary.com/<cloud_name>/image/upload/c_scale,f_auto,q_auto,w_500/sample
If you wish to generate the whole <img> tag using the SDK, you can utilize cl_image_tag() as an alternative to the URL only output of cloudinary_url().
Here's the link to the relevant section in Cloudinary's documentation with some more examples on how to use both cl_image_tag() and cloudinary_url().

Answer 3

Okay just an additional help for ...
Say for instance you attached $images to a view from the controller in laravel
you could generate fixed width and height on the fly via the url and attach to bootstrap grid system..
`
<div class="col-6 col-md-4 col-lg-3">
<a href="{{$image->image_url}}">
#php
$url = $image->image_url;
#endphp
<img class="img img-fluid" src="{{ str_replace("/upload", "/upload/w_350,h_220,q_70,c_scale", $url) }}" alt="">
</a>
</div>
`
You could also set this attributes of the image via the controller method using
Cloudder::show(Cloudder::getPublicId(), ["width" => $width, "height"=>$height])