XF 2.2 How to combine two Xenforo variables !?

[valdet]

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

<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

<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

<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

<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

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

 

[nocte]

I am a bit out of practice, but try this:

<img src="{{ $image.{$random}|raw }}" title="Image {{ $random }}" />

 

[Kier]

I don't have code in front of me to test, but try {$image.{$random|raw}} or {$image.{$random}|raw} depending on requirements.

 

[valdet]

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

<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

<img src="$image.6" title="Image 6">

 

[valdet]

Got it.

For whatever reason, only this one seemed to work.

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

 

[nocte]

For whatever reason, only this one seemed to work.

sure? This gives me a template error:

Template public:PAGE_CONTAINER: [E_WARNING] Illegal offset type

(only tested with PHP 7.4)

 

[valdet]

sure? This gives me a template error:

Template public:PAGE_CONTAINER: [E_WARNING] Illegal offset type

(only tested with PHP 7.4)

I changed the rand() definition like in this thread

<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

 

[valdet]

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

The variables

<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

<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.