Many popup types, gallery, watermarks and much more!

Multithumb rules!

Multithumb for Joomla 1.5 is launched!

Sunday, June 29

Finally!!!

Too much work and too little time has delayed this project quite a lot, but finally it's here. Multithumb for Joomla 1.5 is released in the first official version. It's an alpha release, so there is still work to be done, but at least it's not just promises anymore :-)

Please use the comment function on that page for comments on the new release. 

Multithumb is a multi-purpose image plugin for Joomla that can automatically create thumbnails and popups of the original images, as well as resize the full-size images or add a watermark to them. It can even scramble the images names so that people cannot guess their original non-watermark locations.

For articles shown in blog mode, it can create a link from the first image to the full article for better user navigation.

It can also create a simple photo gallery from any folder by just including one of the images from the folder and give it the description (alt text) "mt_gallery" (or using the new tagging feature).

Multithumb works with both normal images and {mosimage} images.

See the examples and how-to's below for inspiration and instructions!

Processing images takes time!

Please note that when you use Multihumb for the first time on a given page, the server has to process all the images which might take quite some time. This especially applies if you use the gallery function.

This processing can lead to various server errors. If the error text says something about memory size,  try increasing PHP's memory limit using the backend option "PHP memory limit".

If the server complains about timeout,  change the maximum execution time using the similar named option. Try for example with 60 or 120 seconds.

These settings are only effective if PHP safe mode is off!

Another remedy is to simply reload the page one or more times. For every reload Multithumbfor Joomla will process more images. When all the images are processed, the page will load normally.

Note that some changes in the backend options might trigger a new image processing cycle. This is also the case if you deliberately clear the image cache by using the option "Clear cache on next page load".

NEW VERSION 2.0

Multithumb 2.0 is more versatile than ever. In fact, it is probably one of the most versatile and advanced mambots ever written. Remember, this is "just" a mambot, but it has capabilities you would expect only from full-blown components.

Here is a list of some of the new features in Multithumb 2.0:

• Watermarks
  Supports both popup images and images shown in content Watermark images can be true alpha blend PNG images or any GIF, JPG og PNG image with manually set transparent background color
  User definable watermark position
• Language packs
  Installable language packs for Multithumb's frontend
  
• Manual thumbnails
  You can create your own thumbnails and let Multithumbfor Joomla use them instead
• Thumbnail proportions
  Choose between best fit (keeping aspect ration), crop to fit, fill out with background color, stretch (distort proportions)
  
• Scrambled image names
  
• Automatic resize of images
  Can resize both popup images and images shown in content
  Resize by pixels or percentage of screen size
• New popup types: Slimbox, Greybox and Thickbox
  Multihumb now supports six popup types: normal, lightbox, slimbox, greybox, thickbox, thumbnail expansion
  Thumbnail expansion now works perfect with captions too!
• "Intelligent" handling of compatibility issues with other javascript libraries
  For example, if mootools.js is already included in your template, Multithumb will not try add it again
• Auto-gallery with individual image descriptions
  You can add a text file with the same name as the image used for the gallery, and Multithumbfor Joomla will use the content of this file for image descriptions
  It will even create the description file for you, ready to fill out!
• Link to main article in blog mode
  Instead of showing a popup when viewing the article in blog mode, Multithumbfor Joomla can create a link from the first image to the main article.
  Or it can just create a plain, inactive thumbnail
• Works from sub folders out-of-the-box
  You no longer have to modify the javascript files if you run Joomla from a sub folder on the server
• Native thumbnail generation
  Multithumbfor Joomla no longer uses an external thumbnail library
• Informative error handling with javascript popup messages
  Like if Multithumbfor Joomla can't find the watermark file, or if the server does not support the needed image functions
• Extremely configurable
  But because of that, also a bit confusing for new users :-)
• Parameter override, allowing for multiple configurations even in same article
  Most of Multithumbfor Joomla's settings can be overridden in the content by including the proper tags, like:
  {multithumb popup_type=greybox full_width=400}  which will make Greybox the new popup style and images 400px wide
  The override works until the end of the article or until it is overridden again.
  There is even a handy online tool dedicated to creating the tags for you!
• Many new options
• Backend much better arranged
• Improved and optimized code

[Click for "old" news]

Demos and how-tos

Simple thumbnail and popup

Simple thumbnail and popup example

If you give the image a description (alt text) this will be used as the image title.

