Hide section if there is no featured image

3 Views

I made a custom template for the team I’m working on. I used this code for the template (along with the parts that get the header and footer ofc)

Read More
<div class="main-container">
	<a href="#" id="top" class="in-page-link"></a>

<?php 
	the_post();
	
	$thumbnail = has_post_thumbnail();
	
?>

	<section class="section-header overlay preserve3d">
		
		<div class="background-image-holder parallax-background">
			<?php the_post_thumbnail('full', array('class' => 'background-image')); ?>
		</div>
		
	</section>

	<section>
		<div class="container">
			<div class="row">
			
				<div class="col-lg-12">
					<div class="article-body">
						<?php
							if(!( $thumbnail ))
								the_title('<h1>','</h1>');
								
							the_content();
							wp_link_pages();
						?>
					</div><!--end of article snippet-->
				</div>
				
				
			</div>
		</div>
	</section>

But if there’s no featured image, a gray box will appear. I’d rather just have the whole section be hidden if there is no featured image, because it will look much better.

I’m a php rookie so I have no idea how to do this. What I think I need to do: Have an if/else statement check for the featured image. If there is no image, add a class to said section and define ‘display none’ in my css file for that class.

So this is the code I tried to pair with that, but it did not work: 

<?php
// Must be inside a loop.

if ( has_post_thumbnail() ) {
	the_post_thumbnail();
}
else {
	$("section:first").addClass("noshow");
}
?>

Is this code incorrect? Where do I need to place this in my document for it to work?

Post Views: 3

Related posts

1 comment

  1. While PHP is executed on the server, jquery is executed on the user end. You could always echo that jquery statement and that way it would be sent to the user.

    You could follow the path Martin E. said on his comment (which in my opinion is a much cleaner version) or you could pursue the way you were working on by adding jquery on your header if you haven’t and trying something like this:

    <?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}
else {
    echo '<script>$("section:first").addClass("noshow");</script>';
}
?>

Comments are closed.