WordPress.org

Ready to get started?Download WordPress

Forums

create a page with a 2 or 3 column content layout? (23 posts)

  1. flush
    Member
    Posted 7 years ago #

    Is conceivable to make a page with 2 or 3 columns of content that would display like this?
    post1 post2 post3
    post4 post5 post6
    post7 post8 post9

    If it is indeed possible, would it be very difficult to implement?

  2. moshu
    Member
    Posted 7 years ago #

    Yes and yes.

  3. flush
    Member
    Posted 7 years ago #

    ... ok... would a developer with reasonable php skills be able to do that in 2 or 3 days?

  4. Chris_K
    Member
    Posted 7 years ago #

    If that developer understands The_Loop, web design and CSS, yeah, probably.

    Seems like you'd need 3 loops, each doing every 3rd post, but each starting at a different offset. I can't see how it would be fun, but at first glance it doesn't look impossible by any stretch. (no, I'm not volunteering!)

  5. flush
    Member
    Posted 7 years ago #

    One detail, it's to post pictures and a rating script that would all have the same format. All the posts would have the exact same size if you see what I mean, not long ones and then short ones... Just a picture and underneath that a rating plugin.

  6. iand
    Member
    Posted 7 years ago #

    Could you do it with one loop and use it to generate nine unique <div>s which you could then float left, right etc as you wanted? (Sounds a little to easy so i doubt it :) )

  7. Chris_K
    Member
    Posted 7 years ago #

    That's an interesting approach, IanD. And probably better than mine if the layout is all thought through first!

  8. iand
    Member
    Posted 7 years ago #

    Chances are it will be a CSS nightmare though (I struggle with just getting two divs side-by-side..)

    Another way could be to use a home.php with nine get_posts calls each getting one post with varying offsets. This would mean you would need a more conventional page for single view etc (and i dont think paging using home.php would work as you are not using the true 'loop'.

  9. flush
    Member
    Posted 7 years ago #

    I don't want just 9 posts on the page though, it was just show the layout, which is 3 posts per row.
    So trying to do that would be a "nightmare"?

  10. moshu
    Member
    Posted 7 years ago #

    Yes.
    There aren't really "rows" when it comes to design.

  11. st3f
    Member
    Posted 7 years ago #

    if i understand your problem right, it's quite simple.
    just use one loop with 9 post, lets say div class="post" ... and in your css you give this class a width and flaot it left.

  12. flush
    Member
    Posted 7 years ago #

    Thank you,
    However i'm not trying to get just 9 posts in a page, it was just for the example. I'm trying to have posts display in rows of 3 (each post will have the exact same size).

  13. Doodlebee
    Member
    Posted 7 years ago #

    Since you want the posts to go three across, drop and start the next three - yeah, you could do this with the regular loop - doing what tIan said up there...float your DIVs. I disagreed with him when he says it would be a nightmare. I haven't done this with a dynamically generated site, but I've done it quite often with static sites. The only difference in them would be the possibility of more divs - but that wouldn't be a problem.

    I'll post a quick example here, but you'll have to make adjustments for your current situation. But it should be enough to get you started.

    Your HTML should look something like this (using a 2-column layout):

    <body>
    <div id="wrapper">
    <div id="sidebar">
    Sidebar stuff here
    </div>
    <div id="content">
    <div class="post<?php whatever the post code is here ?>">
    Post 1 here
    </div>
    <div class="post<?php whatever the post code is here ?>">
    Post 2 here
    </div>
    <div class="post<?php whatever the post code is here ?>">
    Post 3 here
    </div>
    <hr class="clear" />
    </div> <!--closing #content -->
    <hr class="clear" />
    </div> <!-- closing #wrapper -->
    </body>

    Then your CSS should be something along the lines of this:

    * {margin:0; padding:0;border:none;}
    #wrapper {width:700px;}
    #sidebar {width:200px; float:left;}
    #content {width:500px; float:right;}
    #content div {float:left; width:165px;}
    hr.clear {clear:both; visibility:hidden;}

    Now, basically, that'll make the divs inside the content area float left. Each are 165px, added together *almost*makes 500px. in addition, you need to clear that float each time there's a "row" of posts, so the next line can start.

    The problem with this, of course, is Internet Explorer. You *will* need conditional comments to adjust for margins and padding. And if you have a word or a link that is longer than the given 165px, IE *will* expand the div in question, and cause the last div (post #3) to drop. So you'll need to be careful about images sizes, word and URL lengths.

    But it should work just fine. Hope it gets you started.

  14. flush
    Member
    Posted 7 years ago #

    Wow! Thanks a lot!
    Just to be sure: I can actually have just one specific page display like that, even though the rest of the site has a regular layout?

  15. KatGirl
    Member
    Posted 7 years ago #

    Just to be sure: I can actually have just one specific page display like that, even though the rest of the site has a regular layout?

    Answer: Yes.

    This will help you:
    http://codex.wordpress.org/Templates

  16. flush
    Member
    Posted 7 years ago #

    Has anyone seen something similar working on someone's blog?

  17. richardwilkinson
    Member
    Posted 7 years ago #

    I know it's 6 months later...but I found myself with the same problem.

    on http://www.richard-wilkinson.com

    I'm learning as I go so very slow progress (and probably very messy code!).

    I'm trying to make a portfolio page by creating an individual loop called category-5.php (when 5 = portfolio category ID)

    I can get the basic CSS to work (still struggling with sidebar/footer issues), but I'm struggling with the actual loop.

    Doodlebee - you were excellent in your solution last time, and it looks like you've maybe solved the problem again here. The problem is I dont totally understand the solution!

    Where, in your solution, it says 'whatever the post code is here'...where do I find the code I'm after. It's too baffling to get my head around, but I'm sure it'll be obvious when I'm pointed in the right direction.

    Did anyone else have any success using this technique?
    I think it's quite an important topic as it is SO useful for photoblogs/portfolios/galleries etc.

    Thanks.

  18. Doodlebee
    Member
    Posted 7 years ago #

    Where, in your solution, it says 'whatever the post code is here'...where do I find the code I'm after.

    Wow - this *is* old - I barely remember taking part in this solution, and *just* happened on it again! LOL Lucky you I actually chose to read this, or I would have missed it!

    Okay, well, when I say "whatever the post code is here", it's whatever code you're using to get those posts to be in the format you choose. Like I said, I've used the solution provided above for non-dynamic sites - so the content never changes. So whatever the post code would *be* to make the posts themselves change, while the layout remains the same - *that* is the hard part.

    If I remember correctly, my line of thought at this was to basically use the regular posting code:

    <div class="post" id="post-<?php the_ID(); ?>"> and then continue on with the rest of the post-y stuff and usual. The Post IDs will change, so using CSS to pick out those particular IDs would be ineffective. But, in theory, if you just set each dive to the left, and make them so wide, then they'll start to go three posts wide. Because of the nature of floated elements, if the containing div is only wide enough to have three objects side-by-side, then the fourth one will drop under the first. That's why *all* of them are floated left.

    Like I said, this in *in theory*. I don't know for a fact that this will work, and it may be a little tricky. But I think it *could* be done (in fact, I'm now thinking of creating a theme that could do this - that would be pretty cool.)

    But anyway, to answer your question, the section of code above would end up looking like so - again, *in theory*. The original:

    <div class="post<?php whatever the post code is here ?>">
    Post 1 here
    </div>

    with the actual "stuff" in it (using the default template):

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    <div class="post" id="post-<?php the_ID(); ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    
    <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
    
    <div class="entry">
    <?php the_content('Read the rest of this entry &raquo;'); ?>
    </div>
    
    <p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
    </div> <!-- closing post -->
    
    <?php endwhile; ?>
    <?php endif; ?>

    Hope that helps.

  19. richardwilkinson
    Member
    Posted 7 years ago #

    Doodlebee! I thanks my lucky stars you exist! I didn't think this would be spotted - what luck!

    Trying it now..i'll let you know.

    Thankyou so much.

  20. richardwilkinson
    Member
    Posted 7 years ago #

    So I've just digested & played around a bit....and what you're suggesting before you answered my initial question seems to make sense & be very simple.
    Just set each div to the left, and make them 150 wide (my containing div being 450 wide), then they'll start to go three posts wide.

    So, if I understand correctly, this would mean there's no need for individual div IDs for the posts? Just set them all to the left, and they will fill the horizontal space until its full, then overlap to the next row?
    But that isn't working for me. (big surprise!)

    Here's the problem page (ignore the sidebar/footer probs)
    http://www.richard-wilkinson.com/category/portfolio/

    Here's my loop for the portfolio page. (I'm dealing with thumnails in the_excerpt here btw. 95 px across, linking to lightbox instead of the post):

    <?php
    /*
    Template Name: Categories2
    */
    
    get_header(); ?>
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id="portfolioentry">
             <div class="blockcontent" id="blockcontent-<?php the_ID(); ?>">
    
             <a href="<?php the_permalink() ?>"><?php the_excerpt(); ?> </a>
             </div>
    <hr class="clear" />
    
    </div> <!-- closing post -->
    
    <hr class="clear" />
    
    <?php endwhile; ?>
    <?php endif; ?>

    and the relevant css:

    #blockcontent div {float:left; width:120px;}
    hr.clear {clear:both; visibility:hidden;}

    Any thoughts?

    Thanks again again!

  21. Doodlebee
    Member
    Posted 7 years ago #

    Well, a BIG thing that's wrong is your search bar isn't closed. You have the opening input tag, but you didn't close it. That would throw *anything* out of whack.

    Also, you're using clearing elements after each post. That's why they aren't aligning side-by-side. If you're clearing the float, then the next one will drop down. No clearing element should be used.

  22. richardwilkinson
    Member
    Posted 7 years ago #

    Oops. Good spot, Doodlebee, thanks for that. It's a cut & shove job so I know its very messy.
    Still figuring it out...

  23. richardwilkinson
    Member
    Posted 7 years ago #

    Figured it out. It works great for the thumbnails.

    (Ignore the extra <a> in the strip_tags allow: I wanted these to link just to their larger images in lightbox. Remove that (so it reads

    <a href="<?php the_permalink (); ?>"<?php if ( get_the_excerpt() ) echo strip_tags(get_the_excerpt(),'<img>'); else the_ID(); ?> </a>

    for links to single posts.

    Here's the code:

    <?php $r = new WP_Query('showposts=10');
    	if ($r->have_posts()) :
    ?>
              		<div class="portfoliocontent"
    			<?php  while ($r->have_posts()) : $r->the_post(); ?>
    			<a href="<?php the_permalink (); ?>"<?php if ( get_the_excerpt() ) echo strip_tags(get_the_excerpt(),'<img><a>'); else the_ID(); ?> </a>
    			<?php endwhile; ?>
                            </div>  
    
    <?php endif; ?>

    Thanks for your help doodlebee.
    ..and for your patience!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.