Dragonrider Computing

To add rotating header image to Joomla

To add a rotating image to a website built with Joomla 3, the following is one method that works and seems to be repeatable.

First, create your images to a standard size (height and width). Store these in a directory such as images/header/ and call them header#.jpg where # is the number of the image (eg:header4.jpg).

In the Joomla template file, find the <header> tag and add after this the following:

<img style="float-middle"; src="/<?php echo $this->baseurl ?>/images/header/header<?php $random = rand(1,6); echo $random; ?>.jpg" alt="" height="150" width="650" />

Note the rand(1,6) in the code, make the 6 equal to the maximum number of images you have to cycle from. Change the height and width to match your image size and add any alt text you wish. Depending on the template in use, you may be able to use the following:

alt="<?php echo $app->getCfg('sitename'); ?>" title="<?php echo $app->getCfg('sitename'); ?>"

Or

alt="<?php echo htmlspecialchars($this->params->get('sitetitle')); ?>" title="<?php echo htmlspecialchars($this->params->get('sitetitle')); ?>"

Then include the following lines of code in your template, within the <header></header> tags.

<div class="sitename" >
            <h1><a href="/<?php echo $this->baseurl ?>"><?php echo $app->getCfg('sitename'); ?></a></h1>
        </div>

This will write the sitename over the image providing the following CSS is included in your user/template CSS file.

.sitename {
    display: block;
    position: absolute;
    top: 50px;
    left: 35px;
  text-shadow: 6px 4px 4px black;
}

This adds a text shadow to your sitename text. Adjust the position of your text by adjusting the Top and/or the Left values.

Volunteering Ilkley website uses this method.