Adding extra markup to query_posts

  • Resolved rusticated

    (@rusticated)


    13 years, 7 months ago

    I’m using query_posts to create an unordered list (ul) of posts, where each post item is floated to the left to create a grid layout. However, as the post titles vary in length, the height of each list item (li) also varies, breaking the layout. This can be seen here:

    https://is.quotebox.org/sports/football/

    This wouldn’t occur if I could wrap every five list items in a separate div. Thus, is there a way to add extra markup to query_posts after it’s looped through a certain number of posts, in this case five?

    Any help you could provide would be greatly appreciated, thanks.

Viewing 4 replies - 1 through 4 (of 4 total)

  • you can do this by using a counter variable, and insert the markup depending on the counter value.
    this could be a div, or simply an extra css class to mark each first post per row.

    for more detailed suggestions, please paste the code of your template into a https://pastebin.com/ and post the link to it here.

    Thread Starter rusticated

    (@rusticated)

    Thanks for your help, I’ve uploaded the loop file code to:

    https://pastebin.com/pEzFNAxg

    https://pastebin.com/Xkk2DesP

    new or changed:

    $counter = -1;
    initialize the counter before the query;

    <div style="float:left; width:124px; margin-right:15px; padding-bottom:10px; text-align:center; <?php $counter++; if( $counter%5 == 0 ) { echo 'clear:left; '; } ?>">
    this should add a ‘clear:left;’ to your inline style, for each first post per row.

    how it works:
    the counter starts with -1, gets incremented for each post;
    the check is if the remainder of the division of counter divided by five equals zero;
    if yes, this is a ‘first in a row’ post; then add ‘clear: left;’

    (untested)

    Thread Starter rusticated

    (@rusticated)

    Worked like a dream, thanks a lot for your help. I didn’t even think of just utilising plain ol’ php.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding extra markup to query_posts’ is closed to new replies.