Images in the Product Cross Sell

[kocotech]

Hi guys,

This may be very obvious, but my google/shopsite fu is failing me. I'm setting up a product cross sell. The images I'm using are the default original, size 1, 2, and 3's. Some of the images we have are thin vertically (hanging banners versus, say, plates) so if you look at the horizontal list of products to cross sell its jig jagged (for a lack of better way to describe it):

http://www.aapsupplies.com/4549.10.php

You can see what I'm looking at here. When I created my product pages, I was able to better customize the containers for the image versus the product title, product number, forms, etc so they are in line but I cannot find how I can do that here. The code for the product cross sell is:

Code: Select all

    
[-- IF Product.MoreInformationProductCrossSell --]
       [-- IF PRODUCT.CrossSell "0" --]
       [-- ELSE --]
<div class="product_crosssell">
           <table class="pcs_table" align="center" valign="center">
             <tr><td colspan="3" id="pcs_mi">[-- STORE.CartCrossSellHeader --]</td></tr>
               [-- LOOP PRODUCT_CROSS_SELL 8 --]
               <td class="pcs_table_content" align="center" valign="center"><h6>[-- PRODUCT_CROSS_SELL --]</h6></td>
               [-- END_LOOP PRODUCT_CROSS_SELL --]
           </table>
</div>
       [-- END_IF --]
        [-- END_IF --]


I also have this in my product template:

Code: Select all

[-- DEFINE PRODUCT_CROSS_SELL --]
   [-- INCLUDE cross-sell-default.sst PROCESS --]
[-- END_DEFINE PRODUCT_CROSS_SELL --]


I'm sure more information may be required so ask away. Any thoughts are most appreciated. Thanks!

--Krystal

[Jim]

It looks like the box the image is in is being set on the Image configuration because I see code like this

Code: Select all

width="71" height="80" vspace="0" hspace="0" border="0"
width="79" height="79" vspace="30" hspace="0" border="0"
width="79" height="24" vspace="30"

So some images are 71 high and others 79, others 80 etc. If you want the images to all line up you need to have them a consistent height. You could either do that on the Images screen or leave the height, width. vspace and hspace out and then specify it with styles.

[kocotech]

Hello,

Thanks Jim. I had added the spaces just playing with it. I can't figure out how to force the image constraint in SS yo 80pixels high, that is the max height.

I would be happy to style it, but forcing the height there just resizes the image which I don't want.

Any hints?

-Krystal

[kocotech]

It looks like the box the image is in is being set on the Image configuration because I see code like this

Code: Select all

width="71" height="80" vspace="0" hspace="0" border="0"
width="79" height="79" vspace="30" hspace="0" border="0"
width="79" height="24" vspace="30"

So some images are 71 high and others 79, others 80 etc. If you want the images to all line up you need to have them a consistent height. You could either do that on the Images screen or leave the height, width. vspace and hspace out and then specify it with styles.

So I have to come back to this one. I'm doing some cleanup work on the site and in doing so, resized every one of these images down to 300px tall and reuploaded them. ShopSite is set to resize image 3 down to 80px tall max.

However, if you look here:

http://www.aapsupplies.com/77015.40.php

As an example, you see Red Streaming Swirl Hanging Decorations 5ct is obviously not the same height, in fact it's 42px tall when all the others are 79px. In comparison:

http://www.aapsupplies.com/media/43031.40.jpg

Versus:

http://www.aapsupplies.com/media/67105.07.jpg

You can see both are 300px tall and yet the height has resized differently. It's almost like SS is looking for the exact same image size ratio more than it is the same height. The client has products that are long (birthday banners) as she has tall (pinatas).

I appreciate any additional thoughts.

--Krystal

[Jim]

What do you have the Resized Image 3 max height and max width configured as?

ShopSite will resize the image to fit in the box size you specify. It cannot meet both of those setting if the image is rectangular not square. It probably chooses the largest dimension to set at the closest to the size you specify and then changes the other so the image stays proportional.

Note that you do not have to specify both the Maximum Height and Maximum Width. If you want all of your images to be 80 px high then set the height to 80 px and leave the width blank. If you want them to all be 80px wide then set the width to 80 and leave the height blank.

NOTE: due to rounding in calculations the size may not always be the exact size you specify but it should not be bigger than that. For example if you specify 80 it might end up 79 instead.

[kocotech]

Hello,

Thanks for your response! I had the default, which was width 80 and height 80. I just removed the width and ran a resize for everything and it's perfect.

THANK YOU!

--Krystal