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 400×300 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.
Why don’t you use add_image_size to add more size ?
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 :