Announcement

Collapse
No announcement yet.

Category Product Listing Thumbnails, take 2

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

  • Category Product Listing Thumbnails, take 2

    Still working on setting up the product category listing page. I took the previous advice and removed everything that called for a thumbnail and replaced it with [image1] and that works great.

    Then I was recommended to change the html of the image size. I am doing that but this is the error I'm getting now...

    I put in height="450" width="150" as the image height , width attributes which forces the image to be that size, and will stretch / skew the image until it fits those dimensions exactly.

    How would I code it, so the image scales to fit that size, but stops once either the 450 or the 150 is reached first? I only ask because I have some products that will fit 150 x 450 perfectly and it looks great.

    Then I have some that might be 200 x 200 but they get all stretch out to 450.

    ---

    Should I create a new category template for each category and set each one specific to that category?
    Last edited by stairparts; 11-22-2011, 02:04 PM.

  • #2
    Originally posted by stairparts View Post
    Still working on setting up the product category listing page. I took the previous advice and removed everything that called for a thumbnail and replaced it with [image1] and that works great.

    Then I was recommended to change the html of the image size. I am doing that but this is the error I'm getting now...

    I put in height="450" width="150" as the image height , width attributes which forces the image to be that size, and will stretch / skew the image until it fits those dimensions exactly.

    How would I code it, so the image scales to fit that size, but stops once either the 450 or the 150 is reached first? I only ask because I have some products that will fit 150 x 450 perfectly and it looks great.

    Then I have some that might be 200 x 200 but they get all stretch out to 450.

    ---

    Should I create a new category template for each category and set each one specific to that category?


    Just set one of the attributes, width or height. I recommend the "width" only.
    Elegant Weddings +
    www.elegantweddingsplus.ca
    www.elegantweddingsplus.com

    Comment


    • #3
      Maybe?

      <style type="text/css">
      .imageSize {
      max-height:450px !important;
      max-width:150px !important;
      min-height:150px !important;
      min-width:150px !important;
      }
      </style>

      <div style="width:150px; border:0px;">
      <img class="imageSize" src="assets/images/YourImage.jpg" width="imageRealWidth" height="imageRealHeight"></div>

      I played with your concept for a couple of minutes. This works in Dreamweaver. I haven't tried it on 3D. See if you can make it work for you. Keep in mind you need your image real heights and widths for mobile conversion.

      Comment

      Working...
      X