WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Grid page template twentyeleven (11 posts)

  1. pietergoosen
    Member
    Posted 1 year ago #

    Hi,

    Can anyone help me with a page template or the coding for a 4x5 grid. I'm working on a twentyeleven childtheme for a video and photo website. So I need the template to show the photos in a 4x5 grid. Many thanks

  2. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Not sure what you mean by a 4x5 grid....is this rows and columns of thumbnails or an aspect ratio or?

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your query is still a bit vague, are you using a type of grid system?

  4. pietergoosen
    Member
    Posted 1 year ago #

    Hi, thanks for your reply. No, I'm not yet using any type of grid system as yet. I want just the images from the posts to show on one page in a 4column 5row grid. Hope that helps a bit

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

    general approach is to format the post div with 'float: left;' and a 'clear:left;' on each fifth post.

    this is more a css problem, so it might help if you post a link to yoursite to show what you have so far.

    are you familiar with page templates and custom queries?
    http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates
    http://codex.wordpress.org/Class_Reference/WP_Query

    you could paste the full code of the template into a http://pastebin.com/ and post the link to it here as a base for any suggestions - http://codex.wordpress.org/Forum_Welcome#Posting_Code

    how are your ideas for the responsive bahaviour on small screens?

  6. pietergoosen
    Member
    Posted 1 year ago #

    I'm not to bad on page templates. I saw a post about posting in two columns, that is what I basically need, except that I need 4 columns. I haven't really thought about the responsive lay out yet. another thing is, the css might do the trick, but where must my div go for me to be able to style every 5th post. one last thing, I'm using a very basic twenty eleven child theme with a few css tweaks

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

    but where must my div go for me to be able to style every 5th post

    to make any suggestions for that it would be best to see your existing code.

  8. pietergoosen
    Member
    Posted 1 year ago #

    alchymyth, ok, I found this on your website transformationpowertools.com/playing-with-columns-stacking-posts-grid-style. I'm quite happy to use the grid lay out you explained there (4x4). The problem is, the page shows up blank. I can't seem to get the code working in a page template. it doesn't seem to call up the posts or the thumbnail images. Can you please give me the complete code. Many thanks

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

    that 'stacking' code is not an ideal code if you are considering any responsive adaptation of the column number;
    it is also using a custom query; for your purpose, you will need to remove that query, if your code is used in an index or archive template; or re-define what the query is supposed to show.

    generally, if you have post thumbnails of equal height, the simple code of adding a clear left for every fourth post is much easier;
    you would define the width of each thumbnail so that 4 images will fit into a row, and set the number of posts from within dashboard - settings - reading.

    you can add a css class for the 'clearleft' from within functions.php:

    add_filter('post_class','clear_left_four_class');
    function clear_left_four_class( $classes ) {
     global $wp_query;
     if( $wp_query->current_post%4 == 0 ) $classes[] = 'clearleft';
    return $classes;
    }

    minimum css:

    .hentry { width: 24%; margin-left: 1%; float: left; }
    .clearleft { clear: left; margin: 0; }

    (untested)

    for further suggestions, please post the code as you have is so far, and post a link to your site to the page using the template, to illustrate what the result is.

  10. pietergoosen
    Member
    Posted 1 year ago #

    @ alchymyth, many thanks for your solution, it works great. Unfortunatly I can't give a link to my website, as it is not yet live, I'm still busy developing it on my pc. Once again, many thanks for your help

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

    you are welcome ;-)

    no need to post a link if everything is working as expected.

Topic Closed

This topic has been closed to new replies.

About this Topic