Below is shown how the image to the right is made with {mosimage}.

The six popup types

Multithumbfor Joomla now supports six different popup types. For those called something with 'box', Multithumbfor Joomla uses third-party javascript libraries and style sheets. For information, bug reports and suggestions regarding the popup scripts themselves, please navigate to their respective homepages using the links below.

• Normal popup
  This is more or less a plain old popup with the image opened in a new window, adjusted to fit the image
• Lightbox
  A slick and very popular popup style nowadays. Not all browers will show Lightbox correctly.
• Slimbox
  A lightweight variant of Lightbox. Looks the same but uses another set of libraries.
  Lightbox and Slimbox are mutually exclusive - they cannot be used on the same page at the same time! (But no problem with different pages on the same site)
• Greybox
  A somewhat different approach to the same idea as Lightbox. Many people find it very nice.
• Thickbox
  Yet another lightbox variant. Thickbox requires that your page has a valid DOCTYPE.
• Thumbnail expansion
  Not really a popup. The thumbnail "expands" when clicked on, displaying the full image directly in content. Not very useful for photo galleries, but good for images that illustrate the accompanying text.
  
  

Image sets

Image sets are groups of related images linked together, making a kind of gallery. Follow the instructions for Simple thumbnail and popup above for each image, but give every image in the set the same description (alt text) which will then be the name of the gallery. This works for lightbox, slimbox and greybox popups.

The images to the left are made with {mosimage} exactly as shown in the example above, except that each image has the alt-text "image sets".

Thumbnail sizes and proportions

Multithumbfor Joomla 2.0 is pretty advanced when it comes to creating thumbnails. I the backend you can specify the width and height of thumbnails, but the resulting thumbnail can vary a lot depending on how you handle the thumbnail proportions.

Lets say you want to make thumbnails from 800 x 600 images, but you want 200 x 200 thumbnails. Obviously you can't just reduce the image to make it fit perfectly into a square, so then what? WithMultithumbfor Joomla 2.0 you can choose between:

• Best fit, keeping proportions
  The image will be reduced until it is fully framed by the square. The longest side is now 200. The final thumbnail will take the constrained proportions (here 200 x 150)
• Crop to fit, cutting one side
  The image will be reduced until it "fits over" the square. The shortest side is now 200. The surplus parts of the longest side will be cut away.
• Fill out with background
  Like best fit, but instead of constraining the thumbnail size, the thumbnail is fill out with the selected background color.
• Stretch, distort proportions
  The image will be reduced and squeezed into the 200 x 200 frame. Depending on the subject, this might look good or bad.

Here are different thumbnail sizes using best fit. I have chosen Greybox to group them together. Note that the full sizes are the same.

Here is the same image with 120 x 120 thumbnails, but using different proportions.

Yet another option in Multithumbfor Joomla 2.0 is manual thumbnails. If you want total control of the thumbnails, you can create them yourself! Just create an image with the same name as the original image, but with .thumb stuffed in and put it in the same location. For example, for the image my_nice_pic.jpg the thumbnail should be called my_nice_pic.thumb.jpg. Always use lowecase for the thumb part.

The thumbnail image should have the same proportions as the final thumbnail, but it can be an advantage to make it bigger (full size). Then you can always change the thumbnail size in the backend without having to recreate the manual thumbnails. But of course, you can also make it the final size from the beginning, like 75 x 75. Just never make it smaller, or it will not work at all, and don't make it just a bit bigger or the image will look blurry. Make it exactly the same size or at least twice as big.

Manual thumbnails are especially well suited for artists who wants full control of their thumbnails without missing any of Multithumbfor Joomla's unique features. These examles is from Natascha Roeoesli's personal artwork site where you can see more great examples of manual thumbnails.

Resizing images

You can resize the full images with the backend options "Full width" and "Full height". Also make sure "Resize images" is checked. Select what to do if the original and resized images have different proportions with the option "Full-size image proportions". The principles for resizing is just like describe for Thumbnail sizes and proportions.

If you set one of the dimensions to zero, the image will be constrained only by the other side. For example, setting the height to 200 and width to 0 will make all images 200px high, adjusting the width accordingly. This is often the setting that looks best, because it creates a nice imaginary line between each image in a slideshow instead of making the images dance up and down.

Tip: You can opt to have the size relative to the user's screen size. If you set the height to 50%, a 1024 X 768 screen will get images 384 px high, whereas as 1400 x 1050 screen will get images with a height of 525 px. But remember that for each resolution, a copy of the image will be created on the server.

