11 | 19 | 2019
NOTICE: If you intend to use Highslide JS on a commercial website you MUST purchase a license from the author. Please go to Highslide.com for more details.
Imageloader (plugin)
Friday, 05 June 2009 21:14

Introduction

Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky Ptarmigan Ptarmigans Two cabins Patterns in the snow Cabins Old stone cabins A little open water Dipper Dipper Mountains Birch trees Highland woods Frozen lake Spring in the mountains Spring in the mountains Fjord landscape

Slideshow

Imageloader plugin is a companion to Highslide JS for Joomla.  It is designed to mass load images onto a web page from:

  • a directory in your Joomla installation.
  • an image list text configuration file.
  • both of the above.

Imageloader is ideal for loading images for use with Highslide gallery displays.  It eliminates the drudgery of using the JCE HsExpander plugin to create each individual thumbnail/image and affords greater flexibility in changing the contents and look of your gallery.  All of the images used in the slideshow shown here were loaded from a directory with Imageloader.  In fact, all of the slideshow demonstration examples in the Slideshow Gallery Preset Configurations document use Imageloader.

 

Module or Plugin?

Imageloader is available in two forms. A Joomla module or a Joomla content plugin. Both forms are identical in functionality but each have advantages/disadvantages that must be taken into consideration when deciding which to use.

Imageloader module

The biggest advantage of the module form is that the gallery can be placed in any template position on the page, i.e. you are not restricted to article content only.  The disadvantage is that creating new galleries or galleries with different options is more work in that you must create a copy of the module, give it a different module position and change its parameters.

Installation and configuration information regarding the imageloader module can be found in the Imageloader (module) document.

Imageloader plugin

The plugin can be used in article content only, however, creating galleries is much easier in that you only need to edit the desired article and add the imageloader specification line along with any options that you wish to use.  If you are going to be displaying your galleries in articles using a section/category blog format, the imageloader plugin is better suited for that purpose.

 

Frequently Asked Questions

Is a single thumbnail my only choice of display?

No. You can choose to display thumbnails for all images or a single thumbnail of your choice can be displayed.

Click

ClickWhen displaying all thumbnails, you have the option of displaying the images in an HTML table.  You specify how many images that you would like in a table row and Imageloader takes it from there.

If you are adverse to using a table you can elect to have Imageloader just load the images one after the other and let the page dimensions determine where the images are displayed.

 

 

Where do the thumbnails come from and can I make them bigger or smaller?

Imageloader automatically creates the  thumbnail images based upon the Thumbnail width module parameter. The thumbnails are saved in the same directory as the original image with a file name beginining with 'thumb_' followed by the name of the original image along with an alphanumeric key that is generated from the module options used to create the thumbnail.

Click

Click

You tell Imageloader how large you want the thumbnails to be by specifying either a fixed pixel width for all thumbnails or a percentage that is applied against the size of the original image.

 

 

My images have different aspect ratios.  Can the thumbnails be displayed in a more uniform manner?

Yes.  You can specify a thumbnail display width and/or height.   If you omit either of these parameters, the actual width and/or height of the thumbnail image will be used for the omitted parameter.

Click

Click

The thumbnail images can be either fitted or cropped into the display width/height dimensions depending upon the setting of the crop parameter. Cropping the thumbnail maintains the aspect ratio of the image, however, only a portion of the thumbnail may be displayed.  Fitting the image displays the entire thumbnail but the aspect ratio of the image may be distorted.

 

When I activate Imageloader, all I get is a blank page (or I see a Fatal error).

imageloader_example4cIf you get a blank page or see an error similar to the one shown, this is usually an indication that thumbnail generation has failed.  This is most likely caused by an insufficient amount of memory being allotted to PHP for the size of images that you are trying to use.

There are several things you can do.  You can either reduce the size of the images you are using or increase the amount of memory that PHP has to work with.

If your images are quite large, they will not display very well on the web anyway.  Try reducing their size to something more suitable for the web.

If the memory_limit parameter in your PHP configuration is small, 8M for example, try increasing that to alleviate the error.  You can use Imageloader's PHP memory limit advanced parameter (see item 24 below) to try to temporarily override PHP's configured memory limit.

 

So am I stuck with that dull grey background around the thumbnails?

imageloader_example5No. Imageloader is installed with a default cascading stylesheet that sets the appearance of the thumbnails.

You can modify the CSS any way you choose to get the look that you desire.

 

 

 

 

 

 

