studio

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.

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)

Advanced parametres:

• Create thumbnails for all images - If No then create thumbnails for images with 'smartresize' command only, if Yes then create thumbnails for all images except images with 'nosmartresize' command.
• 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' command.
• Create link to article in blogs - if Yes, in blog view, create a link for the thumbnail pointing to the article .
• Full image display style:
  - New window or RokBox - full image opens in a new browser window or in the lightbox if RokBox system plug-in installed.
  - Pop-up window - full image opens in a pop-up window.
• Store thumbnail in - the same folder as original image or in cache folder.
• Thumbnail Extension - sets a suffix for the file name of the thumbnail.
• Thumbnail quality in % - Sets the thumbnail image quality.

Parameters 1 and 2 set fixed dimensions for the thumbnails to be displayed in category blog, section blog and in the front page. Parameters 3 and 4 set default thumbnail dimensions for the article view. Each picture can be assigned its own thumbnail dimensions 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.

In order to tell the plug-in which pictures should have thumbnails, value smartresize must be entered in the Class property or Id 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 "Id" and "class" image properties. If you decide to use property "class", 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;
}

If you decide to use "Id" image property to set command "smartresize", you can do following steps: turn on Extended Functionality for the TinyMCE editor, which will enable tabs in the image properties editor. The third tab - Advanced - has Id property, which can be used to insert command smartresize.

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.

Demonstrations: arbitrary-sized thumbnails | thumbnail in an article with RokBox pop-out

English discussion forum