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.

New contributor
Zerojjc is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • 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
  • Thank you @mrben522 – Zerojjc Mar 14 at 18:51
  • @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
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

Zerojjc is a new contributor. Be nice, and check out our Code of Conduct.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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