How do you get captions with images loaded from a directory?

imageloader_example6Imageloader can extract IPTC Photo Metadata from photo images to be used as caption information.  As well, for JPG images, EXIF data can also be used.  A default template is provided that defines the format of the caption and which meta data elements are extracted.  Windows/XP and Vista both provide easy access to the most common meta data elements for display/update purposes.

The EXIF caption capability can be used only if you are using JPG images and if the PHP EXIF library is included in the PHP configuration of your web server.

In the absence of meta data the image filename, with or without the file extension, will be used as the caption for images loaded from a directory.

 

How can I tell if my server has EXIF support?

Logon to your administrative backend.  Click on the Help | System Info menu item.  From the Information page, click on the PHP Information tab. Scroll down the page. If your server has EXIF support you should find a section in the Configuration similar to the one pictured below.

imageloader_example33

 

I can't get PHP EXIF support on my server.  Does that mean I can't have captions?

No.  IPTC Photo meta data does not require that you have EXIF support on your server.  Windows Vista as well as many popular image processing programs support the addition/editing of IPTC meta data.

 

I want to display a caption underneath the thumbnail.  Is that possible?

Yes.  See the 'Adding a caption to the thumbnail' section below for details on how this can be accomplished.

 

Can Imageloader only be used with Highslide galleries?

Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky Ptarmigan Ptarmigans Two cabins Patterns in the snow Cabins Old stone cabins A little open water Dipper Dipper Mountains Birch trees Highland woods Frozen lake Spring in the mountains Spring in the mountains Fjord landscape

Lightbox

No. The HTML that is output for an image is defined in an output template file.  You can create your own output templates to suit almost any requirement.  Several templates are provided with Imageloader.  The slideshow shown on the right, for example, is using the lightbox template for the lknlightbox - Slimbox plugin.  By default, the highslide template is assumed if an output template is not provided in the module parameters.

 

 

How do I add the images to my article?

imageloader_example32a

To activate Imageloader in your article place an imageloader specification (see above) at the point in your article where you wish the thumbnail(s) to appear. You can include any of the available options to tailor the gallery as desired.  To add additional galleries, simply add another imageloader specification with different options. That's all there is to it.

 

How do I assign my images to a Highslide gallery?

imageloader_example34To indicate to highslide that the images loaded by Imageloader are to be assigned to the configured slideshow, specify the value of Imageloader's group  parameter in the slideshow group parameter of the slideshow configuration (see item 3 in the Installation/Configuration section below)

 

 

 

 

 

 

 

 

Can I use Imageloader more than once on the same page?

Yes.  You can have as many instances of Imageloader on a page as you wish.  Just insert another imageloader specification line in the article where you want the gallery to appear.

 

Does my site need to have anything else to use this plugin?

Strictly speaking, no.  However, Imageloader simply loads images onto the page from where you specify.  To produce a slideshow or popups of the images you will need additional software such as:

Use the 'Output template' parameter (see item 21 in the Installation/Configuration section) to tailor Imageloader's HTML output for a particular image display extension.

 

Do I have to pay anything to use Imageloader?

No. Imageloader is released under the GNU/GPL V2 license and can be used on any website free of charge.

 

What if I can't get this thing to work?

Hopefully you will not have any problems using Imageloader. Should a problem arise or if you have any questions, comments or criticisms you can go to the forums here at JoomlaNook for help (registration required).

 

Ok, where can I get a copy of Imageloader?

Imageloader can be downloaded from the JoomlaNook download section, here.

 

End FAQ

 

Installation/Configuration

Imageloader has several configuration parameters that must to be provided to tell it how to behave. The plugin parameters are used as default values if an overriding parameter is not given in the imageloader specification line.  Valid parameter override values are shown below in parenthesis. Override parameters included in the imageloader specification are not case sensitive and may be given in any order with/without separating commas.  Parameter values that contain embedded spaces must be enclosed in single or double quotes, i.e. dirpath="my path/to my/images"

Install the plugin

After downloading the install package, install Imageloader as you would any other Joomla plugin.

  • Logon to the administrative backend of your site and click on the Extensions | Install/Uninstall menu item.
  • From the Extension Manager screen, click on the Browse button in the 'Upload Package File' section.
  • Select the Imageloader install file that you previously downloaded from JoomlaNook.
  • Click on the 'Upload File and Install' button.

