CODEWITHSUNDEEP
phpcsswordpressblogscustom-post-type
Shaun Taylor
Shaun Taylor

Reputation: 972

Custom Post Type Display Thumbnail - WordPress

Would anyone know why my list of 'events' is displaying like this:

enter image description here

Instead of this:

enter image description here

So the question would be; How can I make a list of custom posts types display as a list, one after the other no matter the size of the image? It's currently trying to display as columns in rows I think - I have tried to remove the block in the code below that says: $portfolio_count % 4 == 0 - but this just breaks it...

Here's my Loop: 

        <?php
        $args = array( 
          'post_type' => 'events'
        );
        $the_query = new WP_Query( $args );

        ?>

        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> 

        <div class="events-index">
          <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'event-thumb' ); ?></a>
          <a href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
          <h4><?php the_field('date_of_event'); ?></h4>
          <p><?php the_field('location'); ?></p>
        </div>

        <?php $portfolio_count = $the_query->current_post + 1; ?>
        <?php if ( $portfolio_count % 4 == 0): ?>

        <?php endif; ?>

        <?php endwhile; endif; ?>

Here is the CSS: 

.events-index {
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
  padding-bottom: 15px;
}

.events-index img {
  float: left;
  margin:0 25px 20px 0;
}

.events-index  h4 {
  margin:0 0 20px 0;
}

.events-index h4 {
  margin:0 0 20px 0;
}

.events-index p {
  color:#163a52;
  font-style: italic;
  margin: 10px 0 10px 0;
}

.events-index h4 {
  color:#163a52;
  margin-bottom: 0;
}

And I currently have this in the functions.php file: 

add_image_size( 'event-thumb', 250, 150, true ); // Hard Crop Mode

Upvotes: 1

Views: 1781

Answers (1)

Den Isahac
Den Isahac

Reputation: 1525

That is because of img being floated to the left. Add the CSS block below, after the .events-index block.

.events-index::after {
  content: '.';
  display: block;
  color: transparent;
  clear: both;
}

Upvotes: 1

Related Questions