Random background images in a block

[yameth]

I have created a custom block to promote my other page like this:

<li class="ipsWidget ipsWidget_horizontal ipsBox ipsResponsive_block">

<div class="SuperBlocks_thumbImage SuperBlocks_thumbImage_low SuperBlocks_shadowContainer" style="background-image:url('//www.site.com/uploads/pages_media/0_header2a.jpg')">
		<div class="SuperBlocks_imageContent ipsPad">
			<h3 class="SuperBlocks_head SuperBlocks_headLarge ipsSpacer_bottom ipsSpacer_half" data-ipstruncate="" data-ipstruncate-type="remove" data-ipstruncate-size="3 lines" style="overflow-wrap: break-word;"><a href="https://other.site.com/">Lorem Ipsum</a></h3>
<p class="ipsResponsive_hideTablet ipsResponsive_hidePhone">
<i class='fa fa-check'></i>Lorem Ipsum </br>
<i class='fa fa-check'></i>Lorem Ipsum</br>
          </br></p>
<a href="https://other.site.com/listings.php" title="Lorem" class="ipsButton ipsButton_small sButton ipsButton_primary">ipsum</a>
			</div>
		</div>
</li>

It uses some css from @opentype excellent Pages SuperBlocks and does the job well.

Is there a way to change the background image randomly between 3 or 4  images because it gets kind of tiring as it is?

Edited January 18, 2021 by yameth

[CoffeeCake]

Sure, you could use a bit of php to randomly select from an array of background-image:url or javascript.

[yameth]

I wish... some html and css is as far as I can go. That's why I'm asking.😉

[yameth]

I came up with this but the background images do not show at all. Anyone kind enough to tell me what's wrong?

<?php
  $bg = array('0_header2a.jpg', '0_IMG_20200928_120515.jpg?_cb=1611148998', '0_m_vengeance_lpx_ddr4_2400_2x8gb-1610717649-743-e.jpg?_cb=1611148998' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

<li class="ipsWidget ipsWidget_horizontal ipsBox ipsResponsive_block">

<div class="SuperBlocks_thumbImage SuperBlocks_thumbImage_low SuperBlocks_shadowContainer" style="background-image:url('//www.xyxcx.com/pages_media/<?php echo $selectedBg; ?>) no-repeat;">

		<div class="SuperBlocks_imageContent ipsPad">
			<h3 class="SuperBlocks_head SuperBlocks_headLarge ipsSpacer_bottom ipsSpacer_half" data-ipstruncate="" data-ipstruncate-type="remove" data-ipstruncate-size="3 lines" style="overflow-wrap: break-word;"><a href="https://xyxcx.com/">lorem</a></h3>
<p class="ipsResponsive_hideTablet ipsResponsive_hidePhone">
<i class='fa fa-check'></i>one</br>
<i class='fa fa-check'></i>two</br>
<i class='fa fa-check'></i>three</br>
<i class='fa fa-check'></i>four</br>
          </br></p>
<a href="https://xyxcx.com/asdf.php" title="asdf sdfg sdfg" class="ipsButton ipsButton_small sButton ipsButton_primary">ipsum</a>
			</div>
		</div>
</li>

 

[bfarber]

Try changing

<?php
  $bg = array('0_header2a.jpg', '0_IMG_20200928_120515.jpg?_cb=1611148998', '0_m_vengeance_lpx_ddr4_2400_2x8gb-1610717649-743-e.jpg?_cb=1611148998' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

<li class="ipsWidget ipsWidget_horizontal ipsBox ipsResponsive_block">

<div class="SuperBlocks_thumbImage SuperBlocks_thumbImage_low SuperBlocks_shadowContainer" style="background-image:url('//www.xyxcx.com/pages_media/<?php echo $selectedBg; ?>) no-repeat;">

to

<?php
  $bg = array('0_header2a.jpg', '0_IMG_20200928_120515.jpg?_cb=1611148998', '0_m_vengeance_lpx_ddr4_2400_2x8gb-1610717649-743-e.jpg?_cb=1611148998' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = $bg[ $i ]; // set variable equal to which random filename was chosen
?>

<li class="ipsWidget ipsWidget_horizontal ipsBox ipsResponsive_block">

<div class="SuperBlocks_thumbImage SuperBlocks_thumbImage_low SuperBlocks_shadowContainer" style="background-image:url('//www.xyxcx.com/uploads/pages_media/{$selectedBg}') no-repeat;">

 

[yameth]

Didn't work. I get error "invalid property value" for element.style background-image: url(//www.xvc.bn/uploads/pages_media/<?php echo ; ?>) no-repeat;

Edited January 20, 2021 by yameth

[Nathan Explosion]

14 minutes ago, yameth said:

Didn't work. I get error "invalid property value" for element.style background-image: url(//www.xvc.bn/uploads/pages_media/<?php echo ; ?>) no-repeat;

You haven't performed all his suggested changes then - look at the code he provided again, specifically the last line which changes your:

<?php echo $selectedBg; ?>

(which is what your browser is complaining about)

to:

{$selectedBg}

 

[yameth]

Yes I did. The correct error is: "invalid property value" for element.style background-image: url(//www.abc.de/uploads/pages_media/) no-repeat;

Edited January 20, 2021 by yameth