imageSize = cover working as though imageSize = contain selected

nbarrett commented 3 months ago

What is the expected behavior?

This is actually a follow on to https://github.com/MurhafSousli/ngx-gallery/issues/588 that I raised but never actually resolved.

What is the current behavior?

When I choose imageSize = cover, on my own project, the gallery appears as though contain has been selected and black borders appear on the left/right or top/bottom.

On my production site for example here I've hardcoded imageSize = cover on the gallery component. You can visit that page, and go into the inspector and see the attribute on the gallery correctly set.

Here's a screenshot of it not rendering right:

And here's what it looks like this in my code:

<gallery class="gallery-customise"
           [id]="galleryId"
           [autoPlay]="album?.slideInterval>0"
           [playerInterval]="album?.slideInterval"
           imageSize="cover"
           [thumbPosition]="album.galleryViewOptions?.thumbPosition ||'left'"
           [thumbView]="'default'"
           [thumbImageSize]="album.galleryViewOptions?.thumbImageSize || 'cover'"
           [loadingStrategy]="album.galleryViewOptions?.loadingStrategy || 'lazy'"
           [dots]="album?.galleryViewOptions?.dots||true"
           (indexChange)="indexChange($event)"
           [dotsPosition]="album?.galleryViewOptions?.dotsPosition ||'bottom'">
      <ng-container *galleryImageDef="let item; let active = active">
          <div *ngIf="active" class="item-panel-heading">
              <div>{{item?.alt}}</div>
          </div>
      </ng-container>
  </gallery>

In the previous issue I raised you correctly pointed out that imageSize was set to contain but in the above example now, it's definitely set to cover, but the gallery seems to be ignoring that setting on my site..

What are the steps to reproduce?

I then attempted to create a stackblitz project which I then did using exactly the same images as the above example which is here but annoyingly that example works exactly correctly! Do you have any idea why the behaviour is different between the stackbitz project and my prod site please as I've been scratching my head for the last few days to no avail.

What is the use-case or motivation for changing an existing behavior?

Gallery doesn't look quite as good when there are black borders, and like the author of ngx-gallery, I'm want perfection!

Which versions are you using for the following packages?

Angular: 16.2.9 Angular CDK: 16.2.9 Angular CLI:16.2.9 Typescript: 4.9.5 Gallery: 11.0.0

Is there anything else we should know?

MurhafSousli commented 3 months ago

Maybe you are calling a function that sets the config from the service or component ref, I suggest you try to set the gallery items using the items input of the gallery then see if cover is applied

nbarrett commented 3 months ago

On my production site, I have tried initialising the gallery both with Template Binding (as per stackblitz) and via Gallery Service and it still behaves the same. I also tried initialising the stackblitz project via a Gallery Service and this consistently works so there's something about my project that's making it not work. Can you suggest by looking at the inspector on my project what might be wrong?

MurhafSousli commented 3 months ago

The production site doesn't help, if you share a link to the repo maybe I can check your code.

nbarrett commented 3 months ago

Thanks for your offer to look at the repo - this is the area of code where the gallery component is located: https://github.com/nbarrett/ngx-ramblers/blob/main/projects/ngx-ramblers/src/app/album/view/album-gallery.ts

MurhafSousli commented 3 months ago

https://github.com/nbarrett/ngx-ramblers/blob/167c7aaa2e26d89ea384946da08798da5995ebb5/projects/ngx-ramblers/src/app/album/view/album-gallery.ts#L88

Try this

 this.galleryRef = this.gallery.ref(this.galleryId, {
   imageSize: 'cover'
 });

nbarrett commented 3 months ago

thanks for suggestion - sadly that didn't make any difference 😞 - can you think of anything else I can do to diagnose this problem please?

MurhafSousli commented 3 months ago

You can try setting imageSize in the global config

nbarrett commented 3 months ago

Thanks for pointer @MurhafSousli! I never thought to look at my global config which I must have copied from somewhere but it had both:

autoHeight: true,
imageSize: "cover"

the fix was simply to remove the autoHeight property from it. Production site now looking perfect ❤️ thanks again for your help in getting this resolved.

MurhafSousli / ngx-gallery