search

commercetools / commercetools-sunrise-theme

Sunrise Theme from commercetools
http://commercetools.github.io/commercetools-sunrise-theme/site/en/home.html
13 stars 16 forks source link

When image missing, layout is broken #339

Closed lauraluiz closed 8 years ago

lauraluiz commented 8 years ago

In the POP, when an image could not be loaded, the layout's grid is broken. It happens because the thumbnail changes size, becoming 2px shorter when the image is not there. Can somebody fix it? @adnasa can you?

adnasa commented 8 years ago

I don't follow exactly what the problem is here. Have we found out why the image couldn't be loaded in the first place?

Is the expected behaviour that the layout adjusts itself if there is no image present for the product in question?

It sounds to me that this is related to the placehold.it issue

lauraluiz commented 8 years ago

Images are sometimes missing in Sunrise because of a 403, but the reason is not important. It is true that eventually the best scenario would be to replace it with a "image not available" or something, but still the layout should not be broken because an image is missing. Especially not because of 2px less, which are probably coming from a border, padding or something that is applied to the image and can be applied somewhere else to avoid this issue.

Have you tried reproducing the issue?

screen shot 2016-01-08 at 11 12 53

adnasa commented 8 years ago

No I haven't.

I agree that the layout shouldn't be broken in the first place, but let me go ahead and state that this probably happened because this case hasn't been taken into consideration.

Unfortunately I can not prioritise this issue

lauraluiz commented 8 years ago

I guess it won't be urgent until end of this month. Then it is important that the grid is not broken for the presentations, because that little thing gives quite a bad impression (more than a broken image). And I'm very sure it is a really small thing that is causing this.

andalusi commented 8 years ago

@lauraluiz Hi Laura, I got a neat solution for that issue, called "the padding hack" http://andyshora.com/css-image-container-padding-hack.html

Here is a example I allready use: http://clients.betterdoneandperfect.com/modix-2016/ (Scroll all the way down to 3.9 Platzhalter für Lazyloading)

lauraluiz commented 8 years ago

@andalusi that would be great. I just implemented a lazy loading for images that starts with a 1px pic, so you can extend it or replace it (if it's easier) and enable also the padding hack. I guess that should solve it, but to make sure please simulate that one rightmost picture can't load the picture, that's how the grid breaks.