Display latest posts using WP Loop with different size divs

Question

I am trying to replicate the same style as seen in this picture displaying the latest posts. I am aware as to how to recreate it using a WP Loop and having the content sizes all the same. What I want to do is have it so it varies the sizing based on a fixed template. So the layout would be constant but the posts would change based on the latest posts. If I could be pointed in the right direction as to how to achieve this.

As I said I know how to use the loop to recreate the posts using a single layout style. Ideally I don't want to use featured posts.

The loop I am using is:

<?php if ( have_posts() ) : ?>

        <?php /* Limit Number of posts returned to 4 !important */ ?>
        <? $numberOfPost = 4;
            $catId = get_query_var('cat');  
            $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
            query_posts('paged='.$page.'&posts_per_page='.$numberOfPost.'&cat='.$catId); ?>

        <?php while ( have_posts() ) : the_post(); ?>
            <?php
                /* Include the Post-Format-specific template for the content.
                 * If you want to overload this in a child theme then include a file
                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                 */
                get_template_part( '/templates/content-latest', get_post_format() );
            ?>

        <?php endwhile; ?>

    <?php endif; ?>

Answer 1

I'm not too sure I get the question but here goes nothing: What you could do is wrap you posts loop in a PHP counter or jQuery counter to change the style of the first div at every itteration.

<?php if ( have_posts() ) : ?>

    <?php /* Limit Number of posts returned to 4 !important */ ?>
    <? $numberOfPost = 4;
        $catId = get_query_var('cat');  
        $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
        query_posts('paged='.$page.'&posts_per_page='.$numberOfPost.'&cat='.$catId); ?>

    <?php $i = 1; while ( have_posts() ) : the_post(); ?>
        <?php
            /* Include the Post-Format-specific template for the content.
             * If you want to overload this in a child theme then include a file
             * called content-___.php (where ___ is the Post Format name) and that will be used instead.
             */
            if( $i == 1 ){
                get_template_part( '/templates/content-latest', get_post_format() );
            } else {
               **// your other template file.**
            }
        ?>

    <?php $i++; endwhile; ?>

<?php endif; ?>

Answer 2

Use add_image_size to specify what dimensions your images will have. WordPress resizes them on upload, so you may need to use the Regenerate Thumbnails plugin if you already uploaded the images into WordPress.

Then, depending where you are in the WP Loop, you can get the images of the post while specifying what size you want them to be.

Answer 3

I don't know if it helps you, but I had kind of the same problem erlier. This was what was answered:

3 random images from custom post type, each in a div with a diffrent class

s_ha_dum made an array of classes in this topic (wich you can style diffrently in css) and the loop would also run through the classes.

this code pruduces random images but ofcourse you can change that by changing 'orderby' => 'rand'

Hope it helps