Team images not responsive

  • Resolved therealgilles

    (@chamois_blanc)


    2 years, 8 months ago

    The code that inserts team images on the home page section is missing srcset/sizes attributes to make them responsive:

    echo '<img class="img" src="' . esc_url( $image ) . '" ';                                                                                       
                                if ( ! empty( $alt_image ) ) {                                                                                                                  
                                        echo ' alt="' . esc_attr( $alt_image ) . '" ';                                                                                          
                                }                                                                                                                                               
                                if ( ! empty( $title ) ) {                                                                                                                      
                                        echo ' title="' . esc_attr( $title ) . '" ';                                                                                            
                                }                                                                                                                                               
                                echo '/>';
Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @chamois_blanc!

    Please provide us an URL to a page where this issue can be seen.

    Thank you!

    Thread Starter therealgilles

    (@chamois_blanc)

    Sure, your demo site: https://demo.themeisle.com/hestia/

    Here is one of the images:
    <div class="card-image"><img data-opt-src="https://mllj2j8xvfl0.i.optimole.com/YyZCPVs-bA-c9sQk/w:auto/h:auto/q:90/https://s20206.pcdn.co/hestia/wp-content/themes/hestia/assets/img/1.jpg" class="img" src="https://mllj2j8xvfl0.i.optimole.com/YyZCPVs-bA-c9sQk/w:202/h:202/q:90/dpr:2.0/https://s20206.pcdn.co/hestia/wp-content/themes/hestia/assets/img/1.jpg" alt=" Alec Thompson" title=" Alec Thompson" data-opt-lazy-loaded="true" style="max-width: 202px;" data-opt-otimized-width="202" data-opt-optimized-height="202"><noscript><img class="img" src="https://mllj2j8xvfl0.i.optimole.com/YyZCPVs-bA-c9sQk/w:auto/h:auto/q:90/https://s20206.pcdn.co/hestia/wp-content/themes/hestia/assets/img/1.jpg" alt=" Alec Thompson" title=" Alec Thompson" /></noscript></div>

    As you can see, it’s missing the proper srcset/sizes CSS attributes, which should be used to make images responsive, i.e. let the browser pick the right image size based on the browser window width.

    Thread Starter therealgilles

    (@chamois_blanc)

    I realize your demo site is using the paid version of Optimole to optimize its images, but it would be great if at least Hestia Pro provided the useful srcset/sizes attribute.

    AC

    (@purplecodes)

    Themeisle Support

    Hi @chamois_blanc,

    Thank you for your feedback.

    Optimole is a free plugin and it does the resizing to deliver a responsive image to fit perfectly on users’ devices.

    Hope this helps.

    Thread Starter therealgilles

    (@chamois_blanc)

    Optimole has a quota so it’s not right to say it’s a free plugin.
    Again Hestia, even Pro, does not offer a proper solution for responsive images.

    Mat

    (@mateithemeisle)

    Hello @chamois_blanc ,

    Thank you for your reply!

    Optimole is a free plugin with a Quota indeed, as long as you don’t exceed that, you’re not being charged. However, if you exceed it, then you would need the PRO version.

    Now coming back to the issue at hand, indeed we could improve this and I already informed our developers about it so they could implement it in future versions of the theme.

    Thank you for pointing this out and have an amazing day!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Team images not responsive’ is closed to new replies.

Tags