keep featured image from showing at top of posts

• 

  pearyplace · Member · Nov 19, 2015 at 6:01 pm

  • Copy link
  • Add topic to favorites

  I’m using the Cubic theme on WordPress.com, and I want to stop the featured image from showing at the top of each post. I need to set featured images for each post because otherwise the collage of square photos on the home page turns out wrong. But doing so really messes up the look of the posts themselves.

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

• 

  timethief · Member · Nov 19, 2015 at 6:03 pm

  • Copy link

  If you do not set a featured image then what happens? This is what is stated on the theme’s detailed description page:

  If featured image isn’t set, display colored block on blog page: If your post doesn’t have a featured image but does include images, Cubic will display the first image attached to the post. If you prefer only featured images to be displayed, check the box. https://wordpress.com/themes/cubic/

• 

  pearyplace · Member · Nov 19, 2015 at 6:09 pm

  • Copy link

  Yes, the problem with letting it default to the first image, is that if the first image is in landscape format, it adds black bands above and below it when it shows the image on the home page, which looks awful. (This is a bit difficult to describe, but at any rate, trust me when I say there’s a reason for setting a featured image.)

• 

  timethief · Member · Nov 19, 2015 at 6:12 pm

  • Copy link

  I’m apologizing for not noticing this thread was in the CSS Forum (I don’t provide CSS help). I also did not notice it was a duplicate. Please wait in the other thread https://en.forums.wordpress.com/topic/keep-featured-image-from-showing-at-top-of-posts-1?replies=1#post-2501535 for another Volunteer or Staff to respond.

• 

  thesacredpath · Member · Nov 20, 2015 at 12:31 am

  • Copy link

  @pearyplace, give the following a try. I included a background color declaration in case you wish to change the color of the black horizontal band.

  body.page .entry-thumbnail, body.single .entry-thumbnail {
      background: #000 !important;
      height: 150px !important;
  }

• 

  pearyplace · Member · Nov 21, 2015 at 5:17 am

  • Copy link

  Sorry, I accidentally posted the same question twice.

  @thesacredpath — i tried the suggested CSS: it changed things a bit, but didn’t really work. if you have a moment, take a look at the site (pearyplace.org).

  Someone named @Kathryn who works at WordPress said that it’s possible to do what I’m trying to do; unfortunately she didn’t explain how. (See https://wordpress.org/support/topic/keep-featured-images-from-showing-on-posts.)

• 

  thesacredpath · Member · Nov 21, 2015 at 5:52 am

  • Copy link

  Whoops, not sure why that worked for me when I worked it out the first time. Delete what I had given above and add the following instead.

  body.page .entry-thumbnail, body.single .entry-thumbnail img {
      display: none;
  }
  body.page .entry-thumbnail, body.single .entry-thumbnail {
      height: 120px !important;
  }

• 

  pearyplace · Member · Nov 21, 2015 at 6:16 am

  • Copy link

  That works better than the previous version but still has some quirks. It leaves a black band at the top of the page, and, especially when viewed in Safari, cuts off the top of the title.

• 

  thesacredpath · Member · Nov 21, 2015 at 7:12 am

  • Copy link

  In Safari, if I narrow and then widen my browser window, the title hides momentarily but then comes back. That is likely an issue with transition timing from one CSS rule to another. I see the same behavior in Firefox and Chrome. Few will narrow and widen their browser windows while viewing the posts, at least that is my feeling.

  We can get rid of the black band if you wish and turn the text black with the following.

  body:not(.filter-on) .hentry.has-post-thumbnail .entry-header {
      background-color: #fff;
  }
  body:not(.filter-on) .hentry.has-post-thumbnail .entry-header .entry-title {
      color: #000;
  }

• 

  pearyplace · Member · Nov 25, 2015 at 8:35 pm

  • Copy link

  I wasn’t sure if you were telling me to add the code above to the previous code snippets, or to delete the previous code snippets and substitute the code above. At any rate, I tried it both ways and it didn’t work correctly either way.

• 

  pearyplace · Member · Nov 25, 2015 at 8:36 pm

  • Copy link

  Others may have solved this problem in the past – https://wordpress.org/support/topic/remove-featured-image-from-appearing-inside-post

  However, there’s a lot of discussion there, and it’s not clear which suggestion is correct.

• 

  thesacredpath · Member · Nov 26, 2015 at 7:15 am

  • Copy link

  @pearyplace, the solution you reference is for a self-hosted WordPress installation, and those are different from here at WordPress.com. They are talking about changing php scripting in the theme files, and we cannot edit those at WordPress.com.

  Sorry, I seemed to have missed copying and pasting one rule. Add the following to what you already have in your custom CSS.

• 

  pearyplace · Member · Nov 26, 2015 at 5:46 pm

  • Copy link

  Thanks, but add the following what?

• 

  thesacredpath · Member · Nov 28, 2015 at 12:20 am

  • Copy link

  Sheesh, sorry again. This should be what is included in your custom CSS to get rid of the featured image and set the background color on the band to white.

  body.page .entry-thumbnail, body.single .entry-thumbnail img {
      display: none;
  }
  body.page .entry-thumbnail, body.single .entry-thumbnail {
      height: 120px !important;
      background-color: #fff;
  }
  body:not(.filter-on) .hentry.has-post-thumbnail .entry-header {
      background-color: #fff;
  }
  body:not(.filter-on) .hentry.has-post-thumbnail .entry-header .entry-title {
      color: #000;
  }