That should cause the install package to be loaded on your site and a new content plugin created. You will receive a confirmation that the plugin was installed successfully. NOTE: If you are upgrading to a new version of Imageloader you do not need to uninstall the current version before installing the new version.  This enables you to maintain all your current Imageloader parameter settings when upgrading to a the new version.

 

Edit the plugin

imageloader_example7aClick on the Extensions | Plugin Manager menu item to bring up the Plugin Manager screen.  Locate the Imageloader plugin that you just installed and click on the plugin name.  This will bring up the Plugin edit screen for Imageloader.

In the 'Details' section on the left side of the screen the main settings are:

  • Enabled:  Set this parameter to 'Yes' to enable the plugin.

 

 

 

 

 

Group (group)

imageloader_example8a

Specify a unique HTML id.  This id is used for several purposes:

  • it is specified as the id attribute on an HTML DIV that surrounds all of the loaded images.  This id can be used for CSS styling if desired.
  • for Highslide, it is specified as the 'slideshowGroup' parameter.  If you intend to use the loaded images with a highslide gallery, this value should also be specified as the 'Slideshow group' in the gallery settings.
  • for shadowbox, lightbox, greybox, etc.  this value is used in a similar fashion to group the images for slideshow viewing.

Any valid HTML id can be used as long as it is unique to all other ids on the page.  Defaults to no group.

Override example: group="imageloader"

 

Cascading stylesheet file (cssfile)

imageloader_example9a

If you create your own cascading stylesheet, you can specify a url that points to that file. It will be included in the page at load time instead of the CSS file supplied with the imageloader.  This parameter defaults to the CSS file provided with Imageloader. TIP

 

Override example: cssfile="plugins/content/imageloader/css/mystyles.css"

 

Load images from (loadfrom)

imageloader_example11

This parameter tells Imageloader how it should acquire the images that it is to place on the page.

  • 0 - 'Image list file' indicates that images that you have specified in the text configuration file defined by the 'Image list file' parameter are to be loaded.
  • 1 - 'Directory' tells Imageloader to load the image files contained in the directory that you have specified in the 'Directory path' parameter. All JPG, PNG and GIF images will be loaded.
  • 2 - 'Both' results in images being loaded from both places.

The default is 1 (directory).

 

Override example: loadfrom=0

 

Directory path (dirpath)

imageloader_example12

Specify the directory that images are to be loaded from when using the 'Directory' or 'Both' options for the 'Load images from' parameter. TIP

 

Override example: dirpath="images/stories/myimages"

 

Strip extension from filename (stripext)

imageloader_example14

This parameter controls whether or not the file extension will be removed from the filename when it is displayed as a caption.

  • 0 - No
  • 1 - Yes

The default is 'Yes'.

Override example: stripext=0

 

Directory depth (dirdepth)

imageloader_example15

When displaying images from a directory, Imageloader can include images from any subdirectories that may be inside the main directory.  This parameter controls how deep into the directory path Imageloader should go when including images. The default value of zero indicates that no subdirectory images will be loaded.

Override example: dirdepth=2

 

Meta data template (dirmetadatatemplate)

imageloader_example16a

Provides the path/filename of a template that defines to Imageloader the meta data information that is to be extracted from jpg images loaded using the directory load option.  The template also defines the  format of the caption that is to be displayed.   This parameter defaults to a predefined template that is supplied with Imageloader.  You can create your own template or modify the one supplied with the module.  TIP

 

Override example: dirmetadatatemplate="plugins/content/imageloader/templates/mytemplate.txt"

 

Image list file (imagelistfile)

imageloader_example18a

Defines the location of a configuration text file that you have created to tell Imageloader what images to load onto the page. A functional sample configuration file is supplied with the module at modules/mod_imageloader/samplelist.txt.  A description of the contents of the image list configuration file is provided later in this document. TIP

NOTE: This must be a plain text file. For MAC users using text edit, be sure to select 'Make Plain Text' in the Format menu before saving the file. Another MAC alternative is a free text editor called 'TextWrangler' at http://www.versiontracker.com

 

Override example: imagelistfile="images/stories/myimages.txt"

 

Thumbnail width (thumbwidth)

imageloader_example20

Defines the size of the thumbnail images that are generated and saved in the image source directory.  Enter a percentage to have Imageloader calculate the size of each thumbnail relative to the original image.  In the example above, the thumbnail for each image would be 15% of the original image size.  Alternatively, you can specify a fixed pixel width be used instead.  For example, a value of 100 would generate thumbnails that are all 100 pixels wide.   The thumbnail height will  vary depending upon the aspect ratio of the images.

