Skip Navigation
Remove

Image sizing for sidebar, gallery, slideshow, and more

March 5, 2011 at 10:48 am
By Matt Ryan

Many modules that show images can now be configured to present those images at custom sizes. In all cases, image sizes are configurable through page type parameters. Here are the modules that have been upgraded, with their new parameters for controlling image sizes:

Image Sidebar

  • thumbnail_width
  • thumbnail_height
  • thumbnail_crop

Gallery2

  • width
  • height
  • crop
  • thumbnail_width
  • thumbnail_height
  • thumbnail_crop

Images

  • width
  • height
  • crop

Children

  • thumbnail_width
  • thumbnail_height
  • thumbnail_crop

AV

  • thumbnail_width
  • thumbnail_height
  • thumbnail_crop

Image Slideshow

  • width
  • height
  • crop

About the parameters

Width and height parameters are always integers, indicating the number of pixels desired for that dimension.

If only width or height are given, images are sized to match that dimension, retaining their aspect ratio, and the crop parameter is ignored.

If both width and height parameters are given, the crop parameter is respected. "fill" (the default value) retains aspect ratio by cropping the image to fill the dimensions given. "fit" retains aspect ratio by sizing the image to fit into a box described by the width and height parameters.

Example: The original image is 640x480,and the module is given in its parameters a width of 100 and height of 100.

  • If there is no crop parameter, or the crop parameter is "fill," the module will create a 100x100px image, cropping the left and right sides to make the image fit a 100x100 box without distortion.
  • If the crop parameter is set to "fit", the module will resize the entire image (without cropping) so it will fit in a 100x100 box. The resulting image in this case will be 100x75; if the image was 480x640 the resulting image would be 75x100.

New page types

For your convenience, each module that supports image sizing has at least one new core page type that implements image sizing. You can use these out of the box, and can use them as reference when creating your own page types that use image sizing:

  • image_sidebar_100x100
  • image_sidebar_150x150 
  • image_sidebar_200x200
  • audio_video_100x100_thumbnails
  • audio_video_150x150_thumbnails
  • audio_video_200x200_thumbnails
  • gallery_100x100_thumbnails
  • gallery_150x150_thumbnails
  • gallery_200x200_thumbnails
  • gallery_640w_images
  • gallery_640x480_images
  • gallery_800w_images
  • image_slideshow_500x375
  • image_slideshow_manual_500x375
  • show_children_with_first_images_100x100
  • show_children_with_first_images_150x150
  • show_children_with_first_images_200x200
  • show_children_with_random_images_100x100
  • show_children_with_random_images_150x150
  • show_children_with_random_images_200x200
  • images_640w
  • images_640x480
  • images_800w

Building Image Sizing into Custom Modules

Image sizing is now a core Reason feature, so you can build it into your custom modules. Here is a code snippet that shows how to get the URL of a 100x100 thumbnail:

reason_include_once( 'classes/sized_image.php' ); 
$rsi = new reasonSizedImage();
$rsi->set_id($image_id);
$rsi->set_height(100);
$rsi->set_width(100);
// This is not necessary, as "fill" is the default value; 
// I am including it to show how to set the crop style.
$rsi->set_crop_style('fill');
$url = $rsi->get_url();

You can also pass a reasonSizedImage object to show_image() if you don't want to produce the HTML yourself:

reason_include_once('function_libraries/images.php'); 
show_image($rsi); 

Enjoy!

Credits

The ReasonSizedImage class was created by Nate White and functionally completed by Frank McQuarry. Colin Macarthur implemented image sizing in the modules and made improvements to ReasonSizedImage, show_image(), and other parts of Reason's image handling code to support these changes.

Add a comment

Name*
Comment*
The following fields are not to be filled out. Skip to Submit Button.
Not Comment
(This is here to trap robots. Don't put any text here.)
not URL
(This is here to trap robots. Don't put any text here.)
Avoid
(This is here to trap robots. Don't put any text here.)