IPrice minimart - powerfull component for Joomla 2.5-3.x: price-lists and catalogs of products, online Store

20% discount for IPrice minimart New Year edition till 31.12.2014!
opportunity to buy a pending license for a good price

Plugin SmartResizer - thumbnails in articles and blogs for Joomla



License: free
Languages: English Russian German Spanish French

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:

Setting thumbnail sizes
SmartResizer Plugin basic parameters - Setting thumbnail sizes

SmartResizer Plugin basic parameters - Setting thumbnail sizes


  • 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.
Tip: delete old thumbnails after changing thumbnail size in plugin parameters to prevent clogging of the site folders. Location of thumbnails depend on parameter "Store thumbnails in".

Advanced parametres:

Setting thumbnail behavior
SmartResizer Plugin advanced parameters - Setting thumbnail behavior

SmartResizer Plugin advanced parameters - Setting thumbnail behavior
  • 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 stylePop-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.
  • Create image caption in articles - if yes, then creates caption above or under the thumbnail in articles. Caption is the text from 'alt' or 'title' tag of image.
  • Create image caption in category blogs - if yes, then creates caption for thumbnail in the category blog layout or in the homepage layout.
  • Create image caption in other content - if yes, then creates caption for thumbnail in other component content.
  • Image caption position - under or above thumbnail.
  • Style for image caption box - style for caption (style for <span> tag). Default value is 'line-height:20px; font-size:10px;'
Please note: Caption is shown on one line only. Do not use long caption if you use small thumbnails.

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.

Tip: While inserting an oversized image into an article, adjust image properties to the necessary reduced size. This will make the image display appropriately in the editor as well as generate a thumbnail of a proper size.
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.

Caution! If this option is turned on, pages with large number of images may take longer to load the first time while the thumbnails are being generated. Subsequent loads will be faster.
Tip: Do not use international symbols, spaces or special characters in file name of original image. Use only latin symbols and symbols '-', '_' to prevent errors while processing image by plugin.

Demonstrations: arbitrary-sized thumbnails | thumbnail in an article