12 | 10 | 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 (module)
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 is a companion module 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.

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.

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

 

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. The Imageloader module 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 sample templates are provided with the module.  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_example32To activate Imageloader in your article place a loadposition xxx specification, where xxx is the module position that you assigned to the Imageloader module (see item 2 in the Installation/Configuration section below) at the point in your article where you wish the thumbnail(s) to appear. 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 module id of the Imageloader module 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.  To do this perform the following:

  • Logon to your administrative backend and bring up the module manager (Extensions | Module Manager menu item).
  • Select  the Imageloader module by locating it in the module list and clicking the checkbox next to the  name.
  • Click on the 'Copy' icon at the top of the page. This will immediately create a new module with the name "Copy of " followed by the name of the Imageloader instance that you copied.
  • Edit the new copy by clicking on the "Copy of " name. This will bring up the Module edit screen.
  • Change the module name to whatever you wish to call this instance of the module.
  • Assign a new Position and Module id.  Change any of the other parameters to suit your purpose.
  • Include this instance of the module on your page in the same manner as described above. (How do I add the images to my article?).

 

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

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 module configuration parameters that must to be provided to tell it how to behave. Installation and configuration information is provided below to help you get started using Imageloader.

Install the module

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

  • 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 module created. You will receive a confirmation that the module 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 module

imageloader_example7Click on the Extensions | Module Manager menu item to bring up the Module Manager screen.  Locate the Imageloader module that you just installed and click on the module name.  This will bring up the Module 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 module.
  • Position: Click in the position window and enter a unique position name that will be associated with this module, 'imageloader' for example.

 

 

 

 

 

Module Id

imageloader_example8

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 'imageloader'.

 

Cascading stylesheet file

imageloader_example9

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 module.  This parameter defaults to the CSS file provided with Imageloader. TIP

Load images from

imageloader_example11

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

  • '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.
  • '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.
  • 'Both' results in images being loaded from both places.

Directory path

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

Strip extension from filename

imageloader_example14

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

Directory depth

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.

Meta data template

imageloader_example16

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

Image list file

imageloader_example18

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

 

Thumbnail width

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.

Thumbnail quality

imageloader_example20a

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

Sharpen amount

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.

Thumbnail display width

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.

Thumbnail display height

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.

Crop thumbnail display

imageloader_example20e

If yes, the thumbnail images will be cropped horizontally and/or vertically depending upon the Thumbnail display width/height parameter values. No, the thumbnails will be fitted into the Thumbnail display width/height dimensions. Default is no.

Image limit

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.

In-page gallery setup

imageloader_example22

Indicates to Imageloader whether the images are intended to be used with the Highslide JS for Joomla 'In-page gallery' preset.  If yes, all images will be hidden from view and predefined values will be used to coincide with the  in-page gallery preset.  Specify no, the default, if you are not using the In-page gallery preset.

Hide all thumbnails except

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.

Number of table cells

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.

Output template

imageloader_example28

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 modules/mod_imageloader/templates directory.  If this parameter is omitted or points to a nonexistant file, the Highslide JS template is used. TIP

Table HTML attributes

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.

TBody HTML attributes

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.

 

PHP memory limit

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.

 

PHP max execution time

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.

 

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.

Last Updated on Monday, 30 April 2012 08:41