Announcement

Collapse
No announcement yet.

Image bounding box or make all images to same proportion?

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

    Image bounding box or make all images to same proportion?

    I'm trying to get the thumbnail boxes on the category pages within the levels theme to be all the same height and width. They are and they constrain the uploaded pictures nicely.
    However, the text starts underneath the thumbnail, not the constrained height of the thumbnail box.
    So, for the products in the category layout to line-up, I guess I either have to make all of the pictures the same proportion (with white background if needed), or somehow make the text start underneath the constrained height amount of the image bounding box. Where would I find that and what would I need to add to make the text start in the same place for every product within the category, regardless of the dimension of image within the bounding box?

    #2
    Can you post a link to an example page?
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      I had created two test products, one each with a vertical and a horizontal picture to see how they would lay out.

      Here is a link to the two products assigned within a normal category:
      http://dev.galatiinternational.com/closeouts.html
      and then the same thing happens on the feature layout on the index storefront page:
      http://dev.galatiinternational.com/storefront.html

      I am wanting the text box to line up under the picture at the same point for a consistent look. I figure this can be achieved by either making the image boxes all the same proportions, or making the text start underneath the constrained height amount of the image bounding box.

      Comment


        #4
        It looks like your site is behind password protection so I am unable to see it. If you would like, you can PM me the credentials.
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          The quick solution would be to make the image canvases all the same size, this would put the text in the same starting point. Alternately, you could utilize JavaScript to run through all the DIV elements, which wrap the images, to determine the tallest one and then apply that height to all the wrapping DIV elements. The downside of the JavaScript solution is it can impact page speed performance.
          Matt Zimmermann

          Miva Web Developer
          Alchemy Web Development
          https://www.alchemywebdev.com
          Site Development - Maintenance - Consultation

          Miva Certified Developer
          Miva Professional Developer

          https://www.dev4web.net | Twitter

          Comment

          Working...
          X