XF 2.2 How to combine two Xenforo variables !?

valdet

Active member
I have a pretty basic image rotator in a sidebar widget which pulls images on a random order through the rand(1,20) function.
It is very similar to this Xenforo resource

HTML:
<xf:set var="$image.1">image1.jpg</xf:set>
<xf:set var="$image.2">image.2.png</xf:set>
<xf:set var="$image.3">image3.jpg</xf:set>
<xf:set var="$image.4">image.4.png</xf:set>

I display them on the widget by a simple call as below

HTML:
<div><img src="{$image.{{ (rand(1,20)) }}|raw}" /></div>

What I would like to know is how can I add a second variable, so when combining them I know which image was pulled.

The second variable can be simple as below
HTML:
<xf:set var="$random">{{ (rand(1,20)) }}</xf:set>

In this scenario I would like to combine these two variables (and maybe add the 2nd variable in a title attribute.

However combining them like this or any variations does not work
HTML:
<img src="{$image.$random|raw}" />



How can I make it work, so depending on which number was pulled from the rand(1,20) function, the img would be like below

HTML:
<img src="{$image.$random|raw}" title="Image ($random)" />
 
Last edited:
Solution
Ok, so if any other visitor finds this useful, here's the solution

The variables
HTML:
<xf:set var="$random" value="{{ rand(1,20) }}" />
<xf:set var="$image.1">image1.jpg</xf:set>
<xf:set var="$image.2">image2.jpg</xf:set>
.
.
.
<xf:set var="$image.20">image20.jpg</xf:set>

Template
HTML:
<div class="sidebar-images">
<img src="{$image.{{ ($random)}}|raw}" title="Image no. {{ $random }}" style="border: 1px solid #ddd; border-radius: 4px; width:100%;">
</div>

{$image.{{ ($random)}}|raw} is what worked on my case

I hope it helps for others.

valdet

Active member
I feel like there's a tiny little detail that is missing

By combining all the possible combinations from @Kier and @nocte the closest I got was by using these two
HTML:
<img src="{$image.{$random|raw}}" title="Image {{ $random }}" />
<img src="{$image.{{ ($random)|raw}}}" title="Image {{ $random }}" />
which both bring a broken image, with its source as following
HTML:
<img src="$image.6" title="Image 6">
 
Last edited:

valdet

Active member
Got it.

For whatever reason, only this one seemed to work.

HTML:
<img src="{$image.{{ ($random)}}|raw}" title="Image {{ $random }}" />
 
Last edited:

valdet

Active member
sure? This gives me a template error:

Code:
Template public:PAGE_CONTAINER: [E_WARNING] Illegal offset type

🤔

(only tested with PHP 7.4)
I changed the rand() definition like in this thread

Code:
<xf:set var="$random" value="{{ rand(1,20) }}" />

Also, I am not sure if it is a bug or not, maybe @Kier getting involved here can verify, but when I define $random variable first and $image below it, then this thing works.

When I define $image and then $random below it, then it fails. Got me stumped 🙃
 
Last edited:

valdet

Active member
Ok, so if any other visitor finds this useful, here's the solution

The variables
HTML:
<xf:set var="$random" value="{{ rand(1,20) }}" />
<xf:set var="$image.1">image1.jpg</xf:set>
<xf:set var="$image.2">image2.jpg</xf:set>
.
.
.
<xf:set var="$image.20">image20.jpg</xf:set>

Template
HTML:
<div class="sidebar-images">
<img src="{$image.{{ ($random)}}|raw}" title="Image no. {{ $random }}" style="border: 1px solid #ddd; border-radius: 4px; width:100%;">
</div>

{$image.{{ ($random)}}|raw} is what worked on my case

I hope it helps for others.
 
Solution
Top