Hiding featured images via “Additional CSS” in Customizer

  • Resolved perrygruber

    (@perrygruber)


    1 year, 8 months ago

    Greetings lovely people. I just discovered twentyseventeen and it’s awesome. Thanks for the community making this Theme! I’m new at all this coding stuff, so forgive any stupid questions I’m asking.

    My site includes posts with featured images. Twentyseventeen’s “blog posts” page (https://transamorousnetwork.com/blog/) and the individual posts pages (https://transamorousnetwork.com/proof-it-works/trans-and-trans-attracted-people-rave-over-our-advice/) are showing BOTH the featured image AND the image I’ve included in the post (it’s the same image). I’d like to have both the “Blog Posts” page and the individual post pages HIDE the featured images. How do I do that using the customizer’s “Additional CSS” feature? I have almost 400 posts and I’d prefer to not have to go back and remove all the featured images I’ve designated. Thanks so much in advance!

    Also, I notice some answers have included a line of code specifically for displaying or not a featured image on other support pages. Using the Customizer’s “Additional CSS” feature, do I just paste such a line of code in there? Or do I need to find the page of code in twentyseventeen’s code – via the Theme editor –? that the line belongs in, copy and paste that code into the Additional CSS feature, then replace the specific original line with this new line?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter perrygruber

    (@perrygruber)

    I just figured out how to hide the featured image on the individual blog posts using the “Additional CSS” feature. AWESOME! Now, I’m still having difficulty figuring out how to eliminated the double-posting of the images on the blog posts page (https://transamorousnetwork.com/blog/)

    Thread Starter perrygruber

    (@perrygruber)

    Ok, I did some more research in the theme code (I’m not a developer, so really searching in the dark here) and came across code in the “header.php”. I think this is the code forcing the featured image to show up on posts and pages. If this is correct, how can I add this to my additional CSS and what lines need to be changed to get the featured images to NOT show?

    <?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.www.ads-software.com/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since Twenty Seventeen 1.0
 * @version 1.0
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" >

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>

	<header id="masthead" class="site-header">

		<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

		<?php if ( has_nav_menu( 'top' ) ) : ?>
			<div class="navigation-top">
				<div class="wrap">
					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
				</div><!-- .wrap -->
			</div><!-- .navigation-top -->
		<?php endif; ?>

	</header><!-- #masthead -->

	<?php

	/*
	 * If a regular post or page, and not the front page, show the featured image.
	 * Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
	 */
	if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
		echo '<div class="single-featured-image-header">';
		echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
		echo '</div><!-- .single-featured-image-header -->';
	endif;
	?>

	<div class="site-content-contain">
		<div id="content" class="site-content">

    Moderator Kathryn Presner

    (@zoonini)

    Hi @perrygruber – this custom CSS hides the featured image on the blog, category, and archive pages:

    /* Hide featured image on blog, archive, category pages */
.blog .post-thumbnail,
.archive .post-thumbnail,
.category .post-thumbnail {
  display: none;
}

    Let me know if you’re set!

    Thread Starter perrygruber

    (@perrygruber)

    Hey @zoonini (Kathryn),

    Thanks for your reply will try it now.

    Thread Starter perrygruber

    (@perrygruber)

    That did it @zoonini Kathryn! Thanks so much!!!!

    Moderator Kathryn Presner

    (@zoonini)

    Awesome – you’re very welcome! I’ll mark this one as resolved but feel free to start a new thread if you have other questions.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Hiding featured images via “Additional CSS” in Customizer’ is closed to new replies.