Override example: thumbwidth=150

 

Thumbnail quality (thumbquality)

imageloader_example20a

Defines the quality of the generated thumbnail image as a percentage of the original image quality. Default is 90%.

Override example: thumbquality="95%"

 

Sharpen amount (sharpenthumb)

imageloader_example20b

Specify the amount of sharpening (0-9) that you wish to apply to the generated thumbnail.  This can enhance the appearance of the thumbnails in some cases. Default is 0, no sharpening.  PHP5 required.

Override example: sharpenthumb=2

 

Thumbnail display width (thumbdisplaywidth)

imageloader_example20c

Specify the width in pixels that is to be used to display the thumbnails.  If omitted, the actual width of the thumbnails will be used.  In the example above, all thumbnails will be displayed with a width of 100 pixels.

Override example: thumbdisplaywidth=150

 

Thumbnail display height (thumbdisplayheight)

imageloader_example20d

Specify the height in pixels that is to be used to display the thumbnails.  If omitted, the actual height of the thumbnails will be used.  In the example above, all thumbnails will be displayed with a height of 100 pixels.

Override example: thumbdisplayheight=150

 

Crop thumbnail display (cropthumb)

imageloader_example20e

  • 0 - No, the thumbnails will be fitted into the Thumbnail display width/height dimensions.
  • 1 - Yes, the thumbnail images will be cropped horizontally and/or vertically depending upon the Thumbnail display width/height parameter values.

Default is no.

Override example: cropthumb=1

 

Image limit (imagelimit)

imageloader_example21

When loading images from a directory, you can specify a maximum number of images to load. If omitted, all qualifying images in the directory will be loaded.

Override example: imagelimit=20

 

In-page gallery setup (inpagegallery)

imageloader_example22

Indicates to Imageloader whether the images are intended to be used with the Highslide JS for Joomla 'In-page gallery' preset.

  • 0 - no, the default, indicates that you are not using the In-page gallery preset.
  • 1- yes, all images will be hidden from view and predefined values will be used to coincide with the  in-page gallery preset.

Override example: inpagegallery=1

 

Hide all thumbnails except (hideoption)

imageloader_example23

Defines a single thumbnail that you wish to be displayed on the page.  When specified, all other loaded images  will be hidden from view.  The value given can be

  • a number  to indicate which thumbnail is to be visible.  Zero (0) for the first image, one (1) for the second, etc.
  • If your server has PHP EXIF library support, you can specify a non-numeric value that Imageloader will use to examine the 'KEYWORDS' EXIF field of jpg images.  The first image with a matching 'KEYWORDS' EXIF element will be visible.  This enables you to designate that a  particular image be  the visible image regardless of where it falls in the image ordering.  XP TIP, Vista TIP

If no value is specified, thumbnails for all loaded images will be visible on the page. This parameter is overriden by the 'In-page gallery setup' parameter.

Override example: hideoption="show"

 

Number of table cells (cellcount)

imageloader_example27

Specify a number indicating how many thumbnails you wish displayed horizontally in a table row.  If omitted, a table will not be used to display the thumbnails.

Override example: cellcount=6

 

Output template (outputtemplate)

imageloader_example28a

This advanced parameter defines the default output template file that is to be used. An output template is a text file that contains a skeleton HTML format. The skeleton HTML has variable information that is filled in by Imageloader at page load time.  For each image being loaded on the page, Imageloader replaces the variables with information about the image such as image file name, captions, etc. and then outputs the finished HTML onto the page. This enables Imageloader to be adapted to any number of image display scripts, such as Shadowbox, Highslide JS, Lightbox, etc.  Several output templates are provided with Imageloader in the plugins/content/imageloader/templates directory.  If this parameter is omitted or points to a nonexistant file, the Highslide JS template is used. TIP

 

Override example: outputtemplate="plugins/content/imageloader/templates/lightboxtemplate.txt"

 

Table HTML attributes (tablehtml)

imageloader_example30

This advanced parameter allows you to specify HTML attributes for the table element when a table is used to display the images.  This parameter is ignored if 'Number of table cells' is not specified.  Any valid table attributes can be given.  Caution: this specification is placed in the table element without regard for correctness. Take extreme care to provide only valid attribute specifications. A description of the HTML table element can be found on the W3Schools.com website.

