Selectively Use Proportional Images on Products and Categories

[Outlawlb]

Is it possible to set it up so that each image can have this option individually turned on or off or is there a way to adjust the proportions used on each image?

I also have Image Hander 2 installed.

You can see the problem I am having here: http://jeffdavidcasting.com/catalog/...=index&cPath=5

I want each image to be the same size using the proportions as the images I have are not all of the exact same proportions.

Basically I want to have its container for 28508L be the same size as all the others.

Thank you.

[gjh42]

You may be mistaking the function of "proportional images". Its purpose is to make images keep their original proportions and not be distorted to fit the given box; therefore, you probably always want this on.
What you want is for the container that holds the image and name to match the others, correct? If you can say that none of the boxes will be higher than the ones showing on that page, then you can give .centerBoxContentsProducts a fixed height in your stylesheet and the outlines will all match.
The name text will still be just below the image; if you want that at the bottom of the box you will need to use a different tag to style.

[Outlawlb]

Thank you know I know what I means (as I thought it served a slightly different purpose) and how to fix it.

But I can not find .centerBoxContentsProducts in my stylesheet. (I do see it when I view the source of my page.)

<div class="centerBoxContentsProducts centeredContent back" style="width:24.5%;">

and such
Where is it and/or how should I define it then?

Also how could I ensure that the image is aligned to the center and the text to the bottom. Do I use the same aspects in the style sheet? Same .centerBoxContentsProducts tag?

[gjh42]

Since it is not already styled, adding

.centerBoxContentsProducts {
    height:124px;
    } 

to your stylesheet will give all the boxes the same height.

Moving the image and text will be trickier. They don't want to move inside the fixed box as is, so I think you will need to add a wrapper to .listingProductImage, say .listingProductImageWrapper. I don't use the column grid mod so can't tell you exactly which file or line it should go in. Find the place where (I think) $listBoxContents is built...

Once you have a .listingProductImageWrapper div in the code, you can style it.

.listingProductImageWrapper {
    height: 100px;
    }
//now you can align the image
.listingProductImage {
    vertical-align: middle;
    }
//and the title will already be at the bottom of the box so no need to style it
#productListing h3.itemTitle {
    } 

[Outlawlb]

Weird I can not find listingProductImage, either.

Just so you know my template is mostly classic with just the colors changed.

I can not find the place where the layout aspects are defined, especially for the images.

Is it possible that I could just add this to the stylesheet, and then it would execute it?

If I did it your way could I do this in the code:

'class="listingProductImage"'

to

'class="listingProductImage listingProductImageWrapper"'

Or do I have to do something different?

here is the full line that I think applies to me:

else {
          $lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), ($_GET['cPath'] > 0 ? 'cPath=' . $_GET['cPath'] . '&' : '') . 'products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>'

[gjh42]

Looks like you found the right area to edit.
Adding another class in the same place won't help; you need to wrap the image link so the wrapper can have a height and the image can be positioned inside it. I would say to use <span class="listingProductImageWrapper">(link code)</span>.

Something like

 $lc_text = '<span class="listingProductImageWrapper"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), ($_GET['cPath'] > 0 ? 'cPath=' . $_GET['cPath'] . '&' : '') . 'products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a></span>' 

[Outlawlb]

Thank you for all your help I will give it a try and let you know how it works.

[duntuk]

I'm trying to do the same thing--wrap the image in a a div so to be able to style it with a border and center the content/image. However, I can't find where in the world that code is..... i'm using the column display mod as well, plus image handler 2...

[carlnunes]

Yes, thank you. This stuff is hard to find.