300 px wide

400 px wide

500 px wide

Using watermarks

All the pictures on this page are watermarked with Multithumbfor Joomla. Let's now see how you do it.

First create the watermark file using your favorite image tool. Two watermark types are supported: true alpha blended PNG images and plain PNG, JPG or GIF files where you manually select the transparent color.

You will get the best result with real alpha blending as this allows for anti aliasing (which in the transparent color mode often will look bad). Make sure the background is a transparent layer and make the blending of the foreground layer say 25%. This will create a nice discrete watermark.

It is not difficicult to create a true transparent PNG image, but it is beyond the scope of this tutorial to tell you how. However, here is an easy-to-follow guide using a free image program.

The other option is to create a plain image with a given background (usually black). Then, in the backend, specify the transparant color in hex form, like #000000 for black. Also set the transparency level of the watermark. The background will be totally transparent, so the the transparency level refers to the foreground of the image. Experiment with different levels.

Save the watermark file in any image folder and write the path to it in the option "Watermark file". By setting the left and top positions of the watermark you can move it around on the main image. Use negative values to position relative to the opposite side. Leave a value empty to center the watermark by that dimension.

Example placements (left X top):
10 X 10 : Upper left corner
10 X -10: Lower left corner
-10 X -10: Lower right corner
<empty> X -10: Horizontally centered 10px from bottom
Both empty: Centered on the main image

Hint: make the watermark as small as possible to contain the text or logo, as this allows for the most versatile positioning on the main image.

Here are the same watermark placed differently.

watermark top left

watermark top right

watermark bottom right

watermark bottom left

watermark top centered

watermark centered

There is one caveat with watermarks you should now or you might get confused. If you change the watermark postion or the watermark file itself, you should clear the cache (using "Clear cache on next page load" in the backend) or you will not see the changes. This is because the files are cached for effectivity.

If you need a simple watermark to play with, you can steal mine. Right click on the link and select "Save link target" or whatever it is called in your browser. The image looks empty - it's because it's transparent!

Creating an automatic gallery

With Multithumbfor Joomla you can create simple galleries automatically by adding just one image from a given folder. Add the image you want to be the first in the gallery as described in Simple thumbnail and popup. Then prefix the description (alt text) with mt_gallery: (including the colon), for example mt_gallery:Images from Italy. This will tell Multithumbfor Joomla to create a gallery named "Images from Italy" with all the images in the folder. Make sure you have set the wanted popup style in the backend (lightbox, slimbox or greybox).

Now tell how many thumbnails you want to show for the gallery in the content using the option "Max. thumbnails in image sets". If you don't have too many images, you can select "All".

Finally specify how many thumbs across you want in the gallery by using the option "Number of gallery columns". For example, if you have chosen to show 9 thumbnails and set the number of columns to 3, the thumbnails will have a 3 x 3 layout.

With Multithumbfor Joomla 2.0 you can also add descriptions to the individual  images in the gallery. If Multithumbfor Joomla finds a file with same name as the galleri start image , but ending with .txt, it will use the images and descriptions for those images, and in the set order.

For example, let's say you initiate the gallery by adding the image img_005.jpg. Give it the alt text "mt_gallery:My Gallery" to tell Multithumbfor Joomla it's a gallery. Then create a text file called img_005.jpg.txt and add the individual files and descriptions like this:
 

Below is shown how I created the gallery in the "More demos" section at the bottom of the page.

Creating an automatic gallery

Overriding default values

You may have noticed the various thumbnail sizes, border options and other settings that vary on this page. That is due to a completely new and extremely strong feature in Multithumbfor Joomla 2.0 - parameter overriding.

The options you set in the mambot's backend work globally in Joomla. If you change the thumbnail size, all thumbnails on all pages will reflect the new values. This is often how you want it to work, but not always. You might need a different look and feel on some pages, and that is very easy with Multithumbfor Joomla 2.0.

All parameters can be overriden with the construction {multithumb parameter1=value1  parameter2=value2 ... }

For example, this will change the thumbnail size and disable captions and watermarks for images following the override:
{multithumb thumb_width=150 thumb_height=100 caption_pos=disabled watermark=0}

Images before the override are not affected. The override will last until the end of the current page, or until you change it again with another override. So by adding several  overrides in the content, you have a very high degree of control.

