All Settings explained

Header Image is highly configureable, here are the individual settings described. For individual applications there are no strict rules, so it is advised to first think about the intended result and then to see which parameters and settings in combination will render the results wished for.

Determines how files shall get selected, the options are:

Always will display the default file, regardless of the current detected content context.

This will go through all the available Header Image files in the Default Folder and select the file that is scoring highest in its ID's to the detected context of the current shown content. Every match of one of the supported ID's between filename and context scores 1 point. The file with the highest score amongst all will get selected by the module as the Header File.

In case there is no scoring file found, the further settings determine if the Default File or a Random File shall be used instead.

Has the module found a scoring Header File and the settings call for a slideshow, the module will look for files with a sequence number to the selected files name to form the pool of files for that slideshow. This score based selection also allows a minimum and maximum accepted score to get used, read more on this here at Smart select scoring range.

Entering a range here in form of min|max will limit the scoring range of the Smart selection of files to this given values. Standard is '0' which means any scores apply. When setting only one value ('min' or 'max') ommit the other value and still use the '|' as delimieter.

Examples:

• 3| … sets the minimum score to 3, all below will revert to the Default File
• 2|4 … sets the score are to be between 2 and 4, all below or above will revert to the Default File
• |3 … sets the maximum score to 3, all above will revert to the Default File

This option allows to lock in to specific matches, for instance to single Categories or single Sections. The following example shows how to lock in to Category ID's only when using only Category related files:

Example:

himg_c10.png      ... Image for Category #10
himg_c12.png      ... Image for Category #12
himg_default.png  ... Default Image

