Plugin SmartResizer - thumbnails in articles and blogs for Joomla 1.5-2.5

License: free
Languages:

Many Joomla! users have faced the need to output articles in a category or section blog layout, especially multi-column, with smaller pictures while retaining their original size inside the article view. It may sometimes also be necessary to include a picture of reduced size accompanied with a link to the full size image in the article view.

SmartResizer plug-in is a universal solution to those needs.

The plug-ing creates two thumbnails for an image inside an article: the first is for inclusion inside the article and the second is for a category or section blog. This makes it possible to create a small thumbnail for a category blog, section blog and front page articles, and a midsize thumbnail for the article view. The plug-in also automatically creates a reference to a full-size image if the picture has the thumbnail inside the article. The plug-in can create a third large thumbnail to open as the fullsize image. Nice feature, if your users upload photos to site directly from the camera with a very large size.

There are some features of the plugin:

• Crop or Fit image to thumbnail size.
• Auto ajust size of thumbnail, if you set only width or only height of thumbnail.
• Three ways to store thumbnails: in the same folder as original image; in cache folder; in subfolder 'smart_thumbs' of original folder.
• Processing of remote images.
• Three ways to open original image: popup window, Joomla SqweezBox, Highslide effect.

Supported image formats: JPG, PNG, GIF.

Plugin parameters:

• Thumbnail width for blogs - thumbnail width for pictures in a category blog, section blog and front page.
• Thumbnail height for blogs - thumbnail height for pictures in a category blog, section blog and front page.
• Default thumbnail width for articles - default thumbnail width for pictures inside articles.
• Default thumbnail height for articles - default thumbnail height for pictures inside articles.
• Default thumbnail width for others - This is the default generated thumbnail width in px for images in other components (not com_content)
• Default thumbnail height for others - This is the default generated thumbnail height in px for images in other components (not com_content)
• Create large thumbnails - to create or not to create a thumbnail, which will open in a window instead of the original image. Nice feature, if your users upload photos to site directly from the camera with a very large size. Plug-in can create a thumbnail to open as the fullsize image.
• Large thumbnail width.
• Large thumbnail height.

Advanced parametres:

• Create thumbnails for all images - If No then create thumbnails for images with 'smartresize' class only, if Yes then create thumbnails for all images except images with 'nosmartresize' class.
• Ignore individual image size - If Yes then ignore individual image size in IMG tag and apply a default thumbnail size for articles and other components except images with 'smartresizeindividual' class.
• Create link to article in blogs - if Yes, then plugin creates a link to the article for the thumbnail.
• Image style for blog - you can set thumbnail decoration in blogs and homepage with this parameter. The value of the parameter is the "style" property value of <img> tag. Example of the parameter value: background-color:#EEEEEE; border:1px solid #999999; padding: 3px;margin-right:5px
• Image style for article - you can set thumbnail decoration in article with this parameter.
• Image style for other content - you can set thumbnail decoration in other component content (not com_content) with this parameter.
• Method of thumbnail resizing - if 'crop', then image will be cropped to thumbnail size. If 'fit', the image will be scaled to the size of the thumbnail, however, if the image proportions are not the same as those of the thumbnail, white margins will be left.
• Full image display style: Pop-up window - full image opens in a pop-up window. Joomla SqweezBox - full image opens in a standard Joomla mootools SqweezBox. Highslide - full image opens with highslide effect.
• Store thumbnail in - the same folder as original image, in cache folder or in subfolder 'smart_thumbs' of original image folder.
• Thumbnail suffix - sets a suffix for the file name of the thumbnail.
• Thumbnail quality in % - Sets the thumbnail image quality.

Parameters 1 and 2 set fixed size for the thumbnails to be displayed in category blog, section blog and in the front page. Parameters 3 and 4 set default thumbnail size for the article view. Each image can be assigned its own thumbnail size inside its article by defining properties 'height' and 'width' in IMG tag in the editor. If neither 'height' nor 'width' are given, the thumbnail size will be determined by default parameters 3 and 4.

It is possible to set just the width or just the height for plug-in parameters or in image properties. In this case the missing image dimension will be automatically calculated based on the proportions of the original image. Should the proportions that you set differ from the proportions of the original image, the thumbnail will be cropped or fitted either horizontally or vertically.

In order to tell the plug-in which images should have thumbnails, class smartresize must be entered in the Class property of the image in the editor. You should set parameter "Code cleanup on save" of TinyMCE plugin to value "on site" or "never" to prevent automatically deleting "class" image properties. Also need to switch TinyMCE Editor to advanced mode to enable additional tabs of image property window. You can access to image property "Class" on tab "Appearance" of image property window. You can declare .smartresize class in the tempate.css file. This class may be empty:

.smartresize { }

or with border decoration:

.smartresize { 
 padding: 5px 5px 5px 5px;  
 margin:10px 10px 10px 10px;
 border:1px solid #CCCCCC; 
 background:#EEEEEE;
 float:left;
}

This code allows to set separate decoration for images in blog layouts instead of images in articles:

.blog img.smartresize { 
 padding: 7px 7px 7px 7px;  
 margin:10px 10px 10px 10px;
 border:1px solid #CCCCCC; 
 background:#EEEEEE;
 float:left;
}

You can use plugin parameters "Image style for (blog, article, other content)" described above to set decoration for thumbnails. this is more easy way than declaring .smartresize class in template.css file.

You can use the blogwidth and blogheight commands to set individual sizes for the thumbnail in your blog or homepage layout. You should use these commands in property "style" of IMG tag:

<img class="smartresize" style="blogwidth:200; blogheight:100;" 
  src="/images/stories/image.jpg">

In order for the plug-in to create thumbnail for all pictures, set parameter Create thumbnails for all images to Yes. In this case you do not need to set smartresize class for each image. Also in this case You can use nosmartresize command in Class property of <img> tag to prevent creation thumbnail for the image.

Demonstrations: arbitrary-sized thumbnails | thumbnail in an article