Jump to content

Community

Random background images in a block


Recommended Posts

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 by yameth
Link to post
Share on other sites

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>

 

Link to post
Share on other sites

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;">

 

Link to post
Share on other sites
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}

 

Link to post
Share on other sites
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy