Randomising content

Randomising content

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.


The next line of code creates the random integer.

HTML:
<xf:set var="$int" value="{{ ($xf.time % 3) + 1 }}" />

There are only two components here which are important.

The first is $int which is the name you are assigning to the variable.
It can be anything you like.

The second is the 3 in ($xf.time % 3).
That value must match the number of banners you are going to be rotating between.

The randomness comes from the server time, which is called via $xf.time.


Finally, we display the banner using:

HTML:
{$banner.{$int}}

The $banner. needs to match the naming convention you used for the images (including any separator), and the $int needs to match the variable name set in the previous line of code.


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>

<xf:set var="$int" value="{{ ($xf.time % 3) + 1 }}" />

{$banner.{$int}}

banner_code.png



Each page refresh will now display one of the three banners with the appropriate links, styling, etc.

example.png


xenforo.png


bbc_news.png
  • Like
Reactions: Anomandaris
Top