Reverting to default values is easy. There are two ways:

{multithumb parameter=default} or {multithumb default)

The first option will just restore that value, like {multithumb thumb_width=default  thumb_height=default}

Whereas the second option will restore all values to the default settings from the backend.

Language packs

With Multithumbfor Joomla 2.0 you don't have to fiddle with the source code to implement a new frontend language for Lightbox popups. An important new feature is installable language packs which means that you can install several languages for Multithumbfor Joomla which will then follow the language setting in the Global Configuration. You can also override the language choice by using the backend option "Language override for Multithumb".

1. It is easy to create a language pack. Start with downloading the English language pack. Note that this pack is not needed in itself as English is the default language for Multithumbfor Joomla, but it's a good basis for new languages.
2. Make a new version of the small icons prevlabel.gif, nextlabel.gif and closelabel.gif. Underline the character you wish to use as a shortcuts for previous, next and close, like "p", "n" and "xoc". Note that you can have more than one character for a shortcut: in this example pressing "x", "o" or "c" will close the lightbox.
3. Edit the language definition file called lang.js in which you define the navigation keys and the text to use for "image x of y".
4. Update the xml file multithumb_english.xml and replace all occurenses of english with the name of the new language.
5. Rename multithumb_english.xml and multithumb_english.php to multithumb_<language>.xml and multithumb_<language>.php
6. Finally zip all the files into a zip file called multithumb_<language>.zip, keeping the correct folder structure.
7. Now you can install the language pack like any other mambot, using menu item Installers > Mambots.
8. Please send the final language pack to This email address is being protected from spam bots, you need Javascript enabled to view it so other users can download it!
   

Language packs are currently only implemented for Lightbox popups!

FAQ

[Read this first in case of problems!]

[How do I use Multithumbfor Joomla?]

[Can Multithumb also work with mosimage tags?]

[The images are large, can I resize them in the editor?]

[Can I decide on which pages Multithumb should work?]

[How do I override the default popup method]

[How do I make a photo gallery with Multithumbfor Joomla?]

[I have both portrait and landscape thumbnails and the gallery does not look pretty!]

[How do I put some vertical space between the icons in the gallery?]

[How do I group lightbox images in a set?]

[My page looks strange. Some elements are on top of the lightbox!]

[How do I change the font and color of the caption etc?]

[How do I put a border around the thumbs?]

[My thumbnails don't look quite right!]

[There is no popup. I just get the image in its original size when I click on it]

[The small icons in the lightbox popup are missing or wrong]

[I get only white pages when I use Multithumbfor Joomla]

[What is the description or alt text you mention constantly?!]

[How did you make this faq???]

Download and Installation

Multithumbfor Joomla is installed like any other mambot using using menu item Installers > Mambots. Remember to publish it!

If you want Multithumb to process {mosimage} tags, you must make it appear before MosImage  in the mambot list.

Build 3 is a maintenance release that fixes a problem with various warning messages sometimes showing up on the page. Also fixed a problem with small images, like emoticons, sometimes getting upsized. Please download the new build. No new features are added.

Download Multithumb 2.0 beta 1 build 3

If you have problems with build 3,  you can always try one of the previous versions:

Multithumb 2.0 beta 1 build 2
Multithumb 1.04
Multithumb 1.11

Language packs

Language packs are installed like normal mambots! The only difference is that they work even if unpublished. So in order to deactivate a language pack, you must uninstall it.

Currently the language packs support lightbox popups only.
Danish
Polish
Russian
German
French
Spanish
Italian
Swedish
Dutch
Croatian

Support Multithumb!

Help developing Multithumbfor Joomla - make a donation!!!

Multithumb has taken a lot of time to develop. Really a lot! You can support further development by making a small donation. Select a fixed amount from the drop down list below or choose one of the 'other' options, where you can donate any amount you like.

More demos

Click on these images!

All images copyright (C) 2007 Martin Larsen.

Normal popup

Lightbox popup

Lightbox popup

Lightbox popup

Greybox popup

Greybox popup

Greybox popup

Thumbnail expansion

Demo gallery using the auto gallery function

Comments

If you have comments, feel free to use the form below.

Comments on the Joomla 1.5 version should go here!

The comments are not for support questions or other issues that require a reply - they will simply be ignored!

Support questions should go to Joomla forum. 

Write Comment
Name:	Guest
Title:
BBCode:
Comment: