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.