XF 2.0 Rotating background image in 2.0

Bonsai Coder

Active member
One of my customizations in 1.x was to have a rotating background image on my site - every time you would refresh the page you would have a different background image.

This was accomplished by editing the PAGE_CONTAINER template and editing/adding the following code:

Code:
</head>

<xen:set var="$background.1">path/to/background1.gif</xen:set>
<xen:set var="$background.2">path/to/background2.gif</xen:set>
<xen:set var="$background.3">path/to/background3.gif</xen:set>

<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'} style="background-image: url('{xen:raw '$background.{xen:calc '({$serverTime} % 3) + 1'}'}');">
<xen:hook name="body">

(In this example it rotates between three images - but you can edit it for any number) Because of the changes in the 2.0 PAGE_CONTAINER template, I honestly don't know how to make this code work any longer. Any help?
 
I'm having trouble with this code... I think it should work, but it doesn't.

HTML:
<xf:set var="$background.1">styles/default/bn2custom/background1_bn2.jpg</xf:set>
<xf:set var="$background.2">styles/default/bn2custom/background2_bn2.jpg</xf:set>
<xf:set var="$background.3">styles/default/bn2custom/background3_bn2.jpg</xf:set>

<body style="background-image: url('{xf:raw '$background.{xf:calc '({$serverTime} % 3) + 1'}'}');">
 
The equivalent for XenForo 2 is
Find:
HTML:
<div class="p-pageWrapper" id="top">
replace:
HTML:
<xf:set var="$background.1">styles/default/bn2custom/background1_bn2.jpg</xf:set>
<xf:set var="$background.2">styles/default/bn2custom/background2_bn2.jpg</xf:set>
<xf:set var="$background.3">styles/default/bn2custom/background3_bn2.jpg</xf:set>

<div class="p-pageWrapper" id="top" style="background-image: url('{$background.{{ ($xf.time % 3) + 1 }}|raw}');">
 
Last edited:
For the benefit of any members here who want to try this code make sure to add a "/" as the lead element of the path to your image file location for example:

HTML:
<xf:set var="$background.1">/styles/default/bn2custom/background1_bn2.jpg</xf:set>
 
Top Bottom