[rekluseParticipant]

Hey guys,

I am having a bit of a weird problem. I have created a special class to hide featured images on certain posts, and it has worked great until today. Now I am seeing some strange behavior, and was hoping you could help.

CONTEXT:
I am using the Ethos theme, with Filterable Index enabled on the blog page:
http://www.everyoneisright.com/media

CODE:
Here is the code I used to set my class, which was placed in Customizer:

.hideFeaturedImage .entry-featured {
    display: none;
}

I then add “hideFeaturedImage” in the Body CSS Class for the post.

PROBLEM:
If the top post on the blog page includes the “hideFeaturedImage” class, it ends up hiding all preview images on the blog page (http://www.everyoneisright.com/media)

CURRENT WORKAROUND:
As soon as I change the date of the post to move it further down the stream, all the preview images return.

So this seems to only be a problem if the very first post in the stream includes the “hideFeaturedImage” class.

I enclosed some screenshots, hopefully they help.

Any idea what might be happening?

[John EzraMember]

Hi there,

Thanks for writing in! Could you try to see if changing your CSS to the following will help?

.hideFeaturedImage {
    display: none;
}

You could also use page/post ids

.postid-12 .entry-featured {
    display: none;
}

Note though you need to match the postid-# or the page-id-# to the correct number of the post or page. You can see this by inspecting the page with dev tools and look in the body classes.

Hope this helps – thanks!

[rekluseParticipant]

Thank you. The first suggestion doesn’t work — in fact it kills the entire media page, all archive pages, and the post page itself (white screen of death).

The second suggestion works just fine, but I was hoping to be able to more easily manage this by simply creating a class so I can set display properties from the post template page. Seems like creating this approach has worked for other users — do you know if anyone else has run into this specific problem?

If so, would this be considered a bug in the theme, since it is only happening if the very first post in a stream possesses that class?

Thanks again for your time!

[RadModerator]

Hi there,

When CSS fail, it will no cause any white screen of death. CSS runs on browsers and not on the server. The script that runs on the server is PHP, and that one can cause the white screen of death. Have you placed the provided CSS on your child theme’s functions.php? That will surely cause that issue. It should be placed on custom CSS.

It’s not a bug, it’s custom CSS which isn’t part of the theme. And it’s a little confusing according to this

PROBLEM:
If the top post on the blog page includes the “hideFeaturedImage” class, it ends up hiding all preview images on the blog page (http://www.everyoneisright.com/media)

Which means, you don’t wish to hide all preview images, and that means, only hide the specific image. The provided CSS will hide the image of the specific post with the ID of 12. Which will, of course, the first post in the stream will only be affected.

Would you mind clarifying all the issues? Or are you referring to featured image in single post versus featured image on index page? If yes, then, it’s simply as this 🙂

.single-post .entry-featured, .single-x-portfolio .entry-featured {
display: none;
}

Thanks!

[rekluseParticipant]

Would you mind clarifying all the issues?

Of course! Sorry if I wasn’t as clear as I should have been.

Basically, what I want to do is create a class which, when used, will hide the featured image inside of a blog post. But I still want the featured image to display on the index pages.

(The reason I want to hide the image is because I will often have a video player in the post that uses the same image, so I don’t want to repeat the image twice.)

So I put this code into the customizer…

.hideFeaturedImage .entry-featured {
    display: none;
}

…which works perfectly! I use the “hideFeaturedImage” class when making a new post, and the featured image doesn’t show up in the post, but DOES show up on the main blog page, and all category pages. Perfect!

EXCEPT, if the post happens to be the very first post listed on the main blog page (http://www.everyoneisright.com/media), all the featured images on that page disappear, for every single post on the page.

But if I edit the date of the post so it is not first on the list, all the images on the index page come back. It’s the weirdest thing. It only happens on the main blog index page (which uses the filterable index layout), not on the category index pages.

Does this explanation help?

I am happy to give my login details if you’d like to test this yourself. All you’d need to do to confirm this behavior is go to http://www.everyoneisright.com/media, edit the top post (“The Soul of Jazz”), input ‘hideFeaturedImage’ into the “Body CSS Class” field, and then return to http://www.everyoneisright.com/media to find all the featured images on the page missing.

[Rue NelModerator]

Hello There,

This could be a bug in the add filter class function in X. To resolve this issue, since you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

// =============================================================================
// Body classes function filter override
// -----------------------------------------------------------------------------
function x_body_class( $output ) {

  $stack                            = x_get_stack();
  $entry_id                         = get_the_ID();

  $is_blog                          = is_home();
  $blog_style_masonry               = x_get_option( 'x_blog_style' ) == 'masonry';
  $post_meta_disabled               = x_get_option( 'x_blog_enable_post_meta' ) == '';

  $is_archive                       = is_archive();
  $archive_style_masonry            = x_get_option( 'x_archive_style' ) == 'masonry';
  $is_shop                          = x_is_shop();

  $is_page                          = is_page();
  $page_title_disabled              = get_post_meta( $entry_id, '_x_entry_disable_page_title', true ) == 'on';

  $is_portfolio                     = is_page_template( 'template-layout-portfolio.php' );
  $portfolio_meta_disabled          = x_get_option( 'x_portfolio_enable_post_meta' ) == '';

  $integrity_design_dark            = x_get_option( 'x_integrity_design' ) == 'dark';
  $icon_blank_sidebar_active        = $stack == 'icon' && get_post_meta( $entry_id, '_x_icon_blank_template_sidebar', true ) == 'Yes'; 
  $ethos_post_slider_blog_active    = $stack == 'ethos' && is_home() && x_get_option( 'x_ethos_post_slider_blog_enable' ) == 1;
  $ethos_post_slider_archive_active = $stack == 'ethos' && ( is_category() || is_tag() ) && x_get_option( 'x_ethos_post_slider_archive_enable' ) == 1;

  

  //
  // Stack.
  //

  $output[] .= 'x-' . $stack;

  if ( $stack == 'integrity' ) {
    if ( $integrity_design_dark ) {
      $output[] .= 'x-integrity-dark';
    } else {
      $output[] .= 'x-integrity-light';
    }
  }

  //
  // Navbar.
  //

  switch ( x_get_navbar_positioning() ) {
    case 'static-top' :
      $output[] .= 'x-navbar-static-active';
      break;
    case 'fixed-top' :
      $output[] .= 'x-navbar-fixed-top-active';
      break;
    case 'fixed-left' :
      $output[] .= 'x-navbar-fixed-left-active';
      break;
    case 'fixed-right' :
      $output[] .= 'x-navbar-fixed-right-active';
      break;
  }

  if ( x_is_one_page_navigation() ) {
    $output[] .= 'x-one-page-navigation-active';
  }

  //
  // Site layout.
  //

  switch ( x_get_site_layout() ) {
    case 'boxed' :
      $output[] .= 'x-boxed-layout-active';
      break;
    case 'full-width' :
      $output[] .= 'x-full-width-layout-active';
      break;
  }

  //
  // Content layout.
  //

  switch ( x_get_content_layout() ) {
    case 'content-sidebar' :
      $output[] .= 'x-content-sidebar-active';
      break;
    case 'sidebar-content' :
      $output[] .= 'x-sidebar-content-active';
      break;
    case 'full-width' :
      $output[] .= 'x-full-width-active';
      break;
  }

  //
  // Blog and posts.
  //

  if ( $is_blog ) {
    if ( $blog_style_masonry ) {
      $output[] .= 'x-masonry-active x-blog-masonry-active';
    } else {
      $output[] .= 'x-blog-standard-active';
    }
  }

  if ( $post_meta_disabled ) {
    $output[] .= 'x-post-meta-disabled';
  }

  //
  // Archives.
  //

  if ( $is_archive && ! $is_shop ) {
    if ( $archive_style_masonry ) {
      $output[] .= 'x-masonry-active x-archive-masonry-active';
    } else {
      $output[] .= 'x-archive-standard-active';
    }
  }

  //
  // Pages.
  //

  if ( $is_page ) {
    if ( $page_title_disabled ) {
      $output[] .= 'x-page-title-disabled';
    }
  }

  //
  // Portfolio.
  //

  if ( $is_portfolio ) {
    $output[] .= 'x-masonry-active x-portfolio-masonry-active';
  }

  if ( $portfolio_meta_disabled ) {
    $output[] .= 'x-portfolio-meta-disabled';
  }

  //
  // Icon.
  //

  if ( $icon_blank_sidebar_active ) {
    $output[] .= 'x-blank-template-sidebar-active';
  }

  //
  // Ethos.
  //

  if ( $ethos_post_slider_blog_active ) {
    $output[] .= 'x-post-slider-blog-active';
  }

  if ( $ethos_post_slider_archive_active ) {
    $output[] .= 'x-post-slider-archive-active';
  }

  //
  // Custom.
  //
  if ( is_singular() ){
    $custom_class = get_post_meta( $entry_id, '_x_entry_body_css_class', true );

    if ( $custom_class != '' ) {
      $output[] .= $custom_class;
    }
  }

  return $output;

}
add_filter( 'body_class', 'x_body_class' );
// =============================================================================

We would loved to know if this has work for you. Thank you.

[rekluseParticipant]

Totally worked! Awesome, thank you.

Question — if this ends up getting addressed in a future update, will I need to remove this code somewhere down the line?

Thanks again!

[Rue NelModerator]

Hello There,

It’s good to know that it works out for you. Yes, if this will be addressed in our future release update, of course you may need to remove this code from your child theme.

Best Regards.

[Author]

Posts