search

nuxt / image

Plug-and-play image optimization for Nuxt applications.
https://image.nuxt.com
MIT License
1.33k stars 270 forks source link

Cloudinary chained transformations #913

Open bart opened 1 year ago

bart commented 1 year ago

Hey, first of all thanks for the great module to deliver optimized images in a Nuxt project easily. For a project I'm using Cloudinary as my image provider. We want to resize an image dynamically and also want to add a watermark (also resized) onto that image. The only approach we see here are Chained Transformations which a separated by a slash.

For example: https://res.cloudinary.com/bucket/image/upload/c_fill,h_1200,w_800/c_scale,g_south_east,l_logo,w_150,x_30,y_30,o_30/v1234567890/image.jpg

I'm now wondering which property I have to use to add the image as a separate chunk (with an additional slash like in my example above). Everything I tried out with modifiers add them to the same chunk (without an additional slash). Any help is highly appreciated, thanks in advance!

vanling commented 5 months ago

I'm guessing this is still not possible?

If I only knew how .. my proposed syntax would be:

:modifiers="[
              { e: 'trim:10', c: 'pad', g: 'south', h: 260, w: 70 },
              { c: 'limit', h: 260, w: 70 },
              { b: 'rgb:fff', f: 'auto', q: 100 },
            ]"