Override example: tablehtml='cellspacing="4"'  Note: single quotes must be used to enclose a value containing double quotes.

 

TBody HTML attributes (tbodyhtml)

imageloader_example31

This advanced parameter allows you to specify HTML attributes for the tbody element when a table is used to display the images.  This parameter is ignored if 'Number of table cells' is not specified.  Any valid tbody attributes can be given.  Caution: this specification is placed in the tbody element without regard for correctness. Take extreme care to provide only valid attribute specifications. A description of the HTML tbody element can be found on the W3Schools.com website.

Override example: tbodyhtml='align="center"'  Note: single quotes must be used to enclose a value containing double quotes.

 

PHP memory limit (phpmemorylimit)

imageloader_example31a

When using very large images you may encounter a case where just a blank page is displayed instead of the gallery that you expected.  This is usually caused by the PHP memory_limit parameter being too small to support thumbnail generation of the images that you are using..

Imageloader estimates the amount of memory required for thumbnail generation and if it determines that the PHP memory_limit being used is insufficient, tries to override that setting for the duration of the thumbnail creation process.  If successful, you will never need to use this parameter.  However, it is not always possible to perform the override because the PHP functionality needed may not available depending upon how your version of PHP was created.

This advanced parameter can be used to try to temporarily override the PHP memory_limit parameter. The value you specify here is the same  as what you would use for the memory_limit parameter in the php.ini file. For example, 32M would indicate a memory limit of 32 megabytes.

Override example: phpmemorylimit="32M"

 

PHP max execution time (phpmaxexectime)

imageloader_example31b

If you receive an error message indicating that the maximum execution time has elapsed when displaying a page with Imagealoader, you can temporarily increase the amount of time that Imageloader has to generate thumbnail images with this parameter.  Specify a number of seconds.  For example, the PHP default value is 30. Increase it to 45 or 60.

Override example: phpmaxexectime="45"

 

End FAQ

The Image List File

In its simplest form, the image list file is a text file containing a list of img= specifications, one for every image to be loaded on the page.  Consider the three images and the subsequent image list file shown below.

My title 1 My title 2 My title 3
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
//
//    Simple Imageloader images list
//

//
//    image definitions
//

img = "modules/mod_imageloader/images/thumbstrip20.jpg"     &
    imgalt="My title 1"                                     &
    caption="My caption for image 1"                        &
    hreftitle="My href title 1"                             &
    imgtitle="My img title 1"

img = "modules/mod_imageloader/images/thumbstrip23.jpg"     &
    imgalt="My title 2"                                     &
    caption="My caption for image 2"                        &
    hreftitle="My href title 2"                             &
    imgtitle="My img title 2"

img = "modules/mod_imageloader/images/thumbstrip24.jpg"     &
    imgalt="My title 3"                                     &
    caption="My caption for image 3"                        &
    hreftitle="My href title 3"                             &
    imgtitle="My img title 3"

If you hover over and/or click on the images you can see that the titles and captions specified in the image list file were included in the resulting slideshow.

Comments

Any line that begins with 2 slashes is considered a comment by Imageloader and is completely ignored. Comment lines allow you to document areas of the image list file and to temporarily remove image definitions without actually deleting them.

Image definitions

An image definition consists of a number of keyword/value pairs and takes the general form of:

keyword1 = "value1" keyword2 = "value2"....

  • The image definition can be specified on a single line or, for readability, can be broken into several lines by specifying an ampersand at the end of each line that is to be continued onto the next.
  • Keywords are case insensitive, i.e. IMG is the same as img.
  • The only required keyword is the 'img' specification. It defines the image that Imageloader will load on the page and must be present or the entire specification will be ignored.
Additional keywords, beyond the img keyword, are defined by the output template that is being used by Imageloader to generate the required HTML output for the image. To illustrate this, the default output template used for the demo, highslidetemplate.txt, is shown below:
  1 
  2 
  3 
  4 
  5 
  6 

  7 
  8 


  9 
 10 


 11 


//
//    output template suitable for Highslide JS
//        The following parameters will be inserted into the resulting output:
//            {img} = URL of the image
//            {hreftitle} = title specification from imagelistfile
//            {imgalt} = image alt specification from imagelistfile or filename 
  if loading from a directory
//            {imgtitle} = image title specification from imagelistfile.
//            {_group} = used to restrict next/prev navigation to images in a 
  particular gallery instance.  Module id is automatically used if not specified
  otherwise.
