Datafeedr Support Forums

Datafeedr Support Forums (
-   Questions (
-   -   Related products image size (

digitalcow December 17th, 2012 10:52 AM

Related products image size

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 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 December 17th, 2012 11:50 AM


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

HTML Code:

<div class="pl" id="related_products_small">
  <div class="t1 col2">
  <div class="bdr">
    <div class="thmb"><a href="[]" title="[]">[product.image tag='1']</a></div>
    <div class="product_name"><a href="[]" title="[]">[]</a></div>
    <div class="prc">[product.currency mode='sign'][product.price]</div>
    <div class="clearingdiv"> </div>
  <div class="clearingdiv"> </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.


All times are GMT -5. The time now is 09:00 PM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.