Howto accurately position images with maximum flexibility?

Question

I got a request to develop the following design with Wordpress: http://imm.io/DLrl (design is pixelated by me for the purpose of privacy).

As you can see there is a pretty random structure of image placement and the webmaster should have maximum flexibility in deciding how to place images, how many and in which size. So the design as seen now will change each time the webmaster decides so. When a new collection of pictures is added to the website, the webmaster should be able to choose a couple of them which will be highlighted on the main page.

In this design one image stands for an album or collection of pictures. So when clicking on one of these images a lightbox will popup whereby the visitor can browse all the containing images.

I have no clue how to implement such a design within wordpress. Any tips/ideas on possibilities? Any plugins worthwhile looking at?

(ps: to me the design is a bit confusing and not very clear in terms of usability and structure, but that's another matter)

Answer 1

I'm not sure if I understood your question.

Are you looking for a best practice to set image sizes in a way that the person embedding them in a article or somewhere in your home page or website (ie featured content, thumbnails) will appear good even if design changes over time or the author of a post can choose different styles and fit the image accordingly?

If this is what you're after, you can enable thumbnails in your theme by adding add_theme_support( 'post-thumbnails' ); in your functions.php file and then set the resized thumbnails you want. For example:

 add_image_size( 'square', 300,  300,  true ); 
 add_image_size( 'featured', 640,  480,  false ); 
 add_image_size( 'your_label', $width, $height,  $crop ); 

$crop can be set to true true or false, depending if you want to have the image cropped or resized when scaled down by CSS.

Eventually, if your design uses a lot of square thumbnails or fixed ratio pictures (it appears so in your link), you could define a larger image with a fixed ratio then have it scaled down if necessary (I find this useful when you want to display a smaller or a bigger thumbnail, but not that extremely different in terms of size do justify another image size, so I just scale down the bigger one when needed)

For the part when you're asking about generating a lightbox or some featured content for the home, best way would go with a plugin. Advanced Custom Fields or Nextgen Gallery for managing a Gallery and then javascript to handle the lightbox. Once you have the necessary images (thumbnails to choose from in different sizes) you should be able to accomplish what you want.

Answer 2

I wrote a plugin named »Dynamic Image resize« for exactly that purpose. It features a template tag and a shortcode (that takes the exact same amount of arguments, the template tag takes.

// The args need to be an array
dynamic_image_resize( array(
     // The full path to the image in your uploads folder
     'src'     => 'http://example.com/wp-content/uploads/2012/03/some_image.png'
     // OR: the ID
     'src'     => 6

    ,'width'   => 60
    ,'height'  => 100
    ,'classes' => 'some classes to align and style the image'
) );

You could even make it even easier and add a "child"-plugin that offers a TinyMCE button.