[Resolved] Related posts Featured Image

[Lucas]

Hello i’m building a related post section for my blog.

I needed an specific design for it. So i coded the whole thing.

Here’s my code:

			<div class="container mt-5 pt-5">

			<style type="text/css" >
				.equal {
				  display: flex;
				  display: -webkit-flex;
				  flex-wrap: wrap;
					}

			</style>
				<?php
					$tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
					$args = [
					    'post__not_in'        => array( get_queried_object_id() ),
					    'posts_per_page'      => 3,
					    'ignore_sticky_posts' => 1,
					    'orderby'             => 'rand',
					    'tax_query' => [
					        [
					            'taxonomy' => 'post_tag',
					            'terms'    => $tags
					        ]
					    ]
					];
					$my_query = new wp_query( $args );
					if( $my_query->have_posts() ) {

					    ?>
					    <div class="container">
					    	<div class="row">
					    		<div class="col-sm-3 equal ">
					    			<img src="https://dev.mastermeup.com/wp-content/uploads/2018/08/RELATED-OK.png" alt="" class="mx-auto">
					    		</div>
					    		<?php
					        while( $my_query->have_posts() ) {
					            $my_query->the_post(); ?>

					            <div class="col-sm-3 equal">
									<div class="card" style="width: 20rem;">

									

									  <div class="card-block">
									    <h4 class="card-title"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>" rel="nofollow"><?php the_title(); ?></a></h4>
									    <p class="card-text"><?php  echo '<p class="mb-0">' . get_excerpt() . '</p>' ;?></p>									  
									  </div>
									</div>
					            </div>
					        <?php }
					        wp_reset_postdata(); ?>					    		
					    		
					    	</div>
					    </div>

					<?php
					}
					?> 
			</div>

Everything is ok, but i cant find a way of displaying the featured image of the post.

Can you help me with this?
Thanks in advance

GP Premium 1.7.1

[Tom]

I think you’re looking for this function: the_post_thumbnail()

You’d need to use it within the loop 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lucas]

Hello again. I’ve another question about this.

So i want to display this section of related posts only on my single-post. I’m using a custom field (True/false) to switch between Related posts or Ad Banner here’s my code:

<?php if ( get_field( 'mostrar_related_posts' ) == 1 ) { ?> <!--  IF TRUE THEN DISPLAY THE RELATED POST LIST    -->
			<style type="text/css" >
				.equal {
				  display: flex;
				  display: -webkit-flex;
				  flex-wrap: wrap;
					}

			</style>
				<?php
					$tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
					$args = [
					    'post__not_in'        => array( get_queried_object_id() ),
					    'posts_per_page'      => 3,
					    'ignore_sticky_posts' => 1,
					    'orderby'             => 'rand',
					    'tax_query' => [
					        [
					            'taxonomy' => 'post_tag',
					            'terms'    => $tags
					        ]
					    ]
					];
					$my_query = new wp_query( $args );
					if( $my_query->have_posts() ) {

					    ?>
					    <div class="container">
					    	<div class="row card-deck">
					    		<div class="col-sm-2 equal ">
					    			<img src="https://dev.mastermeup.com/wp-content/uploads/2018/08/RELATED-OK.png" alt="" class="mx-auto">
					    		</div>
					    		<?php
					        while( $my_query->have_posts() ) {
					            $my_query->the_post(); ?>

					            <div class="col-sm equal py-1" style="border-radius:0px!important;">
									<div id="related-box" class="card " >

									<a href="<?php the_permalink() ?>" class="text-center"  title=""><?php the_post_thumbnail('post-thumbnail', ['class' => 'card-img-top pt-3 pl-3 pr-3 pb-0 related-img', 'title' => 'Feature image']); ?></a>

									  <div class="card-block">
									    <h4 class="card-title"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>" rel="nofollow"><?php the_title(); ?></a></h4>
									    <p class="card-text"><?php  echo '<p class="mb-0 related-exerpt">' . get_excerpt() . '</p>' ;?></p>									  
									  </div>
									</div>
					            </div>
					        <?php }
					        wp_reset_postdata(); ?>					    		
					    		
					    	</div>
					    </div>

					<?php
					}
					?> 
				<?php	} else { 
				 // echo 'false'; 
				} ?>  <!--  END OF THE CONDITION FOR DISPLAYING RELATED POST    -->

Could i put this extract of code in a hook? Before footer Hook . And show it only in the single post?

I guess maybe using a conditional tag of wordpress. Like is_single() ?
But when i use is_single for example to ad a section to my single post it doesnt work.
Should i use another conditional tag? What am i doing wrong?

Thanks in advance.
Best Regards

[Lucas]

Nevermind i’ve already figured it out.

I’m using the new feature Elements. And put the section in a before footer hook.

Thanks!

[Leo]

Hooks Elements is definitely the way to go.

Glad you’ve figured out 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts