Display one randomly selected image from multiple uploads
8 posts by 3 authors in: Forums > CMS Builder
Last Post: November 19, 2023 (RSS)
By CommonSenseDesign - October 28, 2023 - edited: October 28, 2023
Hi, there. I've set up a really simple page where multiple images can be uploaded via CMSB, but I want just one randomly selected image to be displayed on the live page. Can someone point me in the right direction, please?
// load record from 'calendar_random_images'
list($calendar_random_imagesRecords, $calendar_random_imagesMetaData) = getRecords(array(
'tableName' => 'calendar_random_images',
'where' => '', // load first record
'loadUploads' => true,
'allowSearch' => false,
'limit' => '1',
));
$calendar_random_imagesRecord = @$calendar_random_imagesRecords[0]; // get first record
if (!$calendar_random_imagesRecord) { dieWith404("Record not found!"); } // show error message if no record found
<?php foreach ($calendar_random_imagesRecord['image'] as $index => $upload): ?>
<?php echo htmlencode($upload['urlPath']) ?>
<?php endforeach ?>
By Djulia - October 28, 2023
Hi CommonSenseDesign,
You can test with ORDER BY rand() ?
// load record from 'calendar_random_images'
list($calendar_random_imagesRecords, $calendar_random_imagesMetaData) = getRecords(array(
'tableName' => 'calendar_random_images',
'where' => '', // load first record
'orderBy' => 'RAND()',
'loadUploads' => true,
'allowSearch' => false,
'limit' => '1',
));Thanks,
Djulia
By CommonSenseDesign - October 29, 2023 - edited: October 29, 2023
Thank you so much. I tried it, but only the first image seems to be displayed each time. https://www.interfaithcounselling.ca/lottery/rules-calendar2.php
// load record from 'calendar_random_images'
list($calendar_random_imagesRecords, $calendar_random_imagesMetaData) = getRecords(array(
'tableName' => 'calendar_random_images',
'where' => '', // load first record
'orderBy' => 'RAND()',
'loadUploads' => true,
'allowSearch' => false,
'limit' => '1',
));
$calendar_random_imagesRecord = @$calendar_random_imagesRecords[0]; // get first record
?>
<div class="imagebg">
<?php foreach ($calendar_random_imagesRecord['image'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" width="100%" height="100%" />
<?php endforeach ?>
</div>
By Djulia - October 30, 2023 - edited: October 31, 2023
And with shuffle ?
shuffle($calendar_random_imagesRecord['image']);
foreach ($calendar_random_imagesRecord['image'] as $index => $upload) {
if ($index >= 1) { continue; }
echo '<img src="'.htmlencode($upload['urlPath']).'" width="100%" height="100%">';
}
This implies that your array() includes at least 2 images.
Or
<div class="imagebg">
<?php shuffle($calendar_random_imagesRecord['image']); ?>
<?php foreach ($calendar_random_imagesRecord['image'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" width="100%" height="100%" />
<?php endforeach ?>
</div>
Thanks,
Djulia
By Steve99 - October 31, 2023
Hi CommonSenseDesign,
It appears you have code that is setting an image upload as inline style background image on the div tag. I can see 5 image tags output within that div as "display:none;". Can you post the full code sample that creates this section (see attached screenshot)?
Best,
Steve
Hi, Steve. I've attached the code for the entire page. You can see the live page here: https://www.interfaithcounselling.ca/lottery/rules-calendar2.php
Thanks so much.
By Steve99 - November 14, 2023
Hi again,
It looks like Djulia's shuffle solution will work nicely for you. Based on your existing code structure, here's a slightly modified version to shuffle if there is more than one image upload:
Replace this:
<div class="imagebg">
<?php foreach ($calendar_random_imagesRecord['image'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" width="100%" height="100%" />
<?php endforeach ?>
</div>With this:
<div class="imagebg">
<?php if (count($calendar_random_imagesRecord['image']) > 1) { shuffle($calendar_random_imagesRecord['image']); } ?>
<?php foreach ($calendar_random_imagesRecord['image'] as $index => $upload): ?>
<?php if ($index >= 1) { continue; } ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" width="100%" height="100%" />
<?php endforeach ?>
</div>That should do it for you.
Also, you can remove "'orderBy' => 'RAND()'," at line 37 from your previous test.
Let us know how you make out.
Best,
Steve
That works perfectly! Thanks so much, Steve and Djulia.
https://www.interfaithcounselling.ca/lottery/rules-calendar2.php