Home Forums WoodMart support forum WebP in AJAX search

WebP in AJAX search

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #248689

    lucablight2
    Participant

    Hello,
    Sińce im uploading a lot of images, I’ve decided to go with WebP format to increase site performance.

    I’ve added following to functions:

    <?php
    /**
     * Enqueue script and styles for child theme
     */
    function woodmart_child_enqueue_styles() {
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'woodmart-style' ), woodmart_get_theme_info( 'Version' ) );
    }
    add_action( 'wp_enqueue_scripts', 'woodmart_child_enqueue_styles', 10010 );
    //** *Enable upload for webp image files.*/
    function webp_upload_mimes($existing_mimes) {
        $existing_mimes['webp'] = 'image/webp';
        return $existing_mimes;
    }
    add_filter('mime_types', 'webp_upload_mimes');
    //** * Enable preview / thumbnail for webp image files.*/
    function webp_is_displayable($result, $path) {
        if ($result === false) {
            $displayable_image_types = array( IMAGETYPE_WEBP );
            $info = @getimagesize( $path );
    
            if (empty($info)) {
                $result = false;
            } elseif (!in_array($info[2], $displayable_image_types)) {
                $result = false;
            } else {
                $result = true;
            }
        }
    
        return $result;
    }
    add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

    And it’s working fine by now, the only issue is that main product thumbnail is not displayed in Ajax search result – it only shows jpg format.

    Is there any way to add action to display WebP thumbnail in Ajax search ?

    Attachments:
    You must be logged in to view attached files.
    #248788

    Artem Temos
    Keymaster

    Hello,

    This image has a size of 1x1 probably caused by some automatic process https://prnt.sc/vy0epk
    You need to specify the correct size for your product images in Appearance -> Customize -> WooCommerce -> Product images. Then install the Regenerate Thumbnails plugin and regenerate all thumbnails on your website.

    Kind Regards

    #249350

    lucablight2
    Participant

    Hello,

    Thank you for that instructions – it helped.

    Now I’m facing a different problem with thumbnail.
    I want to change image size for Information Box element.

    I’ve added my custom thumbnail size to WordPress functions – 200 width.

    When I change the size of the information box image – elementor get’s it right.
    But after I publish, its stays the same. I’ve cleared cache- and it didn’t help.

    Images in attachment

    Attachments:
    You must be logged in to view attached files.
    #249459

    Artem Temos
    Keymaster

    Hi,

    Could you please send us a link to your website where we can see this issue?

    Kind Regards

    #249540

    lucablight2
    Participant

    Hello,
    Of course, here it is.

    #249582

    Artem Temos
    Keymaster

    Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue. And on that page we see that all images are in the same size.

    .woodmart-lazy-load {
      width: auto;
    }
    #249643

    lucablight2
    Participant

    Hello,
    That didn’t help.

    I want all infobox images to be 200px widght the custom thumbnail I created name is ‘szeroki-thumb’. And beside first 3 infobox images – all the rest is set to that thumbnail.

    #249652

    Artem Temos
    Keymaster

    Hello,

    Could you please disable all plugins that are not related to our theme and provide us your admin access so we could check it?

    Thank you in advance

    #249809

    lucablight2
    Participant

    Hello,

    Here you go

    #249868

    Artem Temos
    Keymaster

    It looks like you are using webp images. Currently, Elementor doesn’t have full support for it. As you can see, images can’t be resized to a custom size when you use them inside the Elementor elements.

    #250777

    lucablight2
    Participant

    Awesome thank you for reply.
    I used general Elementor widget -“Image Box” and it worked.
    It seem’s that its not working with your element’s.

    #250782

    Artem Temos
    Keymaster

    Even with the default element, the image is not resized. You see the image smaller because of special CSS styles https://prnt.sc/w29gzo
    If you want, we can reduce our theme’s infobox image with CSS for you.

    #250808

    lucablight2
    Participant

    Oh I get it now.
    Thank you for detail on that.

    If you want, we can reduce our theme’s infobox image with CSS for you.

    Would be great

    #250823

    Artem Temos
    Keymaster

    Try to add the following code snippet to the Custom CSS area in Theme Settings to do this

    .woodmart-info-box .info-box-icon {
      width: 40%;
    }
    #257817

    Mensro
    Participant

    Hello, good work.

    I definitely need help with this. I’m looking for a guide on what to do to support the WEBP format.

    #257896

    Artem Temos
    Keymaster

    Hello @Mensro,

    Currently, we don’t have a guide on how to implement Webp on your website. But you can try to use the Imagify plugin that adds such ability.

    Kind Regards

Viewing 16 posts - 1 through 16 (of 16 total)