1

In my HTML mock up, the idea is to have a thumbnail side by side and I'm doing that by using this code:

<div class="jumbotron">

<img src="<?php print IMAGES; ?>/th1.png" class="img-thumbnail">
<img src="<?php print IMAGES; ?>/th2.png" class="img-thumbnail">
<img src="<?php print IMAGES; ?>/th3.png" class="img-thumbnail">
<img src="<?php print IMAGES; ?>/th4.png" class="img-thumbnail">
<img src="<?php print IMAGES; ?>/th5.png" class="img-thumbnail">
<img src="<?php print IMAGES; ?>/th6.png" class="img-thumbnail">
<img src="<?php print IMAGES; ?>/th7.png" class="img-thumbnail">
<img src="<?php print IMAGES; ?>/th8.png" class="img-thumbnail">
<img src="<?php print IMAGES; ?>/th3.png" class="img-thumbnail">
<img src="<?php print IMAGES; ?>/th5.png" class="img-thumbnail">
<img src="<?php print IMAGES; ?>/th2.png" class="img-thumbnail">
<br /><br />
<button type="button" class="btn btn-xs btn-warning">VER TODOS LOS ESTRENOS</button>

</div>

Image here: HTML

However, when trying the same thing using wordpress everything goes weird, I need to "call" all posts from the clicked category and only bring the featured image, so each image is going to be aligned to each other side by side, like the HTML example above, what I'm using is this:

<?php if (have_posts()) :  while (have_posts()) : the_post(); ?>

<br />
<div class="jumbotron">

<?php the_post_thumbnail(array('class' => 'img-thumbnail')); ?>

<br /><br />
<button type="button" class="btn btn-xs btn-warning">VER TODOS LOS ESTRENOS</button>

<?php endwhile; else: ?>
<p><?php _e('No posts were found. Sorry!'); ?></p>

</div>

<?php endif; ?></p>

But is not working

Looks like: Wordpress

Any idea guys why this might be happening?

  • Please add all your code directly to your question. Do not use outside sources to store code. Thank you – Pieter Goosen Aug 26 '14 at 12:19
3

You are not using loop properly. Not tested but you can try this:

<?php if (have_posts()) :  ?>
    <br />
    <div class="jumbotron">
        <?php while (have_posts()) : the_post(); ?>

            <?php the_post_thumbnail(array('class' => 'img-thumbnail')); ?>

        <?php endwhile; ?>

        <br /><br />
        <button type="button" class="btn btn-xs btn-warning">VER TODOS LOS ESTRENOS</button>
    </div>

<?php else: ?>

<p><?php _e('No posts were found. Sorry!'); ?></p>

<?php endif; ?>
  • That was a cool one, thanks so much, the only thing is that the post thumbnail is not taking the class, not sure why if I'm calling that. Thanks Nilambar! – Arturo Aug 26 '14 at 3:58
  • 3
    the_post_thumbnail takes two arguments. First one is image size and second is attributes. Try this: the_post_thumbnail('thumbnail',array('class' => 'img-thumbnail')); – Nilambar Aug 26 '14 at 4:04
  • Hey Nilambar thanks so much, well, that works in some way, I mean, it places the white margin to the image, please refer to the first image posted here, but it shows the image I think in 150x150 pixels, in the first posted image, you'll see those images in a size like 85*121 but cannot find the way to send those parameters in the post thumbnail code, I tried just posting 85,121 but it converts the image in a 85*85 pixels square. Thanks a lot! – Arturo Aug 27 '14 at 5:27
  • 1
    thumbnail in this code implies that it will fetch thumbnail of the image set in WP settings. If you need exact image other than WP settings then you need to add image size using add_image_size and use that size in the code. – Nilambar Aug 27 '14 at 5:43
  • 1
    Are you sure you are using like this? the_post_thumbnail('thumb-small',array('class' => 'img-thumbnail')); – Nilambar Sep 3 '14 at 3:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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