CODEWITHSUNDEEP
phpcsswordpressimage
Kareen Lagasca
Kareen Lagasca

Reputation: 939

Wordpress Featured Image with Different Sizes

I am trying to do replicate the image below in wordpress. The problem is I dont know how.

I have this code to control the size of the featured image.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 400, 300, true );
add_image_size( 'post-thumbnails', 400, 300, true );

the problem with this code is it is only in charge of ONE size which is 400x300 only. How about the others? If you look at the image below, I believe you can see minimum of 3 sizes (3 variants)?

My Wordpress code in Index.php file is plain and simple:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>

<?php the_post_thumbnail('post-thumbnail', array( 'id'  => "FeaturedImage")); ?>

<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php else : ?>
<h2>You're Lost! </h2>
<?php endif; ?>

I would like to hear your opinions on this on how would you implement an html/css code structure on this.

enter image description here

Upvotes: 2

Views: 239

Answers (1)

meetjey
meetjey

Reputation: 11

Why don't you use add_image_size to add more size ?

add_image_size( 'another-thumbnails', 150, 300, true );
add_image_size( 'another2-thumbnails', 300, 150, true );

You can also use Masonry http://masonry.desandro.com/ (js library) to fit your needs, it will arrange blocs to be well displayed.

Another way is to use timthumb (php lib http://timthumb.googlecode.com/svn/trunk/timthumb.php) to generate cropped image on the fly (no need to generate multiple size on each upload file).

In your case there is 2 things :

  • use add_image_size or timthumb to generate multiple image size
  • use masonry to display blocs well

Upvotes: 1

Related Questions