Design Issue: Gallery Album Brick Layout Displaying Strange BG Color

Hi @Dreadknux

What's the URL to that page?

The only time images shouldn't fill the entire rectangle is when they're smaller than the rectangle. Imagine uploading a small 64x64 pixel emoticon. If it filled the entire rectangle, it would be incredibly pixelated, so instead, it's shown at its native size (which is what scale-down does).

So at the moment, my guess is those 2 images are quite small in size (smaller than the rectangle which they're placed in). If this is true, then the above is working as intended and this isn't a bug (although I do agree that the blue is quite intense).

If the images are bigger than that rectangle, then I'll take a closer look for you.

13 hours ago, Ehren said:

Hi @Dreadknux

What's the URL to that page?

The only time images shouldn't fill the entire rectangle is when they're smaller than the rectangle. Imagine uploading a small 64x64 pixel emoticon. If it filled the entire rectangle, it would be incredibly pixelated, so instead, it's shown at its native size (which is what scale-down does).

So at the moment, my guess is those 2 images are quite small in size (smaller than the rectangle which they're placed in). If this is true, then the above is working as intended and this isn't a bug (although I do agree that the blue is quite intense).

If the images are bigger than that rectangle, then I'll take a closer look for you.

Hi Ehren

Do you mind if I DM you the details? This is taking place on a private test instance on my own server (not the alpha preview instances provided by Invision), and access is passworded.

To answer your question though, I can confirm those two images in particular are quite large in size (you should be able to see when you navigate to those images directly).

Sure, sending me a DM is fine 🙂 

Just bumping this @Dreadknux. I'm ready to fix it whenever I can get access 🙂 

Sorry @Ehren - work got the best of me since our last message! I've DM'd you now, thanks so much for taking a look.

As suspected, the image simply isn't large enough to fill that area.

The dimensions of the thumbnails on that page are 600x337 (right click and open the image in a new tab to confirm), but the size of the masonry grid cell is 738x414.

I'm aware that the size of the non-thumbnail image is larger than that, but full-sized images aren't loaded on the grid for performance reasons. There's potentially a setting which controls the max-width of these thumbnails but I can't confirm from the top of my head.

To adjust it on your own site so all masonry images fill the entire cell, add this to your Custom CSS:

/* Ensure Masonry images cover full size of cell */
.ipsMasonry .ipsFigure__main > :is(video, img){
	object-fit: cover;
}

That's great, thanks @Ehren!