Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Questions
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
Old December 17th, 2012, 10:52 AM
digitalcow digitalcow is offline
 
Join Date: Jun 2010
Posts: 494
Default Related products image size

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
  #2  
Old December 17th, 2012, 11:50 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

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

HTML Code:
<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:

Code:
#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
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Image Size kargz12 Problems 1 February 10th, 2012 09:09 AM
Related products box size digitalcow Questions 1 November 16th, 2011 08:52 AM
How to increase the size of the images in the Related Product boxes? meperez Questions 4 March 26th, 2011 06:06 AM


All times are GMT -5. The time now is 08:32 AM.


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