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

    Need to offer Shipping Insurance?
    Interactive Design Solutions https://www.myids.net
    MivaMerchant Business Partner | Certified MivaMerchant Web Developer
    Competitive Rates, Custom Modules and Integrations, Store Integration
    AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
    My T-shirt Collection is mostly MivaCon T-shirts!!

    #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

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




      Need to offer Shipping Insurance?
      Interactive Design Solutions https://www.myids.net
      MivaMerchant Business Partner | Certified MivaMerchant Web Developer
      Competitive Rates, Custom Modules and Integrations, Store Integration
      AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
      My T-shirt Collection is mostly MivaCon T-shirts!!

      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

        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
          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
          Need to offer Shipping Insurance?
          Interactive Design Solutions https://www.myids.net
          MivaMerchant Business Partner | Certified MivaMerchant Web Developer
          Competitive Rates, Custom Modules and Integrations, Store Integration
          AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
          My T-shirt Collection is mostly MivaCon T-shirts!!

          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

            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


              #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?

              Need to offer Shipping Insurance?
              Interactive Design Solutions https://www.myids.net
              MivaMerchant Business Partner | Certified MivaMerchant Web Developer
              Competitive Rates, Custom Modules and Integrations, Store Integration
              AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
              My T-shirt Collection is mostly MivaCon T-shirts!!

              Comment


                #8
                Hi Scott,

                You would want to use the class of the element containing the IMG tag.
                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


                  #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?


                  Need to offer Shipping Insurance?
                  Interactive Design Solutions https://www.myids.net
                  MivaMerchant Business Partner | Certified MivaMerchant Web Developer
                  Competitive Rates, Custom Modules and Integrations, Store Integration
                  AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
                  My T-shirt Collection is mostly MivaCon T-shirts!!

                  Comment


                    #10
                    Hi Scott,

                    True. In that case, you will probably have to modify the code and then the CSS.
                    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


                      #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
                      Need to offer Shipping Insurance?
                      Interactive Design Solutions https://www.myids.net
                      MivaMerchant Business Partner | Certified MivaMerchant Web Developer
                      Competitive Rates, Custom Modules and Integrations, Store Integration
                      AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
                      My T-shirt Collection is mostly MivaCon T-shirts!!

                      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

                        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