//
<a class="highslide {_hideclass}" id="{_anchorid}" href="{img}" title="
  {hreftitle}" onclick="return hs.expand(this,{slideshowGroup: '{_group}', 
  captionText: '{caption}', thumbnailId: '{_thumbid}' })">
<img  class="imageloader_image" alt="{imgalt}" src="{_thumbimg}" title="
  {imgtitle}" id="{_id}" style="width: {_thumbwidth}px; height: 
  {_thumbheight}px;{_styles}" /></a>

Notice that keywords specified in the image definition (img=, hreftitle=, etc.) match variable values in the output template ({img}, {hreftitle}, etc). Imageloader simply substitutes the value that you specify for each keyword into the output template.  After all variables are substituted the final HTML markup is output to the page. For example, the resulting HTML for the first image definition above is as follows:

 1 






<a class="highslide " id="imageloadersimple_anchor_0" href="
  /modules/mod_imageloader/images/thumbstrip20.jpg" title="My href title 1" 
  onclick="return hs.expand(this,{slideshowGroup: 'imageloadersimple', 
  captionText: 'My caption for image 1', thumbnailId: '' })"><img  class="
  imageloader_image" alt="My title 1" src="/modules/mod_imageloader/images/thumb
  _thumbstrip20_jpg_2721b205ea0adf1e1ba60c976db6bbd7.jpg" title="My img title 1"
  id="imageloadersimple_image_0" style="width: 90px; height: 60px;" /></a>

The output template contains several variables that are automatically filled in by Imageloader depending upon the Imageloader module parameters that you specify.  These are internally generated variables that are prepended with an underscore so as to not clash with any variables that you may define. They are:

  • {_hideclass} a CSS class that hides the display of the containing element.
  • {_anchorid} is a unique id assigned to the anchor tag by Imageloader.
  • {_group} is the module id that you assigned to the module.
  • {_thumbid} is the id of the visible thumbnail when only one thumbnail is displayed.
  • {_thumbimg} is the url of the generated thumbnail image.
  • {_thumbwidth} is the display width of the thumbnail image
  • {_thumbheight} is the display height of the thumbnail image
  • {_id} is a unique id assigned to the thumbnail image by Imageloader.
  • {_styles} are additional styles that may be supplied by Imageloader depending upon parameter settings.
  • {_filename} is the name of the image file.

These variables can be ignored for the purposes of creating an image list file, however, if you are creating your own output template you may need to include these in your template wherever feasible.

Adding a caption to the thumbnail

Mountain Valley

Mountain Valley

Windy landscape

Windy landscape

Sunset in the mountain

Sunset in the mountain

Resting skier

Resting skier

Contemplating dog

Contemplating dog

Cabins

Cabins

Dark skies in sunny landscape

Dark skies in sunny landscape

Blue sky

Blue sky

Ptarmigan

Ptarmigan

Ptarmigans

Ptarmigans

You can add a caption to the thumbnail display, as shown in the gallery above, by modifying the output template file being used.  Though not required, this method works best when you have constrained both the width and height of the thumbnail display, i.e. you have specifed both a fixed thumbnail display width and thumbnail display height.  In the example, the highslide template was modified to add the caption information as shown below.

 1 

 2 


 3 


 4 
<div class="{_hideclass}" style="float: left;width: 130px;height: 154px;padding:
  2px;text-align: center">
<a class="highslide" id="{_anchorid}" href="{img}" title="{hreftitle}" onclick="
  return hs.expand(this,{slideshowGroup: '{_group}', captionText: '{caption}', 
  thumbnailId: '{_thumbid}' })">
<img  class="imageloader_image" alt="{imgalt}" src="{_thumbimg}" title="
  {imgtitle}" id="{_id}" style="width: {_thumbwidth}px; height: 
  {_thumbheight}px;{_styles}" /></a>
<p style="font-size: x-small;margin: 1px 0px 5px">{imgalt}</p></div>

The template above was created by copying the highslidetemplate.txt file and adding lines 1 and 4. These lines create a DIV element around the normal thumbnail that is displayed.  Inside the DIV is a paragraph containing the caption information.

In the example, Imageloader was configured to display a 100x100 pixel thumbnail.  In the output template, the DIV is sized accordingly by specifying a hardcoded width and height in the style= parameter (130x154).  The height of the DIV must account for both the thumbnail and the caption that is to be displayed.  These values will vary depending upon the thumbnail display size that you have configured, font size, amount of text in the caption, etc.

