Find smallest upload height in foreach loop
3 posts by 3 authors in: Forums > CMS Builder
Last Post: December 4, 2017 (RSS)
By Mikey - December 2, 2017 - edited: December 2, 2017
I have a section editor called "Projects", it has an upload field called "before_after_photos" which allows two photos to be uploaded. I'm trying to find the smallest height of the two photos uploaded from the $upload['thumbUrlPath4'] and place the results into the CSS style <div style="max-height:<?php echo $lowestHeight; ?>px; width:100%; overflow:hidden;" >
The results being that the div for both uploaded images are set to the smallest height of the two images. Anyone have suggestions on how to accomplish this?
<?php foreach ($projectsRecords as $record): ?>
<?php foreach ($record['before_after_photos'] as $index => $upload): ?>
<?php
$uploadHeight = explode(',', $upload['thumbHeight4']);
$lowestHeight = min($uploadHeight);
// echo 'LOWEST:'.$lowestHeight;
?>
<h3><?php echo $upload['info1'] ?></h3>
<div style="max-height:<?php echo $lowestHeight; ?>px; width:100%; overflow:hidden;" >
<img src="<?php echo $upload['thumbUrlPath4'] ?>" alt="<?php echo $upload['info1'] ?>" class="img_fit" />
</div>
<?php endforeach ?>
<div>
<h1><?php echo htmlspecialchars($record['name']); ?></h1>
<?php echo $record['content']; ?>
</div>
<?php endforeach ?>
I'm trying to get results that appears similar to this:
<h3>Before</h3>
<div style="max-height:438px; width:100%; overflow:hidden;" >
<img src="/uploads/thumb4/before_001.jpg" alt="Before" class="img_fit" />
</div>
<h3>After</h3>
<div style="max-height:438px; width:100%; overflow:hidden;" >
<img src="/uploads/thumb4/after_001.jpg" alt="After" class="img_fit" />
</div>
<div>
<h1>Window Replacements</h1>
<p>Replacement of all home windows and shutters</p>
</div>
<hr/>
<h3>Before</h3>
<div style="max-height:657px; width:100%; overflow:hidden;" >
<img src="/uploads/thumb4/before_002.jpg" alt="Before" class="img_fit" />
</div>
<h3>After</h3>
<div style="max-height:657px; width:100%; overflow:hidden;" >
<img src="/uploads/thumb4/after_002.jpg" alt="After" class="img_fit" />
</div>
<div>
<h1>Custom Window Replacements</h1>
<p>Custom crafted home window replacements</p>
</div>
Thanks Zicky
By mizrahi - December 4, 2017 - edited: December 4, 2017
Sounds like this could be a job for flexbox, which can do this via CSS on the fly. No need to set a max-height.
By Dave - December 4, 2017
Hi Zicky,
If you want to do it with PHP, try this:
<?php foreach ($projectsRecords as $record): ?>
<?php
$thumb4Heights = array_column($record['before_after_photos'], 'thumbHeight4');
if ($thumb4Heights) { $thumb4MinHeight = min($thumb4Heights); }
else { $thumb4MinHeight = 0; }
?>
<?php foreach ($record['before_after_photos'] as $index => $upload): ?>
Let me know if that works for you.
interactivetools.com