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

By Zicky - 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.

The CSS

.image_fit {
        width:100%;
        height:inherit;
        margin:0;
        padding:0;
    }
            
    .image_fit img {
        display:block !important;
        width:100% !important;
        height:inherit !important;
    }
    .image_max_height {
    }
    .image_max_height img {
        max-height:400px;
        width:inherit;
    }

The PHP

<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. https://www.interactivetools.com/forum/forum-posts.php?postNum=2215005#post2215005

Hope someone finds this useful,

Zicky