WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Loop post placement help (7 posts)

  1. allenc
    Member
    Posted 1 year ago #

    Blah ok I took a crack at this but need a little help....

    I have a page built that displays a gallery type menu 4 abreast... but it uses a specific css set and grid to achieve my desired lay out... looks like `<a name="cupcakes">

    <div class="box box-2">
            <div class="gallery-box-top"></div>
            <div class="gallery-box">
              <img src="images/cupcakes-small.jpg" width="207" height="156" alt="">
              <h6 class="m500">Red Velvet</h6>
              <p class="m500">Classic red velvet cake with chocolate chips baked in, cream cheese icing & topped with a chocolate heart</p>
            </div>
            <div class="gallery-box-bottom"></div>
          </div>
        </a>
    
         <div class="box">
          <div class="gallery-box-top"></div>
          <div class="gallery-box">
            <img src="images/cupcakes-small-1.jpg" width="207" height="156" alt="">
            <h6 class="m500">OreOhh</h6>
            <p class="m500">White cake with crushed cookies & a cookie crust, cookies & cream cream cheese icing topped with a mini cookie- Ohh yeah!</p>
          </div>
          <div class="gallery-box-bottom"></div>
        </div>...
    The code duplicates the 2 divs again and then closes the "gallery-box" div... then

    <div class="box box-2"> opens a new div that lines the items up just so right below the original line.

    I need to make it dynamic so post can feed into the same structure

    some thing like

    <?php query_posts('cat=5&posts_per_page=-1'); ?>
    <a name="cupcakes">
          <div class="box box-2">
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
            <div class="gallery-box-top"></div>
            <div class="gallery-box">
             //the post thumbnail <img src="images/cupcakes-small.jpg" width="207" height="156" alt="">
             //the post title <h6 class="m500">Red Velvet</h6>
             //the content <p class="m500">Classic red velvet cake with chocolate chips baked in, cream cheese icing & topped with a chocolate heart</p>
            </div>
            <div class="gallery-box-bottom"></div>
    <?php endwhile; ?>
          </div>
        </a>

    I know how to call all the data but not how to separate it to the different div classes to position it. Need it to be easy for users to post more and it update without to many changes....

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. Or better still - use the pastebin. As it stands, your code has now been permanently damaged/corrupted by the forum's parser.]

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    you can utilize the variable $wp_query->current_post to position the div;

    example:

    <?php query_posts('cat=5&posts_per_page=-1'); ?>
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    
          <?php if( $wp_query->current_post%4 == 0 ) echo '<div class="box box-2">'; ?>
    
            <div class="gallery-box-top"></div>
            <div class="gallery-box">
             //the post thumbnail <img src="images/cupcakes-small.jpg" width="207" height="156" alt="">
             //the post title <h6 class="m500">Red Velvet</h6>
             //the content <p class="m500">Classic red velvet cake with chocolate chips baked in, cream cheese icing & topped with a chocolate heart</p>
            </div>
            <div class="gallery-box-bottom"></div>	
    
          <?php if( $wp_query->current_post%4 == 3 || $wp_query->current_post == $wp_query->post_count-1 ) echo '</div><!--.box.box-2-->'; ?> 
    
    <?php endwhile; ?>
  3. allenc
    Member
    Posted 1 year ago #

    So here is the 1,000,000 (And thanks so much for the help you've already provided)

    How do I take <?php if( $wp_query->current_post%4 == 3 || $wp_query->current_post == $wp_query->post_count-1 ) echo '</div><!--.box.box-2-->'; ?>

    And make it dynamic so if I was to have say 1000 posts in this category it would continue to iterate matching 1 of 3 or 4 css styles... so for the first 4 postd it would use what you have above for the next 4 posts it would use another div tag then for the next 4 yet another tag and for the next 4 the original tag...

    Or is that an overly complicated way to do it?

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    make it dynamic so if I was to have say 1000 posts in this category it would continue to iterate

    you want to alternate through three different css classes for each set of four posts?

    this actually should happen in this line which adds the opening div:

    <?php if( $wp_query->current_post%4 == 0 ) echo '<div class="box box-2">'; ?>

    change it to:

    <?php if( $wp_query->current_post%4 == 0 ) echo '<div class="box box-2 '.($wp_query->current_post%12==0?'alpha':($wp_query->current_post%12==4?'beta':'gamma')).'">'; ?>

    this alternates the wrapping div between:
    <div class="box box-2 alpha">
    and:
    <div class="box box-2 beta">
    and:
    <div class="box box-2 gamma">

    (could be expanded to more that three different classes - just takes a bit of logic)

    the above new code is chort for:

    <?php   $currentpost = $wp_query->current_post;
    if( $currentpost%4 == 0 ) {
      if( $currentpost%12 == 0 ) {
        $extra_class = 'alpha';
      } elseif( $currentpost%12 == 4 ) {
        $extra_class = 'beta';
      } else {
        $extra_class = 'gamma';
      }
      echo '<div class="box box-2 ' . $extra_class . '">';
    } ?>
  5. allenc
    Member
    Posted 1 year ago #

    In the interest of understanding could you explain the $currentpost%4 == 0 part? Primarily what the %4 == 0 actually means / does?

    (Then I can work out my class structure...)

    Thanks Again

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    this $currentpost%4 == 0, being used within a if statement, means if the remainder of the division of $currentpost divided by 4 is zero; which is the case if $currentpost is equal to 4, 8, 12, 16, 20, and so on...

    % is the so called modulus operator - http://php.net/manual/en/language.operators.arithmetic.php

  7. allenc
    Member
    Posted 1 year ago #

    Worked grear.. I ended up cleaning up the css there was no need to loop through the different classes but I am sure I will use this in the future.. Gives some freedom with building sites that are a little less static style wise..

    Thanks for the help.

Topic Closed

This topic has been closed to new replies.

About this Topic