joomla:header_image:templates

Header Image and Variable Width Templates

This requires Header Image in Version 2.11 or above.

Variable Width Templates usually have 2 buttons allowing to show the Frontpage in Wide or Narrow format. Involved in that are most commonly 2 different CSS styles (one for the Wide width and one for the Narrow width) that will get applied by a JavaScript function of the template when choosing one of the available Widths.

When using the Slideshow of Header Image, that template behaviour may bring difficulties as the modules Slideshow script will be unaware of a width change of the template. Thus causing slideshow images to be possibly out of Width in such templates when being switched between the Widths.

For correct Image sizing after a width change, that requires notification of Header Image and its Slideshow and preparation of the Template:

Get the Full MooTools library

Always use the full mooTools library when using Header Image with these adaptations for Variable Width templates. Download the mooTools library here at the mooTools Homepage and use all Components, in other words get the complete library.

Copy the mooTools library into your templates directory and add it manually to your templates index.php, ensure that the path is actually directing to the location of the library in your Joomla! installation:

index.php (of your template)

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

Prepare the Module

In your Header Image modules settings:

Tell the module that you have the mooTools library included in your template and that there is no need to load it twice:

Tell the module to detect the image size from the Template:

Define a Module Class Suffix:

In this example we will use headerimage.

Prepare your CSS files

Typically the template's directory structure of a Variable Width Template will show two CSS files handling the differing styles for the widths. For example:

  • 800.css …defining styles for the narrow width
  • 1024.css …defining styles for the wide width
Above CSS file names are popular used, however may differ on your particular template.

In both of these files additional style definitions for the images of Header Image are required to be made, the values for width and height may to be different for your particular template:

800.css

/*THIS CONTROLS THE WIDTH OF THE HEADER IMAGE MODULES OUTPUT*/
body.bodyfluid .headerimage img {width:776px;height:200px}

1024.css

/*THIS CONTROLS THE WIDTH OF THE HEADER IMAGE MODULES OUTPUT*/
body .headerimage img {width:967px;height:200px}
We are using here the same Module Class Suffix for the Style as previously defined in the Modules settings. Usually the width of the BODY is changed in such templates, so we advise to bind the Module Class Suffix to the BODY as shown in the examples.

Prepare your Template

In your template file, make sure that the Module Position - in which the Header Image module is published - is integrated in your templates index.php file as followed. In this example the Header Image is being published in the user3 position:

index.php (of your template)

<?php mosLoadModules ( 'user3',-2 ); ?>

By using the -2 parameter we will tell Joomla! to only include the Modules Output without any wrapping tags.

For more on this, please also see Module Template Embedding.

Modify your Style Switcher Script

Switching between widths is typically performed by a JavaScript. That script requires modification and implementation to fire the onStyleChange event, which will instruct the modules Slideshow script of a template style change.

To instruct the Slideshow of Header Image to restart in a changed template, the following Event is to be triggered: 

/* ---Modification-Start--- */
/* This fires the Event of the Header Image Slideshow to notify it of a Style Change */
 
	document.body.fireEvent('onStyleChange');
 
/* ---Modification-End--- */

Here are now some Style Changer scripts we came accross with the respective code changes. Look for one of these scripts in your template directory.

In case your template has differing scripts from the ones shown here, we offer to perform that change for you against Donation. More on that on our Open Source Support Page.
stylechanger.js
function setWidth(width){
	d=new Date();
	flash=Math.round(Math.random()*d.getTime());
	if(width != "Fixed"){
	  document.body.className = 'bodyfluid';
	  currentStyle = "Fluid";
	}else{
	  document.body.className = '';
	  currentStyle = "Fixed";
	}
 
/* ---Modification-Start--- */
/* This fires the Event of the Header Image Slideshow to notify it of a Style Change */
 
	document.body.fireEvent('onStyleChange');
 
/* ---Modification-End--- */
 
}