For above files and to lock in to only Categories use 1|1 as the minimum and maximum score, that will render the result that only files with exact matches to the current Category or otherwise the default file will get selected. When adding Section relevant files (e.g. himg_s9.png for a Section #9) then such will also generate the same score as the other files of our example. So when some content is within the Category #10 and Section #9 for that particular case it will create 2 concurrent files with the same score leading to a random selection amongst those. To circumvent this, add the Section ID to the filename of the related Category to increase its score resulting in himg_c10s9.png. Adjust any scoring range accordingly to that.

This determines what type of HTML code the module shall generate, the options are:

Creates a IMG Tag with the selected Image or File. Use this for static images and any slideshow thereof.

The module will use files. Either image files with the extension defined in the later parameter, or any type of file if you define the wildcard “.*” as the file extension. By default, all files are treated as image files and the respective IMG tag is sent to the browser.

Only creates the files URL and is useful to use images as a table background or in other HTML construct where only the URL of the files is sufficient.

For this to work correctly please note the following preconditions:

• Joomla 1.0: Only use Header Image in the Module Position used for the background, no other module as only the output of Header Image is needed.
• Joomla 1.5: Publish Header Image to a module position not used in the template, e.g. User 9.
• See the following examples to use it for backgrounds…

Example:

To dynamically change the background of a table cell use the following in your “index.php” template file.

/*
* This assumes that the module is published to the "header" position
*/
 
<td background="<?php mosLoadModules ('header',-1); ?>">
   Some Table Cell
</td>

<td background="<jdoc:include type="module" name="headerimage_ce" />">
   Some Table Cell
</td>

<td background="<jdoc:include type="module" name="headerimage" />">
   Some Table Cell
</td>

Sets the module to use the HTML Code and by putting any HTML Code into the HTML Code area below, other media files instead of images will get supported. Use of special tags within that HTML Code will mark the placeholder where the module will insert its data.

In this setting the Module will only use the URL of the selected image.

Example:

See the FAQ for a example how to include a Flash Media File.

Sets the module to use the HTML Code and by putting any HTML Code into the HTML Code area below, the output of the Image may be modified. Use of special tags within that HTML Code will mark the placeholder where the module will insert its data.

Use this setting when wanting to include Content Items with the selected Image or Slideshow. See above for the placeholders to get used in the HTML Code Area.

In this setting the Module will use the full <IMG> Tag of the selected image or slideswhow.

When using this setting, together with {content}, {introtext} or {fulltext} tags in the HTML Code Area, Header Image allows to automatically create a compilation of the image and any correlated content item. To correlate a content item to a single image from the pool of images Header Image shall use, just put the image file name (including its extension, without path) into the Title Alias (Joomla 1.0) or Alias (Joomla 1.5) of the content item to be correlated to that specific image:

Examples:

{introtext}
#__image
{fulltext}

{introtext=45}
#__image

Here any type of HTML file or PHP script may get included by the module. As the PHP scripts are being executed as part of the Joomla! Framework, all of the Joomla! API is available to any PHP script.

Supported file extensions are: .htm, .html, .php

Allows to use the HTML Code area to create a custom output. In this setting the tag for the Image will be replaced with the content of a .html or .php file. Be sure to also follow the guidelines of Insert code of HTML file or PHP script above.

See also this FAQ Item for more on using this feature...

Sets image selection options for displaying static images or generating a slideshow from a pool of static images. A Slideshow Pool consists of the selected Header Image of the current context plus all sequence files to the selected file.

Disables any slideshow and displays only the static image. Please also select this option when using HTML or PHP files with Header Image.

This will select only one static image out of the current slideshow pool of files and will display the randomly selected file.

This setting will enable the slideshow feature with all the files of the slideshow pool.

Defines the time in seconds for each image to stay hold and shown between transitions.

Defnes the time in seconds a single transition between images shall take.

Defines a maximum number of loops for the slideshow on which it will stop on the first image of the slideshow pool. Use '0' for allowing the slideshow to loop indefinitely.

2

To count the loops at the last image, and therefore to stop a loop limit with the last image, enter the + sign after the number of loop limits.

2+

Sets if the images shall be shown in random order or in file order detemined by the sequence number of files.

Select any of the available transition type of effect to apply as the transition effect between single images.

When using any of the 'Zoom' effects it is adviseable to have a smaller image area than the size of the images such that the Zoom effect becomes noticeable. Image transition effect In addition to the transition type more effects may be added. These effects mostly determine the In- and Out-Effects during the transition.

Select one of the options to size the slideshow area, that is the Width & Height of the visible image area for the slideshow. Either use the autmomatic modes, or enter a manual size for Width and Height below.

Here set the default folder, relative to the Joomla! installation directory where the Header Image files will reside. Never use a leading slash on this folder, only a relative folder to the Joomla! installation directory is supported.

templates/my_joomla_template/images/header

The Commercial Unlimited Edition allows to use a tag for the Folder of the current template. Use {template} anywhere in the Folder Name and the module will replace this Tag with the Name of the current template:

/templates/{template}/images/header

Allows localization or multi-language Header Image files when set to 'Yes'. The options allow for use of the 2-letter or 4-letter ISO language code of the site and this feature requires JoomFish to be part of your Joomla! installation.

See also Multi-Language for how to set the directory structure to use localized files with Header Image.

Here the prefix to all Header Image files and their file extension is to be set. Only use ONE file extension (for example .png), Wildcard .* is allowed as extension for Files to allow any type of file.

Any Filename Prefix is allowed, however for easier readability of filenames add a underscore to the filename prefix such that any context IDs will be separate from the Filename Prefix.

Example:

headerimage_

There are special extensions that mark files for internal use for Header Image and are only used for special purpose as described here. And these are: .caption.html, .image.html, .tooltip.html

This function allows to filter files according to the currently used component that shows content.

Joomla! uses different components for display of content, such as com_frontpage for the frontpage, com_content for any other content or other components as com_docman for the Doc-Man file repository and so forth. This filter allows the following settings:

Does simply turn this feature off.

This option will add the current detected component with a underscore to the File Prefix. All remaining of the File Name remains as per the Filenaming Convention described here in General overview and Guide.

Example:

himg_com_frontpage...
himg_com_glossary...

This allows creating subfolder structures with the individual component name and placing files there to be used when that component is currently working for the actual visitors content production.

Example:

header_images\com_frontpage\.... for images or files on the frontpage only.
header_images\com_content\.... for images or files of content.
header_images\com_glossary\... for images or files of the glossary component.

This setting also allows to use component specific default files. Lets assume the default file name is set to himg_default.png then each component specific folder may contain a such named default file that is selected once there is a context related file missing.

Example:

header_images\com_frontpage\himg_default.png .... a default file for images or files on the frontpage only.
header_images\com_content\himg_default.png .... a default file for images or files of content.
header_images\com_glossary\himg_default.png ... a default file for images or files of the glossary component.

Component specific subfolders may also be used with Multi-Language Localization, in such case the localization folder is of higher level than the component specific folder.

Example:

header_images\en_en\com_frontpage\.... for images or files on the frontpage only and in Language English (English).
header_images\en_en\com_content\.... for images or files of content and in Language English (English).
header_images\ge_de\com_glossary\... for images or files of the glossary component and in Language German (Deutsch).

This setting determines when and how to use a default file once if there is no file relevant to the current context found.

Will suppress any output of the module on missing context files, the module will simply show nothing.

Will use the file named below in 'Name of Default File' as default on missing context files.

Will use the file named below in 'Name of Default File' as default on missing context files and unconditionally on the Frontpage (the Home Page) of the site.

Joomla allows to define a image in the details of each defined Category or Section. With this setting - in case no nearer image was found - the image defined in the Category or Section is used. In case there is no such image defined in the current shown Category or Section, any output is suppressed.

These images are stored in the images/stories folder of your Joomla Installation. This setting also allows to use the Slideshow feature for the Category or Section images. Use the sequence number for the files stored there to indicate the images to be added to the slideshow pool as defined in the File Naming Convention:

images/stories/article.jpg     ... One of the images used for a Section or Category
images/stories/article_001.jpg ... Use for a slideshow with above image
images/stories/article_002.jpg ... Use for a slideshow with above image

Same as the above “Yes, use image defined for Category or Section, or none” option. In case there is no such image defined in the current shown Category or Section, the defined Default Image is used.

This is the full filename of the Default File, which will looked for and displayed in case there is no nearest match found within the context relevant files. Always use a full filename with extension here. For the path to this file, the Default Folder location is used.

Example:

headerimage_default.png

This is the alternate Text used in the IMG tag. Enter any Text and this alternate Text applies to all static images and to all images of a slideshow if configured.

For making this text in multiple language for multi-language support together with JoomFish, define the text in this form:

<2-Letter Language ISO Code>=<The text in that language>|<another 2-Letter Language ISO Code>=<The text in another language>

Example:

en=Hello World...|de=Hallo Welt...

Aditionally to a single default file, that is selected upon missing context related files, a random file may also be choosen from a pool of Random Default Files.

Select “Yes” to let the module select a random default file, “No” otherwise.

Define the folder relative to the Joomla! installation directory where these random files will reside. It is suggested to use a different folder than for the default folder, however combining them is possible too. That would lead to that the module will use the default folder for selecting a random file from there.

The Commercial Unlimited Edition allows to use a tag for the Folder of the current template. Use {template} anywhere in the Folder Name and the module will replace this Tag with the Name of the current template:

/templates/{template}/images/random-header

Sets the number of random images to select for building a slideshow pool with them. Requires that the Slideshow Feature is fully setup and activated.

Here are some options available that influence the output of the module:

Header Image supports Tool-Tips by filling the 'title' of the generated IMG HTML tag.

Example:

<img src="..." title="This is my Tooltip">

The content of the 'title' option requires to be in a text file, named as the image file it shall relate to and using the file extension of .tooltip.html

Example:

himg_ci43c3s5.png            ... This is one context related image file
himg_ci43c3s5.tooltip.html   ... This is the corresponding file containing the tooltip content

With this option set to “Yes”, Header Image will look for .tooltip.html files and insert its content into the 'title' tag option of its output.

The module comes with 2 alternative tooltip scripts. One is targeted to show tooltips for the images handeled by Header Image only, and one is targeted to show tooltips of the whole site whereever a HTML Tags 'title' attribute is set.

Example:

<img src="..." title="This is a tooltip to a image">

For more on styling the tooltips, see below at “Tooltip CSS Class” for more on that.

The individual settings are:

A short JavaScript is added to the modules output showing a tooltip whenever a module selected image or slideshow has associated tooltip files with it. Requires “Automatically load Tool-Tips” to be set to “Yes”.

Here the module will only fill the “title” attribute of its generated output with the content of any tooltip files. See “Automatically load Tool-Tips” above for more on this.

Here the module will include a JavaScript? library that in combination with mooTools will display tooltips on all HTML tags which 'title' attribute is filled with content. That also includes output of Header Image and associated tooltip files.

Together with setting Output Mode to Use HTML Code, this here is the place where to put your custom HTML Code that shall be sent to the browser by the module. That may be any code, for example to embed objects such as Macromedia Flash.

See also the Frequently Asked Questions for more on how to use this HTML Code field with an example for using Macromedia Flash files instead of static images.

When wanting to use hyperlink anchors together with the Slideshow Function, then please follow these Code Examples.

The rule assignment here allow Header Image to recognize additional content context IDs from other third party extensions. See the Custom ID Rules for more on this.

Date & Time rules allow the module to be active on set dates and times. See the Date & Time Rules for more on this.

See Multiple Instances for more on this.

See Multiple Instances for more on this.

In case you want a different CSS-style applied to this image, then add the respective Module Class Suffix here. Depending on the mosLoadModules parameters used in the Template File for the position of Header Image, this is the suffix that will get added to the Joomla! generated output. Use the resulting complete style in your CSS file to style this modules output.

Tooltip styling is available through this CSS class named here. That only applies when using Header Images script for Tooltips as per preference described above.

When using the built-in Tooltip Script, the following styles allow styling of the tooltip:

<Tooltip CSS Class>-tip    ... The complete tooltip outline
<Tooltip CSS Class>-title  ... The tooltip title, which is usually the URL. Use 'display : none;' in case no title shall be displayed.
<Tooltip CSS Class>-text   ... The tooltip text style.

Example:

When setting ToolTip CSS Class to tooltip the above styles will read as for use in a stylesheet:

.tooltip-tip   { ...some CSS style here... }
.tooltip-title { ...some CSS style here... }
.tooltip-text  { ...some CSS style here... }

This allows to set the z-index Layer for the Slideshow. The default is 100, set the Layer index higher or lower when having layering difficulties with other objects such as CSS Menus. Any type of DOM-Inspector might help to find out the z-index of the conflicting object.

In the Creative Commons License of Header Image, this setting is fixed at 100.

To prevent collisions with other objects which present itself as object changes during slideshow transitions, make sure that any other objects of your site are at a different z-index Layer as the one set here.

Captions are text below the image. Header Image supports caption files, that are HTML files with the filename of its relating image and the extension '.caption.html'.

Example:

himg_ci43c3s5.png             ... some context related image file
himg_ci43c3s5.caption.html    ... the corresponding file containing the caption content

<p class="caption">This is a Caption for the file <i>himg_ci43c3s5.png</i></p>

By setting this preference to “Yes” the module will look for caption files and include their content after the image.

Image Extensions are HTML code files that will extend the images embedding code. These HTML files have the filename of its relating image and the extension '.image.html'. These files allow the use of the module tags Header Image is offering and using them insert runtime specific information, such as the URL of the current selected image file.

Example:

himg_ci43c3s5.png         ... some context related image file
himg_ci43c3s5.image.html  ... the corresponding file containing the image extension code

Inside the Image Extension file, the module specific tags will mark the placeholder for the image. All code in front of this tag will get inserted above the image, all code below after the image.

Example (Some Text around the Image):

<div class="attention">
<b>Some Content before the image here...</b>
</div>
#__image
<font color="red">And some content after the image here...</font>

All HTML code in front of the #__image placeholder will get injected BEFORE the image, all HTML code after the placeholder will get injected AFTER the image. When requiring to have custom HTML code for the image embedding itself, put that code into the Custom HTML Code.

When wanting to use hyperlink anchors together with the Slideshow Function, then please follow these Code Examples.

Header Image uses the MooTools library for all its client side functions, such as the slideshows or inserting captions or image extensions. Either way this library may get loaded directly from the template file, or by Header Image in the version as distributed with the module.

When using Moo-Tools from the template file, make sure that its Version is 1.x or greater and that a full featured library is used. Otherwise Header Image may fail to display its content correctly.

Header Image will load the mooTools library automatically.

The mooTools library is already loaded with the template and MooBot will use that library for its effects plugins.

To load the mooTools libary that is shipped with Header Image through your template, put this into the HEAD section of your templates index.php file:

Example for Joomla 1.0

<head>
 ...
   <script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/modules/mod_header_image/libs/mootools.js"></script>
 ...
</head>

This parameter allows to display Header Image information on its operation. Select the level of debug information most suitable to your issue. In any level of Debug, the module will also display the current detected context and a sample file name in case one has difficulties in retrieving content context and naming files accordingly.

This Debug Information is there to help on Content Context Information for building the file names or to help yourself on undesired results.

Also use the “On (show PHP-Errors)” setting to get any occuring PHP error displayed. This setting may help to find incompatibilities with other scripts or with your PHP version used on your server.