Image Matrix module provides Views style plugin and content field formatter for displaying any number of images in magazine-like layout, arranging them at different sizes so that all images fit within a defined "square box".

It supports core image fields as well as media fields (deprecated Multimedia asset provided by Media module) and video field's thumbnail images.

It is based on highly-modified version of the MagazineLayout class by Harvey Kane, covered also by A List Apart.

How It Works

When field formatter or style plugin receives a list of images, it passes them all to MagazineLayout class, which first splits them into blocks - each block containing between 2 and 8 images, based on the field or plugin configuration - and then arranges them at different sizes so that all fit within the defined block size, also taking into consideration required padding around each image.

When no block height is specified, generated blocks will most probably have different heights - that's because in such case all images are *resized* only (keeping their original width to height ratio), only small, one-pixel corrections are possible to make sure that overall width and height of all images in a block is the same.

When a block height is specified, images will most probably be resized *and* cropped (either in width or in height) to make sure all images fit inside a block. In such case cropping is done proportionally for all images.

Resized images are generated using imagematrix image style defined during module installation. Although this style is defined to resize and crop images to 1x1 pixel size, final size calculations are done when layouts are being generated, and style definition to be used is updated on the fly.

The target file name of each resized image is updated too (for example from original photo.jpg to target photo_118x122.jpg, where 118 stands for image width and 122 for image height. This is done to avoid overwriting already existing resized images in case when there is more than one image with the same name in the view results.

Because of this however the number of generated images could grow up pretty fast, especially for frequently changing views or randomized layouts, so it is important to keep an eye on the size of imagematrix style directory and flush it from time to time (this can be done from view format settings modal using Flush generated images button).

For fields containing multiple images, module works correctly regardless of whether Display all values in the same row in view field settings is enabled or not. However when all values are displayed in the same row, and there is more than one Image Matrix-formatted field added to the view, it could happen that the same image will be displayed several times - in such case Reduce duplicates option should come handy.

Layouts generated by MagazineLayout class could be randomized, which will result in image arrangement being different each time the view is refreshed. This however will also result in target image dimensions being different each time, and therefore number of images in imagemagick style directory increasing quickly.

Layouts could also be cached - this option is exclusive with Randomize generated layouts, as when it is enabled, layouts are not generated each time a view is refreshed, but loaded from the cache instead, thus causing them to be the same on each page load (or at least until Views cache is flushed).

Finally, custom class and rel attributes could be added to image links, which could be useful for modal media viewers like Shadowbox, Lightbox, Colorbox etc.

Basic Usage

  • Download/clone and enable module.
  • Change view format to Image Matrix.
  • Add image field to the view and change its formatter to Image Matrix.
  • Adjust format settings to your needs.

Project Information

Downloads