CODEWITHSUNDEEP
wordpresstwitter-bootstrap
Social Monster
Social Monster

Reputation: 101

Gaps appearing between randomized images

I've edited a Bootstrap Wordpress theme to display featured images randomly when refreshed on the front page. But now on every other line the images are displaying huge gaps instead of images -

enter image description here

Here is my site.

What have I done wrong, and how do I get rid of these gaps? I used this code in index.php to display the images randomly -

        <?php /* Start the Loop */ ?>
        *<?php query_posts($query_string . '&orderby=rand') ?>*
        <?php while ( have_posts() ) : the_post(); ?>

Upvotes: 1

Views: 114

Answers (3)

Daniel Olson
Daniel Olson

Reputation: 33

In short the gaps come from floating images left that aren't equal heights. You have two options to fix this with out editing your current HTML markup.

Option 1 Add a new image size, add that image size to the wp_query and regenerate your thumbnails.

3 Steps:

1) Create a new image size by adding the following to functions.php add_image_size( 'home-thumbnail', 400, 400, true);

home-thumbnail = size variable, keep it simple and short

400, 400 = height, width

true = hard crop, WP will crop the image from the center.

http://codex.wordpress.org/Function_Reference/add_image_size

2) Add the new image size to the wp query.

e.g. <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'home-thumbnail' ); } ?>

3) Regenerate your thumbnails with this plugin: http://wordpress.org/plugins/regenerate-thumbnails/

That's it!

Options 2 Pre-crop your images before upload so they're the same size. I'd recommend Opt 1 as these steps are apart of any development workflow and will ultimately increate your development flexibility / options.

Upvotes: 0

Jos
Jos

Reputation: 1484

Don't float in the .pbox css. Use display: inline-block instead and you're good.

See screenshot and updated css at bottom-right: https://www.dropbox.com/s/3qvmhvz5dwlnekb/Screenshot%202014-04-16%2022.14.42.png

Upvotes: 1

Hobo
Hobo

Reputation: 7611

The source of the problem is that the images aren't all the same height. In the row right at the top of the screen grab you've pasted, the image on the right isn't as tall as the other two. So the browser thinks there's space for content underneath it. It adds an image there, and tries to float it left. It stops when it bumps up against something - the image in the second column in the row above. Then it stops. And the next image gets put underneath it. It's just the way float works in CSS.

So you have two options. Either crop all your images (or their containers, say the articles) to the same height, or use a jQuery library like masonry to lay out your images.

See this answer for a related problem and more discussion.

Upvotes: 1

Related Questions