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

Attachments:

csdscreen.jpg 78K

By CommonSenseDesign - November 13, 2023

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.

Attachments:

rules-calendar2.php 5K

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