0

I can't seem to get this right. I am trying to load in the 6 most recent blog posts (2 rows, 3 columns, responsive). The post title would appear on top of the thumbnail image. Here is the design example (screenshot): https://i.imgur.com/3WQHB8O.png

My original try was doing this:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="containPost">
    <img src="<?php the_post_thumbnail(); ?>" style="width:100%;">
    <div class="bottom-left">
        <?php the_title(); ?>
    </div>
</div>
<?php endwhile; else: ?>
<?php endif; ?>
<div class="clear"></div>

Which I've used similarly on a different site, but never on the homepage. While i was researching why this code wasn't grabbing the title and thumbnail from the posts but rather from the homepage i discovered the info below.

I found an answer here that I felt was similar and tried it, but it's not working correctly and I am not sure how to fix it:

<!-- Blog Post: 6 Newest -->
<?php
$args = array(
    'post_type'         => 'post',
    'posts_per_page'    => 6
);
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {?>
    <div class="containPost" id="response">
        <?php 
        if ( has_post_thumbnail()) { 
            echo '<img src="'.the_post_thumbnail();' />';
        } else { 
            echo '<img src="'.get_bloginfo('stylesheet_directory').'/images/global/thumby.jpg" />';
        } ?>

        <div class="bottom-left">
            <?php
                $the_query->the_post();
                echo '<h3>' . get_the_title() . '</h3>';
            ?>
        </div>
    </div>
<?php  
    }
}
/* Restore original Post Data */
wp_reset_postdata();
?>
<div class="clear"></div>

This is how the second code ends up looking, where the post titles are not on the correct images and everything looks messed up: https://i.imgur.com/6KgKBQi.png

If anyone could help me I would greatly appreciate it.

  • 2
    You need to move your $the_query->the_post(); call up above <div class="containPost" id="response"> – mrben522 Mar 14 at 17:10
  • 1
    the_post_thumbnail() displays the whole thumbnail <img> tag, so it should not be inside the src attribute. – Max Yudin Mar 14 at 18:41
  • @MaxYudin: I do see there is still an issue with the_post_thumbnail() but I am unsure what you mean? i.imgur.com/vKfUQVx.png – Zerojjc Mar 14 at 18:52
  • Instead of echo '<img src="'.the_post_thumbnail().' />'; use just the_post_thumbnail();. See the Code Reference. Also turn on debugging, because you have PHP syntax errors there and know nothing about them. – Max Yudin Mar 14 at 19:10
  • Thanks @MaxYudin. I now realize that I had the_post_thumbnail() done correctly on a different project, but somehow i confused myself when doing this one. I appreciate your response. – Zerojjc Mar 14 at 20:23
0

As @mrben522 suggestion (in a comment to question), the resulting code should be

<!-- Blog Post: 6 Newest -->
<?php
$args = array(
    'post_type'         => 'post',
    'posts_per_page'    => 6
);
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
       $the_query->the_post();   // put it here

    ?>
    <div class="containPost" id="response">
        <?php 
        if ( has_post_thumbnail()) { 
            echo '<img src="'.the_post_thumbnail();' />';
        } else { 
            echo '<img src="'.get_bloginfo('stylesheet_directory').'/images/global/thumby.jpg" />';
        } ?>

        <div class="bottom-left">
            <?php
                //$the_query->the_post();
                echo '<h3>' . get_the_title() . '</h3>';
            ?>
        </div>
    </div>
<?php  
    }
}
/* Restore original Post Data */
wp_reset_postdata();
?>
<div class="clear"></div>
  • 1
    Thank you @QaisarFeroz for showing me visually, this helped. – Zerojjc Mar 14 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.