Angular Cloudinary width not working when using variables

user_1303170 0
Viewed 139

I have an issue with using Cloudinary with Angular. If I add a simple image like this:

<cl-image class="img-fluid" [public-id]="brand.image.publicId" dpr="auto" crop="scale">
    <cl-placeholder type="pixelate">
    </cl-placeholder>
    <cl-transformation quality="auto" fetch-format="auto" width="500">
    </cl-transformation>
</cl-image>

This works fine. If I try then to add a width:

<cl-image class="img-fluid" [public-id]="brand.image.publicId" dpr="auto" crop="scale">
    <cl-placeholder type="pixelate">
    </cl-placeholder>
    <cl-transformation width="150" crop="thumb">
    </cl-transformation>
    <cl-transformation quality="auto" fetch-format="auto" width="500">
    </cl-transformation>
</cl-image>

This also works. But I want my width to be a variable, not a static width. So I updated the code to this:

<cl-image class="img-fluid" [public-id]="brand.image.publicId" dpr="auto" crop="scale" *ngIf="width">
    <cl-placeholder type="pixelate">
    </cl-placeholder>
    <cl-transformation [width]="width" crop="thumb">
    </cl-transformation>
    <cl-transformation quality="auto" fetch-format="auto" width="500">
    </cl-transformation>
</cl-image>

And this doesn't work. It displays the image, but it has not resized it, which is no good. Notice this line:

<cl-transformation [width]="width" crop="thumb">

It's like it is being ignored, also I made sure the component is not being created until a width was set by using *ngIf="width".

Does anyone know why this isn't working?

cloudinary angular
3 Answers

On your app.component.ts, you can declare your variables e.g:

public imageHeight = "500";
public imageQuality = "50";

And then on your app.component.html, in your cl-transformation element, you will need to use the keyword attr.:

<cl-transformation
  attr.height="{{imagesize}}"
  crop="scale"
  attr.quality="{{imagequality}}"
>

CodeSandBox Demo

user_138479030

I don't have much experience with Cloudinary. and did not test it myslef. Looking at Cloudinary code, there are several options you can try:

  1. Use the width input on the cl-image component. The component has definition for it
export class CloudinaryImage
  implements AfterViewInit, OnInit, AfterViewInit, AfterContentChecked, OnChanges, OnDestroy {
  @Input('public-id') publicId: string;
  @Input('client-hints') clientHints?: boolean;
  @Input('loading') loading: string;
  @Input('width') width?: string;
  @Input('height') height?: string;
  1. If that is not what you are looking for, then looking at the cl-transformation directive, it seems you can only pass native attributes.
export class CloudinaryTransformationDirective {

  constructor(private el: ElementRef) {
  }

  getAttributes(): NamedNodeMap {
    return this.el.nativeElement.attributes;
  }
}

Meaning that in order to transfer dynamic values to the directive element attribute, maybe you can use interpolation.

<cl-transformation width="{{ width }}" >
user_36251710

I'm not too familiar with Angular but you can try the following until someone more familiar comes along:

<cl-transformation width={{width}} crop="thumb">

Passing in a hard-coded integer works, so as long as width is defined and is an integer, it might work.

user_146021270
Related