Display one randomly selected image from multiple uploads

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

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>

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

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.

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