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

    Holistic 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
      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

        Holistic 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
          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

            Holistic 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


              #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

                Holistic 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


                  #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

                    Holistic 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


                      #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

                        Holistic 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