Announcement

Collapse
No announcement yet.

CTGY Template expanded product layout images

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

    CTGY Template expanded product layout images

    It's been a while and the first time on Shadows for this issue. Client's store has different sizes for all the product images. The height (H) dim can usually be twice as the smaller ones. But the images need to render all at the same height for each row in the category. The image dimensions don't appear to be working to help align the images in the rows. Is there a simple method from the RT? Or is it done only in CSS? BTW: I have suggested to the client to resize all the images to the same/similar H dimension since that is the best method regardless. Or maybe is there some SMT image functions that can resize on the fly, even though it might slow the page speed?

    Thanks,

    Scott

    What help do you need today!
    Interactive Design Solutions http://www.southbound.com
    MivaMerchant Business Partner | Certified MivaMerchant Web Developer
    My T-shirt Collection is mostly MivaCon T-shirts!!
    Competitive Rates, Popular Modules, and Integrations:
    Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

    #2
    Hi Scott,

    The best way to handle this would be through CSS. However, your suggestion that they resize the images is the better solution, or if they at least have the same canvas size.
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #3
      NOTE: Same in both Edge and Chrome (latest versions)

      Looks like the dimensions assigned to the image tag are being ignored?

      Code:
      <img class="x-product-list__image" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" loading="lazy" width="&mvte:category_listing:b_width;" height="&mvte:category_listing:b_height;">
      If I set the height to the smallest in the row, I'm expecting them all to be aligned. Is that correct? The height value is correct but the rendered image isn't. The only solution I see so far is adding a max-height to the class x-product-list__image. The width doesn't appear to stay in proportion however. I am seeing the same effect if I disable the "height: auto;" defined in the img tag. In either solution I'll need to define a style just for the CTGY page.

      Scott




      What help do you need today!
      Interactive Design Solutions http://www.southbound.com
      MivaMerchant Business Partner | Certified MivaMerchant Web Developer
      My T-shirt Collection is mostly MivaCon T-shirts!!
      Competitive Rates, Popular Modules, and Integrations:
      Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

      Comment


        #4
        Hi Scott,

        The height and width attributes are mainly for initial loading and to make Core Web Vitals better. They are used, however the CSS adjusts it from there. You may need to modify to obtain the best results for the site.
        Matt Zimmermann
        Front-End Development Director / Miva, Inc.

        Comment


          #5
          OK.

          Isn't there some supplied JS that helps with this aspect? Also, a CSS question, should I apply the max-height to the contained the img is in?

          Scott
          What help do you need today!
          Interactive Design Solutions http://www.southbound.com
          MivaMerchant Business Partner | Certified MivaMerchant Web Developer
          My T-shirt Collection is mostly MivaCon T-shirts!!
          Competitive Rates, Popular Modules, and Integrations:
          Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

          Comment


            #6
            Hi Scott,

            There isn't anything in Shadows for dealing with the image aspects. As for the CSS, if you apply it to the containing element you can then control the image via "object-fit" as well.
            Matt Zimmermann
            Front-End Development Director / Miva, Inc.

            Comment


              #7
              Code:
              <img class="x-product-list__image"
              So this is the proper class (Or create another class) to control the height to be rendered? Any thoughts on the image constraints?

              What help do you need today!
              Interactive Design Solutions http://www.southbound.com
              MivaMerchant Business Partner | Certified MivaMerchant Web Developer
              My T-shirt Collection is mostly MivaCon T-shirts!!
              Competitive Rates, Popular Modules, and Integrations:
              Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

              Comment


                #8
                Hi Scott,

                You would want to use the class of the element containing the IMG tag.
                Matt Zimmermann
                Front-End Development Director / Miva, Inc.

                Comment


                  #9
                  In current Shadows, the element is "figure." When I add a max-height to its class, "x-product-list__figure," the calculation seems to include the caption. The result is overlaps in the whole ctgy product layout. Should this be a DIV instead of figure?


                  What help do you need today!
                  Interactive Design Solutions http://www.southbound.com
                  MivaMerchant Business Partner | Certified MivaMerchant Web Developer
                  My T-shirt Collection is mostly MivaCon T-shirts!!
                  Competitive Rates, Popular Modules, and Integrations:
                  Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

                  Comment


                    #10
                    Hi Scott,

                    True. In that case, you will probably have to modify the code and then the CSS.
                    Matt Zimmermann
                    Front-End Development Director / Miva, Inc.

                    Comment


                      #11
                      Matt, off the topic question. I can set the H and W dims and the template generates the correct line of code, but what happens with the CWV if the image turns out to be larger? Won't that report an unwanted shift?

                      Scott
                      What help do you need today!
                      Interactive Design Solutions http://www.southbound.com
                      MivaMerchant Business Partner | Certified MivaMerchant Web Developer
                      My T-shirt Collection is mostly MivaCon T-shirts!!
                      Competitive Rates, Popular Modules, and Integrations:
                      Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

                      Comment


                        #12
                        Hey Scott,

                        That part can still be a sticky spot that they are trying to clear up. However, if the image dimensions are set and the element locked to those dimensions, there shouldn't be any shift afterwards. Another way to approach it is to make the containing element a fixed size so no matter the image size, there won't be a shift.
                        Matt Zimmermann
                        Front-End Development Director / Miva, Inc.

                        Comment

                        Working...
                        X