display news with pictures 3 small and one large (loop)

Question

I'm trying to put 4 news with pictures 3 small and one large, have gotten displaying them but the "large" is repeated with the last "small"

<?php
    $b=1; 
    $args = array(
        'tax_query' => array(
            array(
                'taxonomy' => 'gens', 
                'field' => 'slug', 
                'terms' => 'newsgen' 
            )
        ),
        'post_type'=>'',    //add your post type name 
        'posts_per_page' => 4, 
        'orderby' => 'asc', 
    );
        query_posts($args);
        while ( have_posts() ) : the_post(); 
    ?>

    <?php 
    if($b%4==1 && $b==1) : ?>
    <div id="news-big">
    <?php
    $image_url = catch_that_image();
    $image = thumb($image_url, 209, 97);
    ?>
    <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $image['url']; ?>"/></a>
    </div>
    <?php endif; ?>
    <a href="<?php the_permalink(); ?>"><div class="news-small">
    <div class="container-small">
    <?php
    $image_url = catch_that_image();
    $image = thumb($image_url, 136, 75);
    ?>
    <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $image['url']; ?>"/></a>
    </div>
    <!-- End Thumb Container -->

    <?php
        $b++;   
        endwhile; 
        wp_reset_query();
    ?>

Answer 1

I don't know why have you put $b%4==1 condition.

You can simply check for $b==1.And one more thing I would suggest is to use if and else both.So code would be something like this:

 <?php
    $b=1; 
    $args = array(
        'tax_query' => array(
            array(
                'taxonomy' => 'gens', 
                'field' => 'slug', 
                'terms' => 'newsgen' 
            )
        ),
        'post_type'=>'',    //add your post type name 
        'posts_per_page' => 4, 
        'orderby' => 'asc', 
    );
        query_posts($args);
        while ( have_posts() ) : the_post(); 
    ?>

    <?php 
        if($b==1) : //change in condition
    ?> 
        <div id="news-big">
        <?php
        $image_url = catch_that_image();
        $image = thumb($image_url, 209, 97);
        ?>
        <a href="<?php the_permalink(); ?>">
        <img src="<?php echo $image['url']; ?>"/></a>
        </div>
    else: //else is added here
        <a href="<?php the_permalink(); ?>"><div class="news-small">
        <div class="container-small">
        <?php
        $image_url = catch_that_image();
        $image = thumb($image_url, 136, 75);
        ?>
        <a href="<?php the_permalink(); ?>">
        <img src="<?php echo $image['url']; ?>"/></a>
        </div>
        <!-- End Thumb Container -->
        </div>
        <!-- End of news-small div -->  
    <?php endif; ?>
    <?php
        $b++;   
        endwhile; 
        wp_reset_query();
?>

Try above and let me know the output.

Answer 2

I guess you have 4 different news, you want display first news use large image of each page and the news of large image is different others, right? If you right, the following code, maybe work for you.

<?php
$b=1; 
$args = array(
    'tax_query' => array(
        array(
            'taxonomy' => 'gens', 
            'field' => 'slug', 
            'terms' => 'newsgen' 
        )
    ),
    'post_type'=>'',    //add your post type name 
    'posts_per_page' => 4, 
    'orderby' => 'asc', 
);
    query_posts($args);
    while ( have_posts() ) : the_post(); 
?>

<?php 
if($b==1) : ?> //change here
<div id="news-big">
<?php
$image_url = catch_that_image();
$image = thumb($image_url, 209, 97);
?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $image['url']; ?>"/></a>
</div>
<?php else: ?>  //change here
<a href="<?php the_permalink(); ?>"><div class="news-small">
<div class="container-small">
<?php
$image_url = catch_that_image();
$image = thumb($image_url, 136, 75);
?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $image['url']; ?>"/></a>
</div>
<!-- End Thumb Container -->

<?php
    endif; //add code
    $b++;   
    endwhile; 
    wp_reset_query();
?>