0

I am trying to display the posts with their featured image. On the top of the featured image I would like to put the title of the post in the following way: EXAMPLE

So far I am doing the following:

<article>

    <?php // Display blog posts on any page @ https://m0n.co/l
    $temp = $wp_query; $wp_query= null;
    $wp_query = new WP_Query(); $wp_query->query('posts_per_page=5' . '&paged='.$paged);
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
    <?php
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail( 'full' );
    }
   ?>

    <h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>

    <?php endwhile; ?>

    <?php if ($paged > 1) { ?>

    <nav id="nav-posts">
        <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
        <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
    </nav>

    <?php } else { ?>

    <nav id="nav-posts">
        <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
    </nav>

    <?php } ?>

    <?php wp_reset_postdata(); ?>

I am printing the posts, titles and featured images. I can style them like on the picture, but how to put the title on the top of the image?

1

Think this should do it... (there are hundreds of ways to achieve this)

<?php // Display blog posts on any page @ https://m0n.co/l
   $temp = $wp_query; $wp_query= null;
   $wp_query = new WP_Query(); $wp_query->query('posts_per_page=5' . '&paged='.$paged);
   while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
   <?php
   if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.?>
     <div class="post-item" style="background-image: url('<?php echo the_post_thumbnail( 'full' ); ?>')">
       <div class="heading-inner">
         <h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
       </div>
     </dvi>

   }
  ?>


   <?php the_excerpt(); ?>

   <?php endwhile; ?>

   <?php if ($paged > 1) { ?>

   <nav id="nav-posts">
       <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
       <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
   </nav>

   <?php } else { ?>

   <nav id="nav-posts">
       <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
   </nav>

   <?php } ?>

   <?php wp_reset_postdata(); ?>

   <style>
    .post-item {
      position: relative;
      background-repeat: no-repeat;
      background-size:cover;
      background-position: 50% 50%;
      height: 200px;
      width: 200px;
    }
    .heading-inner {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }

   </style>

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.