tiled galleries no longer displayed in posts

  • flyingdisc · Member ·

    I switched to the “Eris” theme and have observed that tiled galleries in posts are no longer visible?

    A few examples –

    https://perkinsdesigns.com/2019/07/23/glass-from-the-past/

    https://perkinsdesigns.com/2019/07/19/lunch-at-mccloud-mountain-restaurant/

    Only white space where the gallery is supposed to be – however, clicking the mouse in that white space will highlight an image and then the gallery can be seen (for purposes of clicking through, ahead/back)?

    Bug?

    The blog I need help with is: (visible only to logged in users)

  • fstat · Staff ·

    Hi there,

    As you can see from the following screenshot, the galleries load correctly on my end.

    Clear your browser’s cache and try again:

    Solve Common Browser Issues

  • flyingdisc · Member ·

    I’ve tried both Safari & Brave browsers, and I’ve cleared their respective caches.

    Also, I’m not using any extensions with Safari or Brave.

    Still, I’m not seeing the tiled galleries – they remain hidden, though the mouse does recognize the presence of clickable images.

    Clicking on the white space will then reveal individual gallery images, from which I can advance and/or backtrack.

    I was formerly using the themes Onigiri, then Ippo, and tiled galleries did work as expected?

    The tiled/mosiac galleries were input as blocks using the Gutenberg Editor.

    Please advise, TY

  • flyingdisc · Member ·

    Also, the tiled galleries display as expected when editing a post.

    However, when I then click on “Preview” – the images are no longer visible.

  • fstat · Staff ·

    Can you please take a screenshot and upload it to your Media Library so I can have a look? Here’s how to take a screenshot:

    Take a Screenshot

  • flyingdisc · Member ·

    Ok. I’ve uploaded two screenshots – views from both the editor and the preview.

  • justjennifer · Member ·

    Hi all,

    Same for me. perkinsdesigns.com/2019/07/23/glass-from-the-past/ does not load the Gallery in either FF or Chrome latest, also in incognito/private mode. There’s just a large blank vertical space between a bit of text at the beginning and at the end of the post. Caches cleared. (temp screenshot reduced zoom to fit the entire post in)

  • garysixtyeight · Member ·

    Hi there,

    I think can see the problem on the site.

    The gallery is hidden on screens wider than 1281px, but visible on screens narrower than that.

    This is due to a CSS rule that sometimes sets the opacity on the .aligncenter class to 0, which makes it invisible:

    @media only screen and (min-width: 1281px) {
	.single:not(.split-layout) .content-area .aligncenter,
	.listing.content-area .aligncenter,
	.page .content-area .aligncenter {
		max-width: 1100px !important;
		opacity: 0;
	}
}


    @flyingdisc     – as a workaround, please try adding the CSS below to the bottom of the Customizer in in My Sites → Design → Customize → CSS:

    @media only screen and (min-width: 1281px) {
	.single:not(.split-layout) .content-area .aligncenter,
	.listing.content-area .aligncenter,
	.page .content-area .aligncenter {
		opacity: 1;
	}
}

    https://en.support.wordpress.com/custom-design/editing-css/

    If galleries appear when that CSS is added, please check some of the other pages on the site to see if it has had an adverse effect on anything else.

  • justjennifer · Member ·

    Hi @garysixtyeight, Reducing screen size did the trick. 👏


    @fstat     – Here’s a new temp screenshot, again reduced.

    The gallery is hidden on screens wider than 1281px, but visible on screens narrower than that.

    Sounds like an update to the theme’s CSS would be needed to address this, as I believe this has an impact on anyone using the Eris theme with Galleries?

  • flyingdisc · Member ·

    Hi –

    Several times, I entered the provided CSS and published it.

    Every time I closed the Customizer, the CSS was being deleted – except for this:

    opacity: 1;
    }
    }

    This was happening in both Safari & Brave browsers, and the tiled galleries stayed hidden.

    However, once I removed other (earlier) CSS – this:

    #masthead {
    background-color: #fff;

    …(which was originally intended to put a white background behind the top menu), then the entirety of the CSS you provided was being saved accurately, and the tiled galleries now work as expected.

    Thank you!!!

    P.S.: is there some other CSS I could use/add effectively to place a white background behind the top menu?

    Thank you for your time.

  • garysixtyeight · Member ·

    the tiled galleries now work as expected.

    Thank you!!!

    You’re welcome, glad I could help :)

    P.S.: is there some other CSS I could use/add effectively to place a white background behind the top menu?

    For the header, it looks like there’s a missing bracket in the CSS rule that might be causing a problem. To make the header area white, please try placing the CSS below at the bottom of the Customizer:

    #masthead {
	background-color: #ffffff;
}

    Sounds like an update to the theme’s CSS would be needed to address this, as I believe this has an impact on anyone using the Eris theme with Galleries?


    @justjennifer    , @fstat – it looks like that might be the case

  • fstat · Staff ·

    Hi there,

    Thank you both @justjennifer and @garysixtyeight for your input. The issue has already been reported and our developers are working on a fix.

  • flyingdisc · Member ·

    Yes, the header CSS also worked – thanks!

  • garysixtyeight · Member ·

    Yes, the header CSS also worked – thanks!

    You’re welcome, glad I could help :)

  • The topic ‘tiled galleries no longer displayed in posts’ is closed to new replies.