Twenty Seventeen Theme – Video Header Causes Images to Disappear

  • atomicfilms1 · Member ·

    I’ve recently created site using the Twenty Seventeen theme specifically because I was in need of a way to prominently display video in a header, but I’ve run into an issue that can’t seem to fix and can’t find any info on.

    For some reason, if I simply leave the header as an image then all of the other images in four sections I’ve created show up just like they’re supposed to. However, when the header is changed to video, the featured images in the last three sections simply don’t appear. The text box will be visible, but there is simply a blank space where the featured image would normally display. For whatever reason this issue doesn’t seem to impact the first section. The featured image there shows up just fine even when the heading is set to a video.

    I feel like there must be something silly I’ve missed here. Why would having a video in the header have any impact on the sections below, and why wouldn’t it impact every section in the same way?

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

  • staff-zinnia · Staff ·

    Hi –

    Thanks for getting in touch. I’ve had a look at the site and can see what you have described about the page featured images being left blank with the video header enabled. It shouldn’t happen, and I am going to try and figure out why.

    First, can you see about these 2 items.

    1. Make sure your featured images are sized to the specs mentioned in the theme setup instructions:
    https://wordpress.com/theme/twentyseventeen
    Scroll all the way to the bottom of the page.

    2. Remove the featured images, clear your browser cache, add them, click save, check the site again.

    Come back to me here if that doesn’t make any difference.

  • atomicfilms1 · Member ·

    Thanks for your help. I’ve tried clearing my cache and editing the photos down to the exact size specifications listed, but it still seems to be having the same issue.

  • eskins · Member ·

    Hi, I’m using the theme for my son’s band site – http://gardenback.co.uk/ We have noticed a similar issue with the feature images for the sections (not the header or static one) as they are not showing at desktop size in Chrome. It’s OK mobile size, OK on Safari and Firefox.

    We’ve always had a video header and this has not happened before.

    Richard

  • staff-zinnia · Staff ·

    atomicfilms1 – thanks for giving that a try. I was hopeful that there might be an easy solution. In any case, I’m going to work on this a bit later today. I’ll try and replicate what you and eskins are experiencing and then file a bug report with our developers if needed. Hang tight.

  • staff-zinnia · Staff ·

    Alright, I’m back.

    Can you take a look at your sites in Firefox web browser with an active video in the header space? It should work in that browser based on what I’ve found.

    I am reporting this to our theme team so they can take a closer look.

  • eskins · Member ·

    Yep, Firefox and Safari are fine (on a Mac). It’s just Chrome (Mac?) at full size, squash the viewport down to mobile and it’s fine.

  • kokkieh · Staff ·

    Thanks for confirming. The problem has been reported to our theme developers. We will let you know what they say.

  • eskins · Member ·

    Thanks folks.

  • fstat · Staff ·

    You’re welcome! We’ll reply here when we here back from our developers.

  • eskins · Member ·

    Just to say that we’ve removed the video (YouTube link) at the top of the theme and the feature image problem still persists at desktop on Chrome (Mac). http://gardenback.co.uk/

  • kokkieh · Staff ·

    I’ve confirmed in Chrome. I’ll update the bug report with this information, thanks!

  • spencerevison · Member ·

    Adding this custom CSS worked for me:

    .twentyseventeen-panel {
	transform: translateZ(1px);
}
  • eskins · Member ·

    Yep, that custom CSS has worked on gardenback.co.uk

    Thanks, that helps until the theme is fixed.

    Regards, Richard

  • laurelfulford · Staff ·

    Hi @atomicfilms1 – thanks for the report! We’ve added a temporary work around to fix the issue on WordPress.com until it is updated in the self-hosted version of WordPress. The images on your site should now be displaying as expected.

    Hi @eskins – I’m glad the CSS workaround suggested above works on your site (thanks @spencerevison)! It looks like http://gardenback.co.uk/ is self-hosted; the issue will not be fixed in the self-hosted version of Twenty Seventeen until it’s fixed in WordPress Core.

    If you’re interested in following the progress there, the related issue is here: https://core.trac.wordpress.org/ticket/44479. A fix has been suggested, but it will need a full review before it is added to that version of the theme. In the meantime, the CSS you have in place will do the trick!

    Just let us know if you have any questions at all about the above!

  • The topic ‘Twenty Seventeen Theme – Video Header Causes Images to Disappear’ is closed to new replies.