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 March 29th, 2013, 09:08 AM
Aichels Aichels is offline
 
Join Date: Feb 2013
Posts: 77
Default Thumbnail photos stretched

Hi,

I noticed that some of my product thumbnail photos are stretched, so product looks weird or some of them bit two long and in bottom go's almost out of white frame. Most of them are fine, but there are quite few with stretched photos. Especially in this category http://www.fashion-drop.com/category/men/, look in that category at product "Zip-Up Striped Cardigan" but if you open in product detail page photo is in good quality, so it's just thumbnails.

Can you please help me with this?

Thank you

Store: www.fashion-drop.com
  #2  
Old March 29th, 2013, 09:23 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

Any stretching of your images is happening because of custom CSS code that you've added to your Custom CSS.

This is the line of code responsible for stretching the images:

Code:
#view .pl .thmb img { width: 100%; }
That code is not default Datafeedr CSS code.

You'll need to deal with that line.

Eric
  #3  
Old March 29th, 2013, 10:09 AM
Aichels Aichels is offline
 
Join Date: Feb 2013
Posts: 77
Default

I know it's not default you gave me that code.

Is there anything I should add there? Because now css says width: 100% , but in real life it stretches some product width and makes length bit to long.
  #4  
Old March 29th, 2013, 10:14 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

I would remove the width:100%; altogether. I got the code from your theme's CSS file.
  #5  
Old March 29th, 2013, 10:42 AM
Aichels Aichels is offline
 
Join Date: Feb 2013
Posts: 77
Default

If I take out that it solves stretching problem, but thumbnail photos move to right side of frame.

I'm not developer, but from what I see in Datafeedr Custom CSS file I think I have some CSS for those thumbnails several places with different info. This is my CSS file:

/**
* Fix conflict with TwentyTen WP theme
*/
#view .sp h2 {clear:none;}
#view .pl h2 {clear:none;}
#view .col1 .pl h2,
#view .col1 .pl h2 a {font-size:22px}


#view .pl .t1 .bdr { border: 0; }


H4 a { color:black; }
H6 a { color:grey; }


element.style {
font-size: 18px;
}



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


#view .pl .col3 .thmb
{
width: 180px;
height: 190px;
}


#view h6 {
line-height: 1.1em;
height: 2.2em;
overflow: hidden;
}


#view .pl .thmb img{
width: 100%;
text-align: left;
margin: 0px;
}


#view .sp .thmb{
background-color: #FFFFFF;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
font-size: 11px;
text-align: center;
margin: 0px;
max-width: 100%;
width: 600px;
}

#view .sp .thmb img{
width: 100%;
text-align: left;
margin: 0px;
}

#view .sp .thmb a{
display: block;
background: none;
padding: 15px 15px 13px 15px;
margin: 0px;
}


#view .sp .prc {
color: black;
font-size: 17px;
margin: 5px 0 0;
text-align: left;
}


#view .pl .t1 .bdr .prc {
color: black;
margin: 5px 0;
text-align: center;
}


#view .modwrp .modcont {
margin: 0 10px 10px 0;
padding: 5px;
color: grey;
}



.dfsbmt { margin-left: 10px; }



#view .pl .thmb{
background-color: #FFFFFF;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
font-size: 11px;
text-align: center;
margin: 0px;
max-width: 100%;
width: 150px;
}



#view .pl .thmb a{
display: block;
background: none;
padding: 15px 15px 13px 15px;
margin: 0px;
}


#widget_tag_cloud {
color: #eed505;
}
  #6  
Old March 29th, 2013, 10:51 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

I would use this:
Code:
/**
 * Fix conflict with TwentyTen WP theme
 */
#view .sp h2 { clear: none; }
#view .pl h2 { clear: none; }
#view .col1 .pl h2, 
#view .col1 .pl h2 a { font-size: 22px; }
#view .pl .t1 .bdr { border: 0; }
H4 a { color: black; }
H6 a { color: grey; }
element.style { font-size: 18px; }

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

#view .pl .col3 .thmb
{
	width: 180px;
	height: 190px;
}

#view h6
{
	line-height: 1.1em;
	height: 2.2em;
	overflow: hidden;
}

#view .pl .thmb img
{
	/* REMOVED width: 100%; */
	text-align: left;
	margin: 0px;
}

#view .sp .thmb
{
	background-color: #FFFFFF;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	font-size: 11px;
	text-align: center;
	margin: 0px;
	max-width: 100%;
	width: 600px;
}

#view .sp .thmb img
{
	width: 100%;
	text-align: left;
	margin: 0px;
}

#view .sp .thmb a
{
	display: block;
	background: none;
	padding: 15px 15px 13px 15px;
	margin: 0px;
}

#view .sp .prc
{
	color: black;
	font-size: 17px;
	margin: 5px 0 0;
	text-align: left;
}

#view .pl .t1 .bdr .prc
{
	color: black;
	margin: 5px 0;
	text-align: center;
}

#view .modwrp .modcont
{
	margin: 0 10px 10px 0;
	padding: 5px;
	color: grey;
}

.dfsbmt { margin-left: 10px; }

#view .pl .thmb
{
	background-color: #FFFFFF;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	font-size: 11px;
	text-align: center;
	margin: 0px;
	max-width: 100%;
	width: 150px;
}

#view .pl .thmb a
{
	display: block;
	background: none;
	padding: 15px 15px 13px 15px;
	margin: 0px;
}

