Header Image and Variable Width Templates
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:
<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 width1024.css
…defining styles for the wide width
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:
/*THIS CONTROLS THE WIDTH OF THE HEADER IMAGE MODULES OUTPUT*/ body.bodyfluid .headerimage img {width:776px;height:200px}
/*THIS CONTROLS THE WIDTH OF THE HEADER IMAGE MODULES OUTPUT*/ body .headerimage img {width:967px;height:200px}
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:
<?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.
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--- */ }