WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to Adapt a Super Loop? (4 posts)

  1. fshequin
    Member
    Posted 1 year ago #

    Greetings,

    I have a project where the designer wants me to do the following:

    The concept here is to display posts in rows

    first row 1 post
    second row 2 posts
    third row 3 posts
    fourth row 4 posts
    fifth row 5 posts
    sixth row 6 posts
    seventh row 7 posts

    and onward until all posts have been retrieved

    Then style each row differently as seen here but infinitely smaller, don't ask me why they think this is a good idea...it's very cutting edge stuff and site users will rarely click on the posts that are styled so small that they can't read them, but I can't win that argument and they are paying me to do this...

    the below code is limited and does not do the above how would you adapt to make the below do the above?

    <?php if (have_posts()) : ?>
    <?php
    $count = 0;
    
    ?>
    
    <?php while (have_posts()) : the_post(); ?>
    
    <?php $count++; ?>
    
    <?php if ($count == 1) : ?>
    
    	<div class="style-1"><?php the_content(); ?></div>
    
    <?php elseif ($count == 2 || $count == 3) : ?>
    
    	<div class="style-2"><?php the_content(); ?></div>
    
    <?php elseif ($count == 4 || $count == 5 || $count == 6) : ?>
    
    	<div class="style-3"><?php the_content(); ?></div>
    
    <?php elseif ($count == 7 || $count == 8 || $count == 9 || $count == 10) : ?>
    
    	<div class="style-4"><?php the_content(); ?></div>
    
    <?php elseif ($count == 11 || $count == 12 || $count == 13 || $count == 14 || $count == 15 ) : ?>
    
    	<div class="style-5"><?php the_content(); ?></div>
    
    <?php elseif ($count >= 16 ) : ?>
    
    	<div class="style-6"><?php the_content(); ?></div>
    
    <?php endif; ?>
    
    <?php endwhile; ?>

    Any help is much appreciated!

    Kind Regards,

    Fred Shequine
    EMail Redacted - email support is not offered here
    Please follow the guidelines posted here for posting code - as it is, we cannot be sure if any of your code was eaten by the forum parser

  2. fshequin
    Member
    Posted 1 year ago #

    Follow up:

    I'm pretty sure the solution is in doing an N times FORWHILE loop with IF conditionals that mathematically check for total posts per row and then show the content and add the count number to the content's surrounding div class or id and then write some javascript or jQuery to alter the CSS in the same fashion...but my brain is fried and I can't figure it out....

    Best, Fred

  3. dtrickky
    Member
    Posted 1 year ago #

    Are you able to get the posts to display with unique classes? I think once you can do that, its just simple CSS to make it look like you'd like.

  4. fshequin
    Member
    Posted 1 year ago #

    I solved the problem with some help from Stack Exchange....I was trying to solve as much of the problem without javascript as possible....we figure it out as follows:

    <?php //The first index of the first row is 1?>
    <?php $row = 1;?>
    <?php $curFirstIndex = 0;?>
    
    <?php //start counting items ?>
    <?php $count = 0;?>
    <?php while (have_posts()) : the_post();?>
    
       <?php //create actual html code ?>
       <div class="style-<?php echo $row;?>"><?php the_content(); ?></div>
    
       <?php //check if the next item is equal to the first index of the next row ?>
       <?php if ($count+1 >= ($row + $curFirstIndex)) :
           <?php
             //the next item will be in the new row
             //in $curFirstIndex store the first number of the current row
             $curFirstIndex = $row + $curFirstIndex;
    
             //go to the next row
             $row++;
           ?>
       <?php endif; ?>
       <?php $count++;?>
    
    <?php endwhile;?>

    Thanks for getting back to me!

    Best, Fred

Topic Closed

This topic has been closed to new replies.

About this Topic