Product listings with the occasional tall product image (If statment for image upload height)

2 posts by 2 authors in: Forums > CMS Builder Community
Last Post: May 30, 2018   (RSS)

By Mikey - May 5, 2018

Here's a little snippet I've found useful for managing product catalogs, where there's an occasional product photo that is ever tall and throws off the product listings appearance. So to control those very tall product images, I use this snippet to assign an additional CSS style class to the tall image - based on it's height.


.image_fit {
    .image_fit img {
        display:block !important;
        width:100% !important;
        height:inherit !important;
    .image_max_height {
    .image_max_height img {


<img src="<?php echo htmlencode($upload['thumbUrlPath3']) ?>" class="image_fit<?php if ($upload['thumbHeight3'] > 400):?> image_max_height<?php endif; ?>" alt="<?php echo $record['title'] ?>" />

The snippet looks for the product image's height and if it exceeds 400 pixels, it assigns a new CSS class. This is based on AEV's suggestion for a similar need.

Hope someone finds this useful,


By Dave - May 30, 2018

Thanks Zicky!!

Dave Edis - Senior Developer