Joomla Tutorials and Blog Posts

1. Thumbnail width for blogs - thumbnail width for pictures in a category blog, section blog and front page.
2. Thumbnail height for blogs - thumbnail height for pictures in a category blog, section blog and front page.
3. Default thumbnail width for articles - default thumbnail width for pictures inside articles.
4. Default thumbnail height for articles - default thumbnail height for pictures inside articles.
5. Default thumbnail width for others - This is the default generated thumbnail width in px for images in other components (not com_content)
6. Default thumbnail height for others - This is the default generated thumbnail height in px for images in other components (not com_content)

If you fill in values only for the width, the height will be automatically calculated. If you put in values for both width and height, the image will get cropped.

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.

I set all the widths to 200px and left the height blank.

You can see the difference. Now all the pictures are resized, but they have no styling. Let's give them some style.

1. 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.
2. 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.
3. Create link to article in blogs - if Yes, in blog view, create a link for the thumbnail pointing to the article.
4. Image style for blog - you can set thumbnail decoration in blogs and homepage with this parameter. An example of the parameter value: background-color:#EEEEEE; border:1px solid #999999; padding: 3px;margin-right:5px
5. Image style for article - you can set thumbnail decoration in article with this parameter.
6. Image style for other content - you can set thumbnail decoration in other component content (not com_content) with this parameter.
7. 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 install - Pop-up window - full image opens in a pop-up window.
8. Store thumbnail in - the same folder as original image or in cache folder.
9. Thumbnail Extension - sets a suffix for the file name of the thumbnail.
10. Thumbnail quality in % - Sets the thumbnail image quality.

• Return to the Extensions >Plugin Manager > Content-SmartResizer.
• Open it for editing by clicking the name, or check the box and click the Edit icon.
• Go to the Advanced tab.
• Type or paste your styling into "Image style for blog".
• Save.
• View your blog layout.
• Below is a copy of what I used.

All the pictures are now uniformly styled with a "picture frame" and aligned the same with the same spacing.

Repeat the process for the article and other content thumbnails. This will get you started. There are several other features that will make handling thumbnails more automated and your design more uniform. This integrates with RokBox from RocketTheme. If you install RokBox , the full-size picture in article will open in a lightbox, instead of a new browser window. You can download RokBox from RocketTheme.com.