WordPress.org

Ready to get started?Download WordPress

Forums

Grid layout for blog posts (6 posts)

  1. mikechalmers
    Member
    Posted 1 year ago #

    Hello, I've been asked to change a blog to a grid format, where each post just grabs the image and puts it in a square box of equal size. I'm looking for a way to do this easily - or an appropriate plugin.

    I found Category Grid View Gallery but have had trouble with all of the images, except the 'image not found' one being broken links. There is some support on this issue but I still couldn't get it to work properly.

    Any help in this area would be greatly appreciated as we're trying to implement it asap and not sure what's the best path to take.

    All the best

    MC

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

    it might help if you can post at least the name and download link of the theme where you want to implement the grid layout;
    or post a link to the site you are working on.

    can you break the task down into steps, and post specifically where you have problems?

  3. mikechalmers
    Member
    Posted 1 year ago #

    Sorry the site is not live yet and it's a custom theme.

    Basically I could just do divs in the loop floated left, but it's pulling the image (I suppose we could use featured image on every post) and getting it to appear nicely in the regimented box size..

    Not really having a specific issue, I just thought that a lot of people might have done this in the past and have a code template or plugin that would save time etc.

    Thanks for your quick response

    MC

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

    it's pulling the image (I suppose we could use featured image on every post)

    the 'featured image' is agood starting point; there are also plugins which woud get the first image from a post - example http://wordpress.org/extend/plugins/get-the-image/

    there are also several topics in the forum about showing a 'default' image if the 'featured image' is not found.

    getting it to appear nicely in the regimented box size..

    you can set the image size for the featured image: http://codex.wordpress.org/Function_Reference/the_post_thumbnail

    once you have your template's initial code together, you could paste it into a pastebin and post the link to it here ( http://codex.wordpress.org/Forum_Welcome#Posting_Code ) if you would like to get some opinions.

  5. mikechalmers
    Member
    Posted 1 year ago #

    Thanks for your reply,

    I've taken the code I found from a rollover grid example and have it the way I want it (with test images, not pulling data from wordpress posts) and it works well.

    I then registered a new image size in functions and tried to pull the new small squares into the grid code - and it didn't work properly. It pulled the image through but at full size and there's a broken image too.

    Here's the functions addition:

    if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 625, 625, true ); // default Post Thumbnail dimensions (cropped)
    add_image_size( 'the-hub-image', 625, 9999 ); //300 pixels wide (and unlimited height)
    add_image_size( 'the-grid', 205, 205 );
    }

    - "the-grid" is the new image size (the thumbnail size is what we want to appear on the individual post page.

    here's the loop. I was just trying to bring the image through above the old loop (with the old loop still below the grid so I could bring parts in and delete others as I went) - dunno if this is part of the issue..

    <div class="birdcage">
        <img src="<?php if ( has_post_thumbnail()) : ?>
       <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
       <?php the_post_thumbnail( 'the-grid' ); ?>
       </a>
     <?php endif; ?>" />
        <img class="top" src="../wp-content/themes/TheHubPR/images/grid_cover.png" />
        <div class="text">Test</div>
    </div>
    <div class="birdcage">
        <img src="../wp-content/themes/TheHubPR/images/temp_grid_box.jpg" />
        <img class="top" src="../wp-content/themes/TheHubPR/images/grid_cover.png" />
        <div class="text">Test</div>
    </div>
    <div class="birdcage">
        <img src="../wp-content/themes/TheHubPR/images/temp_grid_box.jpg" />
        <img class="top" src="../wp-content/themes/TheHubPR/images/grid_cover.png" />
        <div class="text">Test</div>
    </div>
    <div class="birdcage">
        <img src="../wp-content/themes/TheHubPR/images/temp_grid_box.jpg" />
    
        <img class="top" src="../wp-content/themes/TheHubPR/images/grid_cover.png" />
        <div class="text">Test</div>
    </div>
    
    				<?php
    
    				if (have_posts()): ?>
    
      <ol id="posts"><?php
    
        while (have_posts()) : the_post(); ?>
    
        <li class="postWrapper" id="post-<?php the_ID(); ?>">
    
          <h2 class="postTitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    
    	<div class="blog-box">
    
    		<?php the_post_thumbnail('the-hub-image', array('class' => 'alignleft')); ?>
    
          <div class="post-pad"><div class="post"><?php the_content(__('(more...)')); ?></div>
          <small><?php the_date(); ?></small>
          <p class="postMeta">Category: <?php the_category(', ') . " " . the_tags(__('Tags: '), ', ', ' | ') ?> | <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)') ) . edit_post_link(__('Edit'), ' | '); ?></p>
    	</div></div>
    
        </li>
    
        <?php comments_template(); // Get wp-comments.php template ?>
    
        <?php endwhile; ?>
    
      </ol>
    
    <?php else: ?>
    
      <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    
    <?php
    
      endif;
      ?>
    
      <?php if (will_paginate()): ?>
    
        <ul id="pagination">
          <li class="previous"><?php posts_nav_link('','','&laquo; Previous Entries') ?></li>
          <li class="future"><?php posts_nav_link('','Next Entries &raquo;','') ?></li>
        </ul>
    
      <?php endif; ?>

    Here's the CSS, for posterity:

    .birdcage {
        background:#f00;
        float:left;
        position:relative;
        width:205px;
        height:205px;
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .top {
        position:absolute;
        top:0;
        left:0;
            visibility:hidden;
    }
    .birdcage:hover .top {
    /*    z-index:-1;           /* use this */
        visibility:visible;    /*  or this */
    /*    left:-9999px;         /*  or this */
    }
    .text {
        color:#fff;
        padding: 5px;
        position: absolute;
        top: 90px;
        width: 195px;
        text-align: center;
    
    }

    If I can provide more info, I'd be happy to - thanks for your help again.

    Best

    MC

  6. mikechalmers
    Member
    Posted 1 year ago #

    Here's what's happening: http://thehub-pr.co.uk/our-work/

    And here's how it's sorta supposed to look: http://thehub-pr.co.uk/grid-test/

    Thanks

    MC

Topic Closed

This topic has been closed to new replies.

About this Topic