Angular Cloudinary using gravity

Question

Ugh, this is annoying. So I am trying to use Cloudinary for Angular and the documentation talks about gravity which is great.

https://cloudinary.com/documentation/angular_image_manipulation

So I set up a test:

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill" gravity="faces">
    </cl-image>
</div>

And this works, sweet. Then I figured, what happens if I want to do faces or center, depending on a variable. So I added some code:

public gravity: string;

@Input() public useFace: boolean;

constructor() {
    this.gravity = this.useFace ? 'faces' : 'center';
}

And I figured I could just update my html to this:

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill" [gravity]="gravity">
    </cl-image>
</div>

which fails with the error:

If 'cl-image' is an Angular component and it has 'gravity' input, then verify that it is part of this module.

not good. So I figured because of the example on the link above uses cl_transformation then I should too. So I did this:

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill">
        <cl-transformation [gravity]="gravity"></cl-transformation>
    </cl-image>
</div>

And got this error:

If 'cl-transformation' is an Angular component and it has 'gravity' input, then verify that it is part of this module.

Hmm, so I changed it to this:

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill">
        <cl-transformation gravity="faces"></cl-transformation>
    </cl-image>
</div>

Which works..... So I figured it must be something to do with what's at the bottom of the page, so I changed my html to this:

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill" [attr.gravity]="gravity">
    </cl-image>
</div>

No errors, but not focused on the face. I changed my gravity in the code like this:

public gravity: string = "faces";

constructor() {}

And ran it again, still no errors but not focusing. Then I changed my html to this:

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill">
        <cl-transformation [attr.gravity]="gravity"></cl-transformation>
    </cl-image>
</div>

Again, no errors, but no focused area. So I tried:

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill">
        <cl-transformation attr.gravity="{{gravity}}"></cl-transformation>
    </cl-image>
</div>

No errors, but not being focused again. So I then tried this:

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill" attr.gravity="{{gravity}}">
    </cl-image>
</div>

And still no error, but still not focusing. Does anyone know what I am doing wrong?

Answer 1

In your app.component.ts, you can declare your variables like so:

public imageHeight = "200";
public gravity = "faces";

Then in your app.component.html, in your cl-transformation element, you can use the keyword attr.:

<cl-transformation
  crop="crop"
  attr.height="{{imageHeight}}"
  attr.gravity="{{gravity}}"
>

CodeSandbox demo here

There's also a possibility that our algorithm is not detecting faces for whatever reason in your image. If that's the case, you may have to resort to manual work-arounds by providing x and y coordinates, or setting gravity to "north" or "south_east" for example. If you'd like to discuss your specific images, could you provide your cloud name and the images in question? If you don't want to disclose these here, you can feel free to open a ticket at https://support.cloudinary.com