Invision Community 4: SEO, prepare for v5 and dormant account notifications Matt November 11, 2024Nov 11
Posted February 6Feb 6 Just yesterday, all of the images would completely fill in the grid, but now they are reduced showing a grey background. Is this a setting I accidentally changed? If I did, I don't know what I did. Any suggestions?
February 6Feb 6 Typically, the image is not able to fit the aspect ratio needed there when a background is put in. Like the Mustang fits the aspect ratio and size there. Is this the case with those?
February 6Feb 6 Author 1 minute ago, Jim M said:Typically, the image is not able to fit the aspect ratio needed there when a background is put in. Like the Mustang fits the aspect ratio and size there. Is this the case with those?As far as I remember, at least in version 4, all of the images filled in nicely. I'm not sure what happened since the update. These are old existing images that were present prior to the update. Is there a way I can reprocess the images to get them to fill in?
February 6Feb 6 Just now, GoGators said:Is there a way I can reprocess the images to get them to fill in?If they do not fit the aspect ratio, they will not fit in or get if the image will get distorted, it will not do that.Do you have a link to the issue?
February 6Feb 6 Author 7 minutes ago, Jim M said:Typically, the image is not able to fit the aspect ratio needed there when a background is put in. Like the Mustang fits the aspect ratio and size there. Is this the case with those?1 minute ago, Jim M said:If they do not fit the aspect ratio, they will not fit in or get if the image will get distorted, it will not do that.Do you have a link to the issue?Everything Else - The Armory Edited February 6Feb 6 by GoGators
February 6Feb 6 50 minutes ago, GoGators said:Everything Else - The ArmoryYes, the image is too small to fit the area or the aspect ratio is wrong. This is intended to not get the image cutoff or look distorted (which was a complaint in version 4).
February 6Feb 6 Author 23 minutes ago, Jim M said:Yes, the image is too small to fit the area or the aspect ratio is wrong. This is intended to not get the image cutoff or look distorted (which was a complaint in version 4).So, you are saying that this was done by design?
February 6Feb 6 1 minute ago, GoGators said:So, you are saying that this was done by design?Yes, it is intended
February 6Feb 6 Author 2 minutes ago, Jim M said:Yes, it is intendedIf that's the case, then I much preferred version 4's handling of the image grid. It just doesn't look good and makes the images out of place now.
February 6Feb 6 Solution You can restore the previous behavior by adding this custom CSS::is(.ipsFigure--contain, .ipsMasonry) .ipsFigure__main > :is(video, img) { object-fit: fill; }
February 6Feb 6 Author @Terabyte1 hour ago, teraßyte said:You can restore the previous behavior by adding this custom CSS::is(.ipsFigure--contain, .ipsMasonry) .ipsFigure__main > :is(video, img) { object-fit: fill; }@teraßyte You help me again. I thank you so much ...It is truly appreciated
February 7Feb 7 Terabyte's solution here is correct for your situation. 🤝For anyone interested, I thought I'd clarify why this happens. The image thumbnails in your screenshot are slightly too small in dimension to fill the masonry grid. The way they've been handled (with the transparent space) is intentional, because sometimes tiny images (imagine an emoji or a small icon) are uploaded, and it wouldn't always be ideal to stretch these to fill the entire image cell.Here's an example, where the worm image is a small one (72x72 pixels), and so it's displayed in its natural dimension:With fill applied, it'll stretch the image so it fills the entire cell. This solution works fine for your site, but as a default value, it might not be the best as it'll stretch thumbnails beyond their natural size:With version 5 being used more and more in the wild, if this situation comes up often, I'll look into adjusting this by default so images always occupy the image cell.
February 7Feb 7 Author Thank you, @Ehren for the explanation. I know it's all subjective, but I felt the light grey background stood out a little too much for my liking, making the images on my website look out of place by having some filled in and some not. Perhaps a darker background in the grid would have blended better versus the light/med grey blank space we have now. On a side note, I really like the new theme created for version 5. The side bar is great, especially having a "WordPress like" theme adjustment area to easily modify many settings. I'm really happy with the upgrade so far.