Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

This is for a gallery that's populated automatically, images are pulled in from child pages. Layout is: 2 images in a row and they must be left- and right-aligned respectively.

I can't figure out a way to add a space between them.

  • When I add margin or padding, the 2nd image gets pushed off to the next line;
  • Without margin, they're side by side (and only the left one is properly aligned).

So I figured alternating CSS classes might work, but not sure how to make the odd images float left, and even images - float right. And the odd/even class for the images will change based on the number of child posts (and therefore, the number of images imported into this Gallery page).

<div id="gallery-container">
    <?php
    $mypages = get_pages( array( 'child_of' => $post->ID, 'sort_column' => 'post_date', 'sort_order' => 'desc' ) );

    foreach( $mypages as $page ) {
    $content = $page->post_content;
    if ( ! $content ) // Check for empty page
    continue;

    $content = apply_filters( 'the_content', $content );
?>


        <div class="gallery-preview">
            <div id="zoom">
                <?php echo $content; ?>
                <h3><a href="http://mettedesigns.com/gallery/<?php echo $page->post_title; ?>"><?php echo $page->post_title; ?></a></h3>
            </div>
        </div>


<?php
}   
?>  
<?php endwhile; endif; ?>
</div>      
share|improve this question
    
Close-voted as off-topic. This is a PHP/CSS question, not a WordPress question. –  Chip Bennett Aug 4 '12 at 0:48
add comment

closed as off topic by mrwweb, Chip Bennett, Wyck, Michael, Chris_O Aug 4 '12 at 20:33

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 0 down vote accepted

Use PHP modulo operator (%) to determine the classes and use CSS to float them all left and set clear:right to the odd class.

Kind of hard to picture how you're pulling the images without the code though. Could you post a clip of the code you used to pull the images?

If not you can resort to JS to add the classes dynamically after the page loads shudder.

share|improve this answer
    
Please see the revised original. That's pretty much it for the gallery page. –  Phantasmix Aug 4 '12 at 0:28
    
I'll probably have to make the images into <li>, that's fine. But I don't know enough PHP to write my own anything, get by with revising other people's code for now. Thanks! –  Phantasmix Aug 4 '12 at 0:33
    
Um firstly. I don't know why you're putting images into a post's content and putlling child posts/pages, that doesn't make any sense? WordPress has a "gallery" option in posts when you upload images via the media uploader in the post page, it gives you the option to embed all the images into a gallery which WP automatically generates. There's no need to for your code. So long as you are using the latest version of WordPress. –  bgallagh3r Aug 4 '12 at 18:24
    
Wordpress will generate the css class columns when it loads the gallery, you can choose many options.. just check out codex.wordpress.org/Gallery_Shortcode –  bgallagh3r Aug 4 '12 at 18:29
    
Each image in the gallery is linked to the Child page from which the image is pulled. When a child page is added, image from the_content is automatically added to the Parent page. So you see, it's not a regular gallery I need, but a grid of preview images based on the Child pages. Yes, it can all be done manually, but I'm trying to simplify the maintenance for the person who will be updating the site in the future. –  Phantasmix Aug 4 '12 at 23:43
show 6 more comments

Not the answer you're looking for? Browse other questions tagged or ask your own question.