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.
• 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.
• 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 images should have thumbnails, value 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. If you 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;
}

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

English discussion forum