Zoom Thumb Mambot

(version 1.0.beta.1.1 Feb 2005 )

This page documents the Zoom Thumb mambot. This mambot makes it possible to use thumbnail images from the Zoom gallery module to be used in content items. See also the next warning.

General security warning!!!

This version of the mambot does not validate if a user has access to an image. Zoom gallery allows for certain security restrictions on an individual level. This mambot however does NOT! appreciate those restrictions.

If you have public images only, then it's no problem. If admins are the only persons writing pages then, if they pay attention to which images are selected, it shouldn't be a problem too.

If it is a problem then uninstall this mambot or at least make sure it's not published.

How to use the mambot?

(Tip: you need to save the mambot settings at least once, otherwise it won't work.)

Well, first you need to have the Zoom Gallery installed, of course. If not, see the resource paragraph for web links. You also need to add some pictures to the Gallery.

Since your're reading this, you probably have the Zoom Thumb mambot installed as well. If not, see the resource paragraph for web links.

The you have two options: manually adding the tags or, option 2, using the Zoom Thumb Wizard. The wizard is a set of instructions and coding that, if applied, will make it all much more userfriendly.

For information on the Zoom Thumb Wizard see the resources below.

Manually adding the mambot code

Start editing a content item. In the same place where you add text, you can add this sample code as well: {moszoomthumb imgid=1} . See the paragraph with quick sampes for more. In reading mode, the content item will display a thumbnail picture.

Quick samples for usage

• {moszoomthumb imgid=1}
  display the thumbnail of the image that is uniqely identified by 'imgid' in the Zoom Gallery module. The default styles in your mambot-config-settings are applied.
• {moszoomthumb imgid=1 caption="this is my caption text"}
  previous example plus a custom caption text is placed with the image. The default styling for the caption is applied.
• {moszoomthumb imgid=1 caption="this is my caption text" style_m=2}
  Previous example, but the second style is applied to the container that holds both the image as well as the caption (if any). The style is defined in the mambot-config-settings.
• {moszoomthumb imgid=1 style_m=2 style_c=2}
  previous example, but the second style for captions is used.

Complete syntax for the ZoomThumb tag

{moszoomthumb imgid=number caption=text style_m=number style_i=number style_c=number}

• Use single spaces to seperate key=value pairs. Do not add spaces around the '='. This is good: 'key=pair'. This is wrong: 'key = pair'.
• imgid=number (required)
  is the unique id given to an image in the Zoom gallery Module (see also 'How do i find the image id?')
• caption=(texthere) between a left and a right parenthesis
  is caption text placed with the image. The caption text given to the picture in the Zoom Gallery is ignored. Also, if the mambot-config-settings are set to not display caption text (texts from from the Zoom gallery) if you provide a caption text as parameter it will be shown (thus overriding the mambot-config-settings).
• style_m=number 1,2,3 or 4
  indicates one of the four styles as defined in your mambot-config. See also 'About styling'.
• style_i=number 1 or 2
  indicates one of the two styles as defined in your mambot-config. See also 'About styling'.
• style_c=numbers 1 or 2
  indicates one of two styles as defined in your mambot-config. See also 'About styling'.

Nota bene:: do not provide any values containing '}' or '=' or ( ) parentheses , it will screw things up.

Nota bene:: do not add spaces around the '='. This is good: 'key=pair'. This is wrong: 'key = pair'.

Nota bene:: do not use the " (the single double quote) in caption texts. This is good: ' caption=(my caption text) for this image" ', this is good as well: ' caption=(my 'funny' caption text for this image) '. This is wrong: ' caption=(my "funny" caption text for this image) '

How do i find the image id?

Although the coding sample is very simple: {moszoomthumb imgid=1} , it's not that simple to get the imgid (unique id of image) from zoom gallery. That's because Zoom Gallery never shows that id in the front end. Not even as part of some url. So to get the img id you need to open the mysql table (table is named _zoomfiles) and find the id.

Try applying the Zoom Thumb Wizard (see resources) if you think this is too much effort.

The Zoom Thumb Wizard

The wizard allows administrators (next version will support normal users as well) to simply create the code, by just clicking on some options. The mambot code will then be automatically generated. For instrunctions on how to install it, visit the project home page (see resources).

The installation of the wizard consists of two steps. If you choose to only perform step 1, you can compute the mambot code by go to the Zoom Gallery Component homepage (menu>component>Zoom gallery) and click on the Zoom Thumb coder option. Then just follow the steps.

If you applied the second step of the Wizard as well, just go to your content item and start editing it (administrator access only) and an extra tab (where Publication. Images, etc are) will be available. Follow the steps there.

About styling

The mambot-config-settings provide styling options for this ZoomThumb mambot. There are three elements to style: the main container for the image and caption, the image and finally the caption.

Main container styling

• default style applied to main container:
  class='mosimage' style='float: left; border-width: 0px; margin: px; padding: px;' align='center'
  this will bring the main container to the left of the text in which it is embedded.
• style 2 applied to main container:
  class='mosimage' style='float: right; border-width: 0px; margin: px; padding: px;' align='center'
  this will bring the main container to the right of the text in which it is embedded.
• style 3 applied to main container:
  class='mosimage' style='border-width: 0px; margin: px; padding: px;' align='center'
  this will bring the main container in the middle of the text. Text stops above and continues below the picture.
• style 4 applied to main container:
  this is empty by default: you can of course use it and change it anyway you like it (same goes of course for previous three) .

Image styling

After installation the two default settings are as follows:

• default style applied to image:
  empty by default, use it as you might otherwise add html/style/etc tags to your image code.
• style 2 applied to the image:
  this is empty by default: you can of course use it and change it anyway you like it (same goes of course for previous one) .

Caption styling

After installation the two default settings are as follows:

• default style applied to caption:
  class='mosimage_caption' style='width: 100px'
  Apply a standard Mambo 452 class, but added a width as well.
• style 2 applied to the caption:
  this is empty by default: you can of course use it and change it anyway you like it (same goes of course for previous one) .

Some good styling tips

The default settings contain a lot of added styling values (e.g. style='border-width: 0px; ' ). This was done to stay inline with the normal method used in mambo 4.5.2. A better approach would be to use 'stylesheets only' for the actual styling. In the end it will provide a better seperation of content en styling.

To do this, use only values in the styling fiels that are something like "class='contentthumb-left'" and then define that class in your website templates. So for each template you have, you need to do this.

Other configuration settings explained

The Show unpublished thumbs? setting allows you to use and display thumb nails from Zoom despite having their status set to 'Unpublished'. Normally thumbnails are displayed only when their individul status is set to 'Published' AND it's gallery status is set to 'Published'. If you decide to override this, thumbnails are shown BUT they will not link to the larger image in the Zoom gallery (because Zoom shows published images only).

Also, enter the correct Itemid of the menu option that opens the Zoom Gallery. Find this by looking at the url and look for Itemid. The default setting 0 (zero) that was set during mambot installation will make Zoom Thumb ignore it. Any other value will trigger Zoom Thumb to add this itemid to the url over the thumbnail image. Why should you enter the itemid? Because with this itemid, mambo will provide better information for the pathway (the 'breadcrumb' trail).

ZoomThumb not working as it should do?

Check your mambot tag: does it comply to the syntax as described above? Pay attention to the "nota bene's".

Check your mambot-config-settings: does it point to the root folder of the Zoom Gallery directory?

Check the page-source in your browser: does the html look allright?

Do you use the compatible versions of Zoom Gallery and this Zoom Thumb mambot? See below.

Compatibility

Do you use the compatible versions of Zoom Gallery and this Zoom Thumb mambot?

ZoomThumb mambot has been developed using Mambo 4.5.2 together with Zoom Gallery 2.5Beta

Resources

ZoomThumb mambot

You may find more info on Zoom Thumb and the Zoom Thumb Wizard at MamboForge.net :: Zoom Thumb (check the project homepage there for full info).

Zoom Gallery

You may find additional information on Zoom Gallery at MamboForge.net :: Zoom (check the project homepage there for info on beta's).

About the author

Jetze van der Wal: freelance web developer, The Netherlands.

mambo@jetze.com