This example used a copy of the highsidetemplate.txt file, however, the same technique can be used with any of the available output templates.

More Image List File

The three images shown below were loaded using the samplelist.txt image list file that is installed with Imageloader, also shown.

My title 1 My title 2 Fjord landscape
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 

 17 
 18 

 19 

 20 

 21 

 22 

 23 
 24 

 25 

 26 

 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 

 39 
 40 
 41 
 42 
 43 
 44 
 45 

 46 
 47 
 48 
 49 
 50 

//
//    Imageloader images list
//

//
//    file path variable definitions
//
$baseurl0        =    "modules/mod_imageloader/images/"

//
//    caption and comment variable definitions
//
@metaauthor            =    "$author, IPTC.2#080, IFD0.Artist, IFD0.Author"
@metacomments        =    "$comments, IPTC.2#120, IFD0.Comments"
@metatitle            =    "$title, IPTC.2#005, IFD0.Title, $_filename"
@metadate            =    "$datetime, IFD0.DateTime, EXIF.DateTimeOriginal, 
  IPTC.2#055"
$title                =    '<div class="imageloader_title">{metatitle}</div>'
$author                =    '<div class="imageloader_caption_author">Author: 
  {metaauthor}</div>'
$comments            =    '<div class="imageloader_comment">: {metacomments}
  </div>'
$captioncomments    =    '<div class="imageloader_caption_comments">
  {title}{comments}</div>'
$datetime            =    '<div class="imageloader_caption_datetime">Date: 
  {metadate}</div>'
$caption            =     '<div class="imageloader_caption">
  {captioncomments}{author}{datetime}</div>'
$divtitle            =    '<div class="imageloader_title">{mytitle}</div>'
$divcomments        =    '<div class="imageloader_comment">: {mycomments}</div>
  '
$mycaptioncomments    =    '<div class="imageloader_caption_comments">
  {divtitle}{divcomments}</div>'
$mycaption            =     '<div class="imageloader_caption">
  {mycaptioncomments}{author}{datetime}</div>'

//
//    image definitions
//

//
//    using my title and comments
//    combined with meta author and date
//
$mytitle       =    "My title 1"
$mycomments    =    "My comments for image 1"
img =    "{baseurl0}thumbstrip20.jpg" imgalt="{mytitle}" caption="{mycaption}" 
  hreftitle="{mytitle}" imgtitle="{mytitle}"

//
//    example using my title and comments only
//
$mytitle       =    "My title 2"
$mycomments    =    "My comments for image 2"
img =    "{baseurl0}thumbstrip23.jpg" imgalt="{mytitle}" caption="
  {mycaptioncomments}" hreftitle="{mytitle}" imgtitle="{mytitle}"

//
//    example using metadata exclusively
//
img =    "{baseurl0}thumbstrip24.jpg" imgalt="{metatitle}" caption="{caption}" 
  hreftitle="{metatitle}" imgtitle="{metatitle}"

Variables

A variable definition is denoted by a dollar sign preceding the alphanumeric variable name and takes the general form of:

$variablename = "definition data"

Multiple definitions can be included on a single line. The variable name is case insensitive, i.e. {BASEURL0} is the same as {baseurl0}.

Variables provide a shorthand way of specifying information that can potentially change. File paths and URLs are especially suited for this. If at a later time the information changes, all you need do is change the variable and any line using that variable automatically changes. In the example above, the first variable defined is named $baseurl0 (line 8). It is assigned the value "modules/mod_imageloader/images/". Once defined, the variable can be used in any line by specifying the variable name surrounded by brackets, i.e. {baseurl0}. The first IMG definition (line 42) uses this variable as follows:

img = "{baseurl0}thumbstrip20.jpg"

This is equivalent to the following:

img = "modules/mod_imageloader/images/thumbstrip20.jpg"

EXIF data

If your server supports the PHP EXIF library, you can choose to include exif data in combination with or instead of your own captions.  In the samplelist.txt file above, lines (10-30) define variables for exif data elements and variables containing HTML DIV information.  The sample illustrates 3 different ways that captions and exif  information can be combined to produce the caption.

http://www.joomlanook.com/index.php?option=com_content&view=article&id=87:image-loader&catid=34:highslide-js-for-joomla&Itemid=59
Last Updated on Friday, 25 February 2011 07:41