WordPress.org

Ready to get started?Download WordPress

Forums

Grid Layout Image Issues (1 post)

  1. mikechalmers
    Member
    Posted 1 year ago #

    Hello all,

    I have been working on a grid layout for a blog (just square images, with a hover state).

    The problem is, the image size I have chosen and registered in functions isn't working and the full size image is showing up and messing up the page.

    I've regen'd the thumbnails with AJAX rebuild thumbnails plugin, but still the problem persists.

    The temp page is here:

    http://thehub-pr.co.uk/grid-3/

    And here is loop:

    <?php if (have_posts()): ?>
    
    <?php while (have_posts()) : the_post(); ?>
    
    <div class="birdcage">
        <?php the_post_thumbnail('grid-pic'); ?>
        <img class="top" src="../wp-content/themes/TheHubPR/images/grid_cover.png" />
        <div class="text"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></div>
    </div>
    
    <?php endwhile; ?>
    
    <?php else: ?>
    
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    
    <?php endif; ?>

    and add_image in functions (which is being seen by the AJAX thumbnail regen plugin as it made the image):

    if ( function_exists( 'add_image_size' ) ) {
    	add_image_size( 'grid_pic', 205, 205, true ); //300 pixels wide (and unlimited height)
    }

    And the CSS for the grid:

    .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;
    
    }

    Any help would be greatly appreciated!

    Thanks

    MC

Topic Closed

This topic has been closed to new replies.

About this Topic