#widget_tag_cloud { color: #eed505; }
  #7  
Old March 29th, 2013, 12:03 PM
Aichels Aichels is offline
 
Join Date: Feb 2013
Posts: 77
Default

Still same thing - with that "width:100%" images stretched and without they go to right side of frame.

Between images there is space maybe it is possible increasing size of frame and thumbnails?
  #8  
Old March 29th, 2013, 12:14 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

When I remove width:100% from your code the page looks fine:



Eric
  #9  
Old March 29th, 2013, 12:25 PM
Aichels Aichels is offline
 
Join Date: Feb 2013
Posts: 77
Default

Yes it looks good in that category, but take a look at that first page.

Even this page as you can see there is lot of unused space between images, where it is possible to increase frame and thumbnail size.
  #10  
Old March 29th, 2013, 12:30 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

You could try changing this:
Code:
#view .pl .col3 .thmb
{
	width: 180px;
	height: 190px;
}
To this:
Code:
#view .pl .col3 .thmb
{
	width: 210px;
	height: 220px;
}
  #11  
Old March 29th, 2013, 01:28 PM
Aichels Aichels is offline
 
Join Date: Feb 2013
Posts: 77
Default

Homepage now is perfect - size, quality, frame. Only now in all category pages and related products page frame is good, but photos are smaller. And in search page - frame and photos are to small.
  #12  
Old March 29th, 2013, 02:18 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

The photos might appear smaller because of their aspect ratio. The images have to be scaled while still maintaining their aspect ratio. If an image is a lot taller than it is wide or a lot wider than it is tall, your images will scale down to appear smaller. The only other option is stretching the image.

The default Datafeedr CSS code takes all of this into account when serving up images but you are using custom code and that's why you are noticing all of these discrepancies.

Regarding your search page, you will need to copy the code from here: The Factory > Your Store > VIEWS > Store Front Page > Default > Product list module > Theme settings ()

And Paste that same code here: The Factory > Your Store > VIEWS > SEARCH PAGE > Default > Product list module > Theme settings ()

Eric
  #13  
Old March 29th, 2013, 02:23 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

Also, some images might appear smaller because are serving up the "thumbnails" not the full size images. To serve the full size images, you need to change this:

[product.thumbnail

To this:

[product.image

Here: The Factory > Your Store > VIEWS > CATEGORY PAGE > Default > Product list module > Theme settings ()

Eric
  #14  
Old March 31st, 2013, 03:23 PM
Aichels Aichels is offline
 
Join Date: Feb 2013
Posts: 77
Default

Product thumbnails are all fine. Thank you.

Only now single product image is in the same size as thumbnails. How to increase that?

Also I can't pin my images to Pinterest I get this "Sorry, couldn't find any pinnable images or video on this page."
  #15  
Old March 31st, 2013, 06:28 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

Can you post a URL of a page where a small image size is showing on a product detail page? The ones I checked seem fine to me.

Here's how to add a pinterest button: /showthread.php?t=7414

Eric
  #16  
Old April 1st, 2013, 07:20 AM
Aichels Aichels is offline
 
Join Date: Feb 2013
Posts: 77
Default

All products in product detail page have same width as in thumbnails. Example - http://www.fashion-drop.com/other/ow...9600693596648/

I have Pinterest button bellow products, that is sorted, but I can't pin anything even with browsers Pinterest bookmarklet I get that "Sorry, couldn't find any pinnable images or video on this page." In my blog pining works fine so it's just datafeedr photos.
  #17  
Old April 1st, 2013, 07:39 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

Here's the CSS to make the images bigger on that page:

Code:
#view .sp .lc { width: 310px; }
#view .sp .rc { margin-left: 310px; }
#view .sp .lc .thmb img
{
	max-width: 300px;
	width: expression(this.height < this.width && this.width > 300 ? '300px' :true);
}
Regarding pinterest, that's not going to work. You need to do the steps mentioned in this thread: /showthread.php?t=7414

Eric
  #18  
Old April 1st, 2013, 08:33 AM
Aichels Aichels is offline
 
Join Date: Feb 2013
Posts: 77
Default

Perfect! After increasing size of photo in product detail page it also solved problem with pinterest. Two with one shot.

I added theme shortcode to homepage to have blog posts in front page, but I noticed that if go to next page that blog is in every page. Is there way to make that I see that blog only in homepage? Maybe there is shortcode from datafeedr products what I can add in my homepage instead of setting store as homepage? Or there is other way to do it?
  #19  
Old April 1st, 2013, 08:38 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by Aichels View Post
Perfect! After increasing size of photo in product detail page it also solved problem with pinterest. Two with one shot.
Great!

Quote:
Originally Posted by Aichels View Post
I added theme shortcode to homepage to have blog posts in front page, but I noticed that if go to next page that blog is in every page. Is there way to make that I see that blog only in homepage? Maybe there is shortcode from datafeedr products what I can add in my homepage instead of setting store as homepage? Or there is other way to do it?
New question moved to new post. Please try to post your new questions as new threads to help us provide you with the best support that we can.

New question is here: /showthread.php?t=8894

Thanks,
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
No Photos loading from Merch Shopnowbuyno Problems 0 September 24th, 2012 05:08 PM
how put in middle thumbnail thomascarrier Problems 2 September 26th, 2011 12:48 PM


All times are GMT -5. The time now is 12:55 PM.


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