CODEWITHSUNDEEP
phphtmlmysqlcsswordpress
SiL3nT
SiL3nT

Reputation: 29

Image size custom css for posts

iam getting 10 posts from category "66" but i want to show the first post with big thumbnail image and the rest of the posts with small thumbnail and mayby some post in the middle with big thumbnail to. I have the code in CSS but i dont know how to specify when i call 10 posts from same category. I dont want to make 2 calls from mysql becouse i want the post order newest to oldest...

Thank you.

        <?php
        global $post;
        $args = array( 'numberposts' => 10, 'order' => 'ASC', 'category' => 66 );
        $myposts = get_posts( $args );
        foreach( $myposts as $post ) :  setup_postdata($post); ?>
            <div id="lajme-bllok-item-vogel">
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('lajmi-thumb'); ?></a>
                <div id="lajme-bllok-item-title-vogel"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                <div id="top-news-title-linku"><?php for( $i=1; $i<=4; $i++){ $prop_det_url = get_field('link'.$i); if( $prop_det_url != '' ){ ?>
                <a href="<?php echo $prop_det_url; ?>" target="_blank">/ <?php the_field('link_titull'.$i); ?></a> <?php } } ?></div>
            </div>

        <?php endforeach; ?>

Upvotes: 0

Views: 65

Answers (2)

Howli
Howli

Reputation: 12469

You can add an if statement around the code and say if it's the first result set the big image, else set the small one. Untested, but should work.

   <?php
    global $post;
    $args = array( 'numberposts' => 10, 'order' => 'ASC', 'category' => 66 );
    $myposts = get_posts( $args );
    $count = 1;
    foreach( $myposts as $post ) :  setup_postdata($post); 
    if($count=1)
    {
    ?>

        <div id="lajme-bllok-item-vogel">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('lajmi-thumb'); ?></a> //Set the big thumbnail there
            <div id="lajme-bllok-item-title-vogel"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
            <div id="top-news-title-linku"><?php for( $i=1; $i<=4; $i++){ $prop_det_url = get_field('link'.$i); if( $prop_det_url != '' ){ ?>
            <a href="<?php echo $prop_det_url; ?>" target="_blank">/ <?php the_field('link_titull'.$i); ?></a> <?php } } ?></div>
        </div>
   <?php 
        $count = 2; 
   } 
   else 
   { 
   ?>

        <div id="lajme-bllok-item-vogel">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('lajmi-thumb'); ?></a> //Set the small thumbnail there
            <div id="lajme-bllok-item-title-vogel"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
            <div id="top-news-title-linku"><?php for( $i=1; $i<=4; $i++){ $prop_det_url = get_field('link'.$i); if( $prop_det_url != '' ){ ?>
            <a href="<?php echo $prop_det_url; ?>" target="_blank">/ <?php the_field('link_titull'.$i); ?></a> <?php } } ?></div>
        </div>
    <?php 
   }
   endforeach; ?>

Upvotes: 0

Matt Fellows
Matt Fellows

Reputation: 6522

One solution: Put the category into the HTML markup as a class name e.g. <div class="category66"> Then generate a css selector for each class using nth-child?

e.g. 

.category66 {
    width: 100px;
    height: 100px;
}


.category66:nth-child(1) {
    width: 200px;
    height: 200px;
}

Upvotes: 1

Related Questions