Announcement

Collapse
No announcement yet.

Image distortion

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Image distortion

    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
    Thank you
    Kind regards
    Joanne

    www.ukcurtainpoles.co.uk

    #2
    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.
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #3
      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
      Thank you
      Kind regards
      Joanne

      www.ukcurtainpoles.co.uk

      Comment


        #4
        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.
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


          #5
          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>]
          Thank you
          Kind regards
          Joanne

          www.ukcurtainpoles.co.uk

          Comment


            #6
            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>
            Thank you
            Kind regards
            Joanne

            www.ukcurtainpoles.co.uk

            Comment


              #7
              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.
              Norman - www.drillpine.biz
              Edinburgh, U K / Bitez, Turkey

              Comment


                #8
                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
                Thank you
                Kind regards
                Joanne

                www.ukcurtainpoles.co.uk

                Comment

                Working...
                X