Closed nbarrett closed 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
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?
The production site doesn't help, if you share a link to the repo maybe I can check your code.
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
Try this
this.galleryRef = this.gallery.ref(this.galleryId, {
imageSize: 'cover'
});
thanks for suggestion - sadly that didn't make any difference 😞 - can you think of anything else I can do to diagnose this problem please?
You can try setting imageSize
in the global config
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"
What is the expected behavior?
What is the current behavior?
imageSize
=cover
, on my own project, the gallery appears as thoughcontain
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:
In the previous issue I raised you correctly pointed out that
imageSize
was set tocontain
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?