[Resolved] SVG feature images overlaid in masonry grid

Home Forums Support [Resolved] SVG feature images overlaid in masonry grid

Home Forums Support SVG feature images overlaid in masonry grid

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #611847
    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.

    Screenshot_Waterfront_Pearl_PDX_com

    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

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #611878
    Tom
    Lead Developer
    Lead Developer

    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.

    #612315
    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?

    #612491
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #612889
    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.)

    Screenshot_Waterfront_Pearl_PDX_com

    Excerpts are turned on and set to 20 words.

    Excerpts_are_on

    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. ๐Ÿ™‚

    #613076
    Tom
    Lead Developer
    Lead Developer

    I’m seeing this custom CSS on your site:

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

    Removing it should make the excerpts appear ๐Ÿ™‚

    #613635
    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!

    #613876
    Tom
    Lead Developer
    Lead Developer

    I’ll see what I can do! ๐Ÿ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.