Image distortion

[Joanne123]

Hi

I have changed the size and shape of my images recently but they are not displaying correctly in the filtered view

What do I need to do to change this so that they siplay correctly?

http://www.ukcurtainpoles.co.uk/cgi-...&Action=Search

[NormanRouxel]

The link you've given won't work outside of your site pages.

Best provide a normal .html suffix link and instructions on what to do to see the problem.

[Joanne123]

Thanks Norman

If you go to this page
http://www.ukcurtainpoles.co.uk/acat...ain-Poles.html
and select White/Cream Curtain Poles, the images are on a filtered page and they are all distorted as I think they are trying to fit inside a 200 x 200 size area where in fact the image files are wider than they are deep.

Thank you

[NormanRouxel]

Someone has set these image tags to have attributes:

width="200" height="200"

Which is forcing them to squash up to 200 pixel square, regardless of their true size.

Remove the height="200" from the image tag and this will leave them at 200 px wide and the height will be appropriately scaled.

Also, after fixing the filtered results, check that your search results display properly. Currently they are squashed too, so you may need to do a similar fix on the layout the search results are using.

[Joanne123]

Hi
I can't find my image tag.

I've looked through my style sheet and gone through all img tags and searched for all height things and I can't find the one I'm looking for.

I've also looked in Design Library - Layouts - Classic Product layout and

Design Library - Layouts - Filtered Product Summary

