• Resolved imrelaszlo

    (@imrelaszlo)


    Hello!

    In media.cls.php, there is a commented out line:

    // add_filter( 'wp_get_attachment_image_src', array( $this, 'webp_attach_img_src' ), 988 );// todo: need to check why not

    My question: why? It will be super good if plugin replaces all images loaded with wp_get_attachment_image_src() function. I’ve an Elementor carousel with “large” JPG images, plugin leaved them unoptimized.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Support qtwrk

    (@qtwrk)

    it’s listed as to-do , so I guess it’s on the dev’s table

    I will make inquiry

    • This reply was modified 11 months ago by qtwrk.
    Plugin Support qtwrk

    (@qtwrk)

    we used buffer to replace, this is redundant

    Thread Starter imrelaszlo

    (@imrelaszlo)

    Hello qtwrk! The images in Elementor’s carousel plugin are CSS background images. They are not replaced. Can I call the replacement function outside of the plugin? I can write a code for my website if calling replacement functions are accessible and public from the plugin.

    Plugin Support qtwrk

    (@qtwrk)

    background-image should be supported , for long time

    please share some example , and also , have you verified the webp existence by attach .webp to image URL in question ?

    Thread Starter imrelaszlo

    (@imrelaszlo)

    Hello! In the media manager, there is a webp wersion. Azd, of course, if I extend the URL fith “.webp”, the image file is there.

    Website URL: https://www.vitalforce.hu/

    Relevant code:

    <div class="swiper-slide" data-swiper-slide-index="0" style="width: 980px; transition-duration: 0ms; opacity: 1; transform: translate3d(-980px, 0px, 0px);">
    							<a href="https://www.vitalforce.hu/termekkategoria/futopad/">    <div class="elementor-carousel-image" role="img" aria-label="Futópad, futópadok" style="background-image: url('https://www.vitalforce.hu/www-uploads/2022/07/1-vitalforce-slider-2022-980x400-futopadok.jpg')">
                    </div>
        </a>						</div>
    Plugin Support qtwrk

    (@qtwrk)

    I see , the way how it loads image style="background-image: url(' is not supported at this moment.

    function additional_webp_replacement( $content ) {
        if (preg_match("/background-image: url\('(https?:\/\/[^\/]+)?(\/[^']+)'\)/", $content, $matches)) {
            $image_path = $matches[2];
            $webp_ath = str_replace(".jpg", ".jpg.webp", $image_path);
            $webp_path_disk = $_SERVER['DOCUMENT_ROOT'] . $webp_path;
            if (file_exists($webp_path_disk)) {
                $content = str_replace($image_path, $webp_path, $content);
            }
        }
        return $content;
    }
    add_filter( 'litespeed_buffer_after', 'additional_webp_replacement', 0);

    by the way , I worked out this , please give it a try , see if it works

    • This reply was modified 10 months, 3 weeks ago by qtwrk.
    Thread Starter imrelaszlo

    (@imrelaszlo)

    Dear qtwrk!

    Thank you for help me. The problem: the apostrophes aound the URL are HTML entities (numerical entities) in the server gererated source code. Please check it in the code sent by the server, not in the browser’s inspect window. I cannot modify the pattern to include this entities (I’ve testing with https://regex101.com/ website).

    Plugin Support qtwrk

    (@qtwrk)

    that code is supposed to work on server-side source code before sent to browser

    please share the full HTML source , the partial code you provided, I tested my snippet and it works

    Thread Starter imrelaszlo

    (@imrelaszlo)

    The portal-motor replaces the HTML encoded characters.

    The problem is here:

    url('https

    In the real code, it is (without spaces):

    u r l ( & # 0 3 9 ; h t t p s
    Plugin Support qtwrk

    (@qtwrk)

    
    
    function buffer_output_after( $content ) {
        if (strpos($_SERVER['REQUEST_URI'], "test") !== false){
            error_log( print_r($content, true), 3, '/path/to/public_html/dump_after.log' );
        }
        return $content;
    }
    add_filter( 'litespeed_buffer_after', 'buffer_output_after', 0);
    
    function buffer_output_before( $content ) {
        if (strpos($_SERVER['REQUEST_URI'], "test") !== false){
            error_log( print_r($content, true), 3, '/path/to/public_html/dump_before.log' );
        }
        return $content;
    }
    add_filter( 'litespeed_buffer_before', 'buffer_output_before', 0);
    
    

    change the /path/to/public_html/ to actual one, this will log out the HTML source code before and after LSCWP manipulation , please share me the output.

    access to the page like https://yourdomain.com/?test to trigger this logging.

    • This reply was modified 10 months, 3 weeks ago by qtwrk.
    Thread Starter imrelaszlo

    (@imrelaszlo)

    Hello! Here is the output: https://pastes.io/inceltmjge

    Thread Starter imrelaszlo

    (@imrelaszlo)

    Here is my final code in case anyone needs it:

    function mx_additional_webp_replacement($content) {
      $matches = [];
      $lsmedia = \LiteSpeed\Core::cls('Media');
      $webp_ok = (defined('LITESPEED_GUEST_OPTM') || $lsmedia->conf(\LiteSpeed\Base::O_IMG_OPTM_WEBP)) && $lsmedia->webp_support();
      if ($webp_ok && preg_match_all("/background-image: url\('(https?:\/\/[^\/]+)?(\/[\w\-\/\.jpg]+)'\)/", $content, $matches, PREG_PATTERN_ORDER)) {
        if (isset($matches[2]) && is_array($matches[2])):
          foreach ($matches[2] as $image):
            if (!empty($image) && file_exists(ABSPATH . $image) && file_exists(ABSPATH . ($webp = str_replace(".jpg", ".jpg.webp", $image)))):
              $content = str_replace($image, $webp, $content);
            endif;
          endforeach;
        endif;
      }
      return $content;
    }
    
    add_filter('litespeed_buffer_after', 'mx_additional_webp_replacement', 99, 1);
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Why WEBP image relace not hooked to wp_get_attachment_image_src?’ is closed to new replies.