Invision Community 5: A video walkthrough creating a custom theme and homepage By Matt Thursday at 04:02 PM
yameth Posted January 18, 2021 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
CoffeeCake Posted January 18, 2021 Posted January 18, 2021 Sure, you could use a bit of php to randomly select from an array of background-image:url or javascript.
yameth Posted January 18, 2021 Author Posted January 18, 2021 I wish... some html and css is as far as I can go. That's why I'm asking.😉
yameth Posted January 20, 2021 Author 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>
bfarber Posted January 20, 2021 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
yameth Posted January 20, 2021 Author 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
Nathan Explosion Posted January 20, 2021 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}
yameth Posted January 20, 2021 Author 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
Recommended Posts