• I want to add a series of evenly-spaced, linked images to one of the pages on my site across the middle of the page. The spacing should remain even despite the viewing environment. I have a paltry amount of experience with HTML and CSS. Would appreciate anyone’s description of how that code would look. Thanks…

Viewing 1 replies (of 1 total)
  • Without knowing what your image sources are or where they should link to, I can only assume that you want to show a series of post thumbnails that link to the posts they represent.

    If that is the case, and assuming you want three images per row, you would do something like this in your page template:

    <?php if( have_posts() ) : ?>
        <ul class="post-thumbs">
        <?php while( have_posts() ) : the_post(); ?>
            <?php if ( has_post_thumbnail() ) { ?>
                <li>
                    <a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title_attribute(); ?>" rel="bookmark"><?php the_post_thumbnail(); ?></a>
                </li>
            <?php } ?>
        <?php endwhile; ?>
        </ul>
    <?php endif; ?>

    And something like this in your style.css:

    ul.post-thumbs li {
        width: 32%;
        height: auto;
        margin-right: 2%;
        float: left;
    }
    ul.post-thumbs li:nth-child(3n+3) {
        margin-right: 0; /* No margin for every 3rd li */
    }

    EDIT: Put the if has_post_thumbnail bit outside of the <li> tags.

Viewing 1 replies (of 1 total)
  • The topic ‘linked images’ is closed to new replies.