Laravel custom attribute in Model for Scaling image using Cloudinary URL

2
votes

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?

3
phplaravelcloudinary
Based on my understanding of your problem, i would recommend creating multiple images with the scale you want and upload it. ie) cxjir4g9tkaa8xepxodg-160x160.jpg, cxjir4g9tkaa8xepxodg240x240.jpg etc – Cerlin
If I understand correctly, you want to modify the url to a scaled version before sending it with the response? – Jerodev
right @Jerodev I want this actually – John
But i dont want to store the scaled images to again cloudinary. I just want this for user experince @Cerlin – John
How could I make that using a custom attribute?? – John

3 Answers

1
votes

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

1
votes

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

0
votes

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])