WordPress.org

1. re.dikol.us
   Member
   Posted 3 years ago #
   

   Hey guys & gals!

   First off thanks for taking the time to help me out with this, I am still pretty new to WP and am using it for my graphic design portfolio.
   I'll try my best to describe what I am trying to accomplish.

   In my theme, I have the layout setup to show 4 column posts and I would like to have additional posts show directly below (which they do) but without a huge gap in spacing like I am currently getting.

   It's wierd, if you go to my site currently, you can see that the 5th post "WHAT THE FUBAR" is doing exactly what I want it to, but the other 3 posts, "C&W" "ALLPHASE" and "ELITETECHS" are almost being pushed to the bottom of the page with a huge gap in between them.

   The HTML markup:
   `
   [huge chunk of code moderated - please use a pastebin or link to file]

2. re.dikol.us
   Member
   Posted 3 years ago #
   

   Sorry about that, I will pastebin the code now!

3. re.dikol.us
   Member
   Posted 3 years ago #
   

   CSS: CSS
   HTML: HTML

   Hopefully the post above makes sense, If you need any other information please let me know. Thanks for any help anyone can provide!
   Please help! :(

4. Joshuwar
   Member
   Posted 3 years ago #
   

   There's a couple of ways I can think of right now.

   One: Using jQuery Masonry

   Two: this is a bit longhand you could position your boxes in 4 columns, and within each column use query posts with some offsetting etc.

   For example (this isn't actual code- it's just an idea):

   <column>
   
   <?php query_posts('showposts=1&cat=3'); ?>
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   
   <div class="item">
   
   <!-- the_content etc -->
   
   </div>
   <?php endwhile; endif; ?>
   
   <?php query_posts('showposts=1&cat=3&offset=4'); ?>
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   
   <div class="item">
   
   the_content etc
   
   </div>
   <?php endwhile; endif; ?>
   
   </column>

   and repeat that four times, adjusting the offset so that the posts display in the order you want.

   If you don't get what I'm saying, let me know and I'll try again.

   There are probably lighter ways of doing it.

   Nice site, by the way!

5. re.dikol.us
   Member
   Posted 3 years ago #
   

   Hey Josh, thanks so much for a reply! I was starting to get worried. From the looks of it the Masonry thing looks a little bit easier to accomplish, but when I tried applying the code to index.php it made my posts into one column instead of the desired effect.

   I just reverted the changes. Is there any way you can look at the pastebin files I included above and tell me what needs to change in my CSS/HTML files?

   I really appreciate it! and thanks for the compliment on my site! It's the first time I've tried using WP on my own site.

6. re.dikol.us
   Member
   Posted 3 years ago #
   

   anyone else experienced with the masonry script?

7. Joshuwar
   Member
   Posted 3 years ago #
   

   Hey chap, no problem. It would be a bit easier to show you what I mean if you posted the index.php of your theme, not the output HTML...

   But basically the method I envisaged (and failed to properly articulate) was to use a seperate query for each post displayed, and position those queries in columns. This would achieve the same effect as the masonry script (which I'm sorry I haven't used), but would need more php markup and database calls...

8. Joshuwar
   Member
   Posted 3 years ago #
   

   I see you got it working with the masonry script- out of interest- was that difficult?

Topic Closed

This topic has been closed to new replies.