[Resolved] SVG feature images overlaid in masonry grid

[John]

Hi, Tom. We use a lot of SVG for feature images. It cuts down our load time and we don’t care about social sharing on Facebook, etc. This is a website for all the people who live in a particular building.

SVG works great (though I’ve added a little bit of custom CSS) except for the home page masonry grid. You can visit our site and see how the home page looks, or check out the link to the screenshot.

https://s33.postimg.cc/ic12a1ugf/Screenshot_Waterfront_Pearl_PDX_com.png

Any help in correcting this would be great. Thank you so much for all the great features and functions you’ve provided us in GeneratePress!

John

[Tom]

Hey John,

Masonry uses a script called imagesLoaded which re-layouts masonry once all of the images are loaded (to avoid this exact issue).

Unfortunately, it doesn’t look like SVGs are supported: https://github.com/desandro/imagesloaded/issues/212

I’ll see if there’s anything I can do on my end – I’m not super confident though.

[John]

Argh. I’m sorry it’s not an easy one.

Thinking about this, I’ll note that any of my feature images that are raster not SVG, are 800x800px. I wonder if there’s something I could do based on that info that I could use to cause the image area to always be square, and thus push the lower posts in the masonry grid to their rightful positions?

[Tom]

You can do columns only by disabling the masonry option. That will prevent the overlapping issue, but still display your posts in columns.

Let me know if that works 🙂

[John]

It helps partially. Now the fact that the Except contents don’t show up makes the layout look uneven and peculiar. (The posts with text are actually quotes, not standard.)

Excerpts are turned on and set to 20 words.

Using the masonry setting pretty much hid the fact that posts weren’t showing excerpts —and to be honest, I liked how that looked. It gave me some control in this made the quote posts easily noticed. They looked different from the regular articles.

In a standard grid, the quotes will look like a normal post (if the Excerpt starts working). Notice that the “Read more” also isn’t showing, but it’s turned on.

Any more ideas for me? I promise that I will leave you alone soon. 🙂

[Tom]

I’m seeing this custom CSS on your site:

.entry-summary {
    display: none !important;
}

Removing it should make the excerpts appear 🙂

[John]

A-ha! The culprit is the Memphis Documents Library plugin, not my personal custom CSS. It seems that their scope is a bit outside their own space. The interesting thing is that the entry-summary div isn’t hidden on archive pages, just on the main landing page. This differentiation probably gives me something to dig into, even if as a newbie I’m already feeling lost LOL but such is life!

Thank you again for the helpful responses and for your great theme. I’m glad that the excerpts issue isn’t really yours to deal with. Now if only you could influence the imagesLoaded guy to support svg…

Cheers!

[Tom]

I’ll see what I can do! 🙂

[Author]

Posts