How to create 6 thumbnail for recent post ?

  • Resolved v123shine

    (@v123shine)


    9 years, 11 months ago

    Good day,

    Currently I making a theme for I submit to WordPress theme. But I have a little problem.

    My question is: How to create 2 big thumbnail with 4 small thumbnail for recent post ?? Example: https://i.imgur.com/ZTmbQ5D.png

    Note: I know very well about css.

    I’m using this code:

    <!--<recent post>-->
		<?php if ( have_posts() ) : ?>
		<?php while (have_posts()) : the_post(); ?>

				<?php if (has_post_thumbnail()) { ?>
					<div class="thumb_image">
						<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
							<img class="fadein" src="<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,'full', true); echo $image_url[0]; ?>">
						</a>
					</div>
				<?php } ?>

					<h1 class="title">
						<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php echo get_the_title(); ?></a>
					</h1>

					<div class="description">
						<?php the_content(''); ?>
					</div>

					<div class="read_more">
					<span><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php _e('Continue Reading', 'translate'); ?></a></span>
					</div>

					<div class="blog_items">
						<?php the_time('F j, Y') ?>
					</div>
		<?php endwhile; ?>
		<?php else : ?>
		<?php endif; ?>
		<!--</recent post>-->

    Can someone help me, please!

Viewing 5 replies - 1 through 5 (of 5 total)

  • I think you would better wrap each post item with div or article tag.

    <?php while (have_posts()) : the_post(); ?>
<div class="featured-post">
// Your code here
</div>
<?php endwhile; ?>

    You can then use .featured-post:nth-of-type(n+3) for small ones, though it depends on your design/layout.

    Thread Starter v123shine

    (@v123shine)

    Thanks Ikaring. Yes, I know it, I will wrap each post in div.

    Maybe my question not clear. Okay i will try to re-explain.
    I want to display different the_post_thumbnail size in recent post. This is what i want: 2 big thumbnail and 4 small thumbnail. How can I do that?

    I know that is possible. I hope someone can help me.

    Many thanks,

    I thought you want to achieve only with css.

    How about this.

    In functions.php:

    function is_first_two_posts(){
	global $wp_query;
	return ( $wp_query->current_post === 0 || $wp_query->current_post === 1 );
}

    And template:

    <?php if ( have_posts()) : ?>
	<?php while ( have_posts()) : the_post(); ?>
		<div class="<?php if (is_first_two_posts()) { echo 'big-thumb'; } ?>">
		// Your code here
		</div>
	<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

    Sorry, you need different size for thumbnails.

    <?php if ( have_posts()) : ?>
	<?php while ( have_posts()) : the_post(); ?>
		<div>
		<?php if (is_first_two_posts()) {
			// for big thumbnails
		} else {
			// for small thumbnails
		}
		?>
		</div>
	<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
    Thread Starter v123shine

    (@v123shine)

    Thank you so much ikaring. Problem solved ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to create 6 thumbnail for recent post ?’ is closed to new replies.