Plesk | Collection Listing - Images don't load properly

Helpdesk Plesk
, ,
1

Hello,

I have an issue with loading images in a collection manager.
When the page loads, they display correctly (both in preview and production):

image
image1856×732 84.7 KB

However, when a button is clicked, the images do not load correctly (it seems like the CSS isn’t loading):

image
image1814×870 109 KB

But upon refreshing the browser Or if “Productos” is clicked again, they display properly, however, if any button is clicked again, the images reload incorrectly.

The website is Trabajos - Piscinas Soler

What could be happening?
What solution can I apply?

Thank you very much.
Best regards.

2

Hello,

I posted this thread 4 days ago, and I need to make progress with this website.

I’ve been researching about it and I found this, in case it helps to find a solution.

When the page loads, it displays these images in the collection listing:

image
image1420×302 68.5 KB

When the collection filter buttons are clicked, it seems that the image changes to another one:

image
image1428×258 52.7 KB

On the other hand, I’ve been looking inside the component to see which one adjusts the images, and it’s the image gallery, specifically the responsive option.

image

Could it be that some JavaScript isn’t working correctly?
How can I fix it so that the images are displayed correctly?

Thank you very much,
Best regards.

4

Hey @Danibuyovd - I have forwarded this to the developers and marked this as important to solve this quickly.

Do you have this issue with all browsers?

5

Hi @Andre ,

yes i have this issue with all browsers, i tried with Chrome, Firefox, Edge and Opera.

Thanks in advanced.
Best Regards.

6

Hey there!

So, your way of setting this up is really interesting!

So, we were wondering about the implementation of the gallery at first, because there is a single gallery in a single collection entry which shows all images (but they seem to be static uploaded to the gallery)

As soon as you use the filter, SJ is loading the images in a different way (like you set it up).
Instead of /960x960/a.jpg it is just /960/a.jpg .

However, it looks like we are not applying the chosen aspect ratio to galleries that are mapped to a collection field. We will work on that and created a developer ticket.

The solution is the following CSS which has been added to your website:

// Fix aspect ratio for collection gallery
.ed-collection-container .ed-gallery img {
    aspect-ratio: 1;
    object-fit: cover;
}

Since it’s a Plesk site, it needs to be published again (which we cannot do) to apply the changes.

Hope this helps!

1 Like
7

Hello @Andre,

Thank you for the solution, it works perfectly!

Best regards.

1 Like