While the
main resource is good for simple images, logos, etc., it doesn't allow for any unique customisation between the images.
Advertising banners typically link to the advertiser's site and therefore need to have unique image file names, URLs, styling, etc. for each banner.
For that a slightly different approach is required.
We need to create each banner image as a variable, like this:
HTML:
<xf:set var="$banner.1">
<a href="https://www.example.com">
<img src="{{ base_url(('styles/default/images/example.jpg')) }}" alt="Example" style="width:670px; height:140px" />
</a>
</xf:set>
The first line is the important part.
The variable name has to follow the same naming convention as previously explained, in that it has to consist of the same root name, in this case
banner, followed by an integer starting from 1 and increasing in numerical order.
As before, I have added a separator with a period
., just to make the variables easier to read.
The rest of the code is just standard HTML for displaying an image linked to a URL.
You can adjust it to suit.
Again, you will need to upload the banner images to the server and then define the path in the code.
For this example we're going to implement three different banner images, so the code looks like this:
HTML:
<xf:set var="$banner.1">
<a href="https://www.example.com">
<img src="{{ base_url(('styles/default/images/example.jpg')) }}" alt="Example" style="width:670px; height:140px" />
</a>
</xf:set>
<xf:set var="$banner.2">
<a href="https://xenforo.com/">
<img src="{{ base_url(('styles/default/images/xenforo.png')) }}" alt="XenForo" width="340" height="130" />
</a>
</xf:set>
<xf:set var="$banner.3">
<a href="https://www.bbc.com/news">
<img src="{{ base_url(('styles/default/images/bbc_news.png')) }}" alt="BBC News" width="290" height="200" />
</a>
</xf:set>
Note that each variable conforms to the naming standard -
$banner.1,
$banner.2, and
$banner.3.
Again, you can use any naming convention you like.
Next we create the code to call a random image.
This is simply:
HTML:
{$banner.{{ rand(1,3) }}}
The
$banner. needs to match the naming convention you used for the images (including any separator), and the values between the brackets for
rand(1,3) must be 1 for the first value and the second value must match the number of images you are going to be rotating between; in this case 3.
So putting all of that together, this is what we have.
HTML:
<xf:set var="$banner.1">
<a href="https://www.example.com">
<img src="{{ base_url(('styles/default/images/example.jpg')) }}" alt="Example" style="width:670px; height:140px" />
</a>
</xf:set>
<xf:set var="$banner.2">
<a href="https://xenforo.com/">
<img src="{{ base_url(('styles/default/images/xenforo.png')) }}" alt="XenForo" width="340" height="130" />
</a>
</xf:set>
<xf:set var="$banner.3">
<a href="https://www.bbc.com/news">
<img src="{{ base_url(('styles/default/images/bbc_news.png')) }}" alt="BBC News" width="290" height="200" />
</a>
</xf:set>
{$banner.{{ rand(1,3) }}}
Each page refresh will now display one of the three banners with the appropriate links, styling, etc.
