Search code examples
angularimage-manipulationcloudinary

Cloudinary with Angular

I am using Cloudinary with Angular, but it's not going as planned. I am using this documentation:

https://cloudinary.com/documentation/angular_image_manipulation

I can get the image to render using:

<cl-image class="img-fluid" [public-id]="section.image.publicId">
</cl-image>

I thought that it would automatically resize based on the size of the window; which isn't the case. So I have tried to use transformations. At first I tried this:

<cl-image class="img-fluid" [public-id]="section.image.publicId">
    <cl-transformation height="253" width="568" crop="fill">
    </cl-transformation>
</cl-image>

Which does indeed create the transformation. I thought, cool, now I will add multiple transformations hoping that it would select the correct one when at a certain size:

<cl-image class="img-fluid" [public-id]="section.image.publicId">
    <cl-transformation height="388" width="810" crop="fill">
    </cl-transformation>
    <cl-transformation height="253" width="568" crop="fill">
    </cl-transformation>
</cl-image>

But when I do that, it only takes the last transformation. If I change to this:

<cl-image class="img-fluid" [public-id]="section.image.publicId">
    <cl-transformation height="253" width="568" crop="fill">
    </cl-transformation>
    <cl-transformation height="388" width="810" crop="fill">
    </cl-transformation>
</cl-image>

It does swap the transformations. I believe it's because of this line in the documentation:

If you include transformations in both the and components, the transformations from the component are added as the last chain in the resulting URL source.

So, my question is, can I get Cloudinary to serve an image based on the screensize of the requesting device automatically? If not, can I specify transformations for different breakpoints?

Solution

  • You should be able to use the responsive keyword along with width:auto and dpr:auto as mentioned here.

    Here is a CodeSandBox example