On Filtered Product Summary I can find the width but there is no height specified.
Am I looking in the correct places?? Confused! ?? (It doesn't take much!)

Code below.
[<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" >
<form method="post" action="<actinic:variable value="Shopping Cart Script URL" name="OnlineScriptURL" />">
<input type="hidden" name="SID" value="<actinic:variable name="SectionID" />" />
<input type="hidden" name="PAGE" value="PRODUCT" />
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29" >
<input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" />
</actinic:block>
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22%29" >
<input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="ProductPageName" />" />
</actinic:block>
<Actinic:SECTION BLOB='<actinic:variable name="SectionCatFile" />'/>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e" >
<!-- Hidden field when in trial mode -->
<input type="hidden" name="SHOP" value="<actinic:variable name="HiddenFields" />" />
</actinic:block>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22SearchResultShowsImage%22%20%2f%3e%20%3d%3d%20TRUE" >
<p class="product-image set-left">
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22">
<a href="<actinic:variable name=ExtendedInfoPageEncoded />" target="ActPopup" onclick="return ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageName" />">
</actinic:block>
</actinic:block>

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%20%28%3cactinic%3avariable%20name%3d%22ProductListImageLink%22%20%2f%3e%20%3d%3d%201%29" ><a href="<actinic:variable name="ProductPageName" />" onclick="AppendParentSection(this, <actinic:variable name="SectionID" />)">
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
<img src="<actinic:variable name="ProductImageFileName" />"
border="0"
width="200"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
<img src="<actinic:variable name="DefaultProductImage" />"
border="0"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e%20OR%0d%28%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22ProductListImageLink%22%20%2f%3e%20%3d%3d%201%29%29" >
</a>
</actinic:block>
</p>
</actinic:block>

<a name="<actinic:variable name="EncodedProductAnchor" />"></a>

<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsName%22%20%2f%3e%20%3d%3d%20TRUE">
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3d%3d%201%29" ><a href="<actinic:variable name="ProductPageName" />" onclick="AppendParentSection(this, <actinic:variable name="SectionID" />)">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3d%3d%20%202%29" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageEncoded" />" target="ActPopup" onclick="return ShowPopUp('<actinic:variable name="ExtendedInfoPageEncoded" />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageName" />">
</actinic:block>
</actinic:block>
<actinic:variable formatting="h3" name="ProductName" />
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3e%200%29" >
</a>
</actinic:block>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsSectionName%22%20%2f%3e%20%3d%3d%20TRUE">
(<actinic:variable name="SectionName" />)
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsPrice%22%20%2f%3e%20%3d%3d%20TRUE">
<actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e" >
<p class="product-price">
<Actinic:PRICES PROD_REF="<actinic:variable name="ProductID" />" RETAIL_PRICE_PROMPT="<actinic:variable name="ProductPriceDescription" />">
<actinic:variable name="PriceListRetail" />
</Actinic:PRICES>
</p>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20False" >
<p class="product-price">
<Actinic:NOTINB2B><br><actinic:variable name="ProductPriceNotEnabledMessage" /></Actinic:NOTINB2B>
</p>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCustomerMessageUsed%22%20%2f%3e" >
<p class="product-price">
<Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable name="ProductID" />" COMPONENTID=-1><actinic:variable name="RetailCustomerMessage" /></Actinic:PRICE_EXPLANATION>
</p>
</actinic:block>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductDescription%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22SearchResultShowsDescription%22%20%2f%3e%20%3d%3d%20TRUE" >
<p class="product-text tabsrdesc<actinic:block if="%3cactinic%3avariable%20name%3d%22TabberFilterResults%22%20%2f%3e%20%3d%3d%20%22Hide%22"> hidetabs</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22TabberFilterResults%22%20%2f%3e%20%3d%3d%20%22Untabbed%22" > untabbed</actinic:block>">
<actinic:variable name="ProductDescription" />
</p>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" >
</form>
</actinic:block>]

[Joanne123]

Hi
Sorry - forgot the correct quote marks for the code

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" >
<form method="post" action="<actinic:variable value="Shopping Cart Script URL" name="OnlineScriptURL" />">
<input type="hidden" name="SID" value="<actinic:variable name="SectionID" />" />
<input type="hidden" name="PAGE" value="PRODUCT" />
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29" >
<input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" />
</actinic:block>
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22%29" >
<input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="ProductPageName" />" />
</actinic:block>
<Actinic:SECTION BLOB='<actinic:variable name="SectionCatFile" />'/>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e" >
<!-- Hidden field when in trial mode -->
<input type="hidden" name="SHOP" value="<actinic:variable name="HiddenFields" />" />
</actinic:block>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22SearchResultShowsImage%22%20%2f%3e%20%3d%3d%20TRUE" >
<p class="product-image set-left">
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22">
<a href="<actinic:variable name=ExtendedInfoPageEncoded />" target="ActPopup" onclick="return ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageName" />">
</actinic:block>
</actinic:block>

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%20%28%3cactinic%3avariable%20name%3d%22ProductListImageLink%22%20%2f%3e%20%3d%3d%201%29" ><a href="<actinic:variable name="ProductPageName" />" onclick="AppendParentSection(this, <actinic:variable name="SectionID" />)">
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
<img src="<actinic:variable name="ProductImageFileName" />"
border="0"
width="200"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
<img src="<actinic:variable name="DefaultProductImage" />"
border="0"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e%20OR%0d%28%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22ProductListImageLink%22%20%2f%3e%20%3d%3d%201%29%29" >
</a>
</actinic:block>
</p>
</actinic:block>

<a name="<actinic:variable name="EncodedProductAnchor" />"></a>

<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsName%22%20%2f%3e%20%3d%3d%20TRUE">
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3d%3d%201%29" ><a href="<actinic:variable name="ProductPageName" />" onclick="AppendParentSection(this, <actinic:variable name="SectionID" />)">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3d%3d%20%202%29" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageEncoded" />" target="ActPopup" onclick="return ShowPopUp('<actinic:variable name="ExtendedInfoPageEncoded" />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageName" />">
</actinic:block>
</actinic:block>
<actinic:variable formatting="h3" name="ProductName" />
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3e%200%29" >
</a>
</actinic:block>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsSectionName%22%20%2f%3e%20%3d%3d%20TRUE">
(<actinic:variable name="SectionName" />)
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22SearchResultShowsPrice%22%20%2f%3e%20%3d%3d%20TRUE">
<actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e" >
<p class="product-price">
<Actinic:PRICES PROD_REF="<actinic:variable name="ProductID" />" RETAIL_PRICE_PROMPT="<actinic:variable name="ProductPriceDescription" />">
<actinic:variable name="PriceListRetail" />
</Actinic:PRICES>
</p>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20False" >
<p class="product-price">
<Actinic:NOTINB2B><br><actinic:variable name="ProductPriceNotEnabledMessage" /></Actinic:NOTINB2B>
</p>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCustomerMessageUsed%22%20%2f%3e" >
<p class="product-price">
<Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable name="ProductID" />" COMPONENTID=-1><actinic:variable name="RetailCustomerMessage" /></Actinic:PRICE_EXPLANATION>
</p>
</actinic:block>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductDescription%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22SearchResultShowsDescription%22%20%2f%3e%20%3d%3d%20TRUE" >
<p class="product-text tabsrdesc<actinic:block if="%3cactinic%3avariable%20name%3d%22TabberFilterResults%22%20%2f%3e%20%3d%3d%20%22Hide%22"> hidetabs</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22TabberFilterResults%22%20%2f%3e%20%3d%3d%20%22Untabbed%22" > untabbed</actinic:block>">
<actinic:variable name="ProductDescription" />
</p>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" >
</form>
</actinic:block>

[NormanRouxel]

That layout is fine. It's probably a Search Results layout that you're using.

The way SD used similar but different layouts for the Search Results / Filtering (no filters) / Filtering (filter applied) is horrendous.

What I usually do is stick a bit of text at the top of each layout that may be involved (e.g. SR, FR, etc) and then upload; test and see what shows up. I'm working on a project involving user Variables right now and am finding that when looking at a list of products (the Necklaces page on the standard demo site), Standard Search Result is being used when a filter is applied and Filtered Product Summary is used when the filters are cleared. Bloody nightmare as user variables simply don't work the same across these layouts depending on where they are in use.

Also, another place to look is Settings / Search And FIltering Settings / Results / Product Image Options. If Resize Image is checked, then make sure only the width is non-zero.

[Joanne123]

Hi
Thanks Norman
This was the culprit!

Settings / Search And FIltering Settings / Results / Product Image Options. If Resize Image is checked, then make sure only the width is non-zero.


All displaying correctly now

Thanks again