yameth Posted January 18, 2021 Share Posted January 18, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
CoffeeCake Posted January 18, 2021 Share Posted January 18, 2021 Sure, you could use a bit of php to randomly select from an array of background-image:url or javascript. Link to comment Share on other sites More sharing options...
yameth Posted January 18, 2021 Author Share Posted January 18, 2021 I wish... some html and css is as far as I can go. That's why I'm asking.😉 Link to comment Share on other sites More sharing options...
yameth Posted January 20, 2021 Author Share Posted January 20, 2021 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 comment Share on other sites More sharing options...
bfarber Posted January 20, 2021 Share Posted January 20, 2021 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 1 Link to comment Share on other sites More sharing options...
yameth Posted January 20, 2021 Author Share Posted January 20, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
Nathan Explosion Posted January 20, 2021 Share Posted January 20, 2021 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 comment Share on other sites More sharing options...
yameth Posted January 20, 2021 Author Share Posted January 20, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts