Related products image size

[digitalcow]

Eric

Am struggling with the related products option. Previously i had it below the main product and I had 3 large images left to right on the screen. I would like to change it to display more like this http://www.asos.com/ASOS-Curve/ASOS-...rt=-1&clr=Teal see the WE RECOMMEND bit (I don't need the navigation arrows) I seem to be struggling to work out how to make the related product images that small and in two rows of two.

Any help would be most welcome please

[Eric]

Hi,

You can change the Related Products code to something like this:

<div class="pl" id="related_products_small">
  [product.each]
  <div class="t1 col2">
  <div class="bdr">
    <div class="thmb"><a href="[product.link]" title="[product.name]">[product.image tag='1']</a></div>
    <div class="product_name"><a href="[product.link]" title="[product.name]">[product.name]</a></div>
    <div class="prc">[product.currency mode='sign'][product.price]</div>
    <div class="clearingdiv"> </div>
  </div>
  </div>
  [/product.each]
  <div class="clearingdiv"> </div>
</div>

And then add the following to your Custom CSS:

#related_products_small .product_name
{
	overflow: hidden;
	text-align: left;
	line-height: 1.3em;
	height: 2.6em;
}

#view .pl#related_products_small .col2 .prc { text-align: left; }

#view .pl#related_products_small .col2 .thmb
{
	width: 80px;
	height: 90px;
}

#view .pl#related_products_small .col2 .thmb img
{
	max-width: 80px;
	max-height: 80px;
	width: expression(this.height < this.width && this.width > 90 ? '80px' :true);
	height: expression(this.height > this.width && this.height > 90 ? '80px' :true);
}

That should get you in the ballpark.

Eric