Pency-lazy script warps the url of the images in my custom script

xxScorpionxx replied

4 years ago

Customer Reply

Now yes, it already worked. Thanks a lot.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please add more this code to the snippet:

add_filter( 'hpp_disallow_lazyload', function ( $ok, $tag ) {
    $exclude_lazy_array = array( 'idI1', 'idI2', 'idI3' );
    foreach ( $exclude_lazy_array as $val1 ) {
        if ( strpos( $tag, $val1 ) !== false ) {
            return 1;
        }
    }
    return $ok;
}, 10, 2 );

Regards,
PenciDesign.

xxScorpionxx replied

4 years ago

Customer Reply

Help me here, you can test the filter, I don't think it will work for you, I have also tried on normally loaded images and I have also tried with disabled plugins just in case it was some incompatibility. The filter does not work.

xxScorpionxx replied

4 years ago

Customer Reply

I have copied your filter and it does not work, the urls continue to appear the same, I have put the corresponding id, I have also cleared cache and tried in several browsers just in case. Something is wrong with the filter.

In case it has something to do with it, which I don't think, the images load in document.addEventListener("DOMContentLoaded", function(event)

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please install the Code Snippet plugin, then create a new snippet with the following content:

add_filter( 'hpp_disallow_lazyload_attr', function ( $ok, $tag ) {
    $exclude_lazy_array = array( 'idI1', 'idI2', 'idI3' );
    foreach ( $exclude_lazy_array as $val2 ) {
        if ( strpos( $tag['id'], $val2 ) !== false ) {
            return 1;
        }
    }
    return $ok;
}, 10, 2 );

The script above will exclude all the image that has ID in "$exclude_lazy_array".

Regards,
PenciDesign.

xxScorpionxx started the conversation

4 years ago

Conversation Start

The pency lazy script is warping my images in the custom script I use to display images.

The original urls I use are like this:

var images = ['<a href="/out/a1" id="id1" target="_blank" rel="nofollow"><img src="/wp-content/uploads/img1.jpg" alt="alt1" loading="lazy" id="idI1" width="300" height="250"></a>',
              '<a href="out/a2" id="id2" target="_blank" rel="nofollow"><img src="/wp-content/uploads/img2.jpg" alt="alt2" loading="lazy" id="idI2" width="300" height="250"></a>',
              '<a href="/out/a3" id="id3" target="_blank" rel="nofollow"><img src="/wp-content/uploads/img3.jpg" alt="alt3" loading="lazy" id="idI3" width="300" height="250"></a>'];

and transform them into this:

var images = ['<a href="/out/a1" id="id1" target="_blank" rel="nofollow"><img class=" penci-lazy " src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20100'%3E%3C/svg%3E" data-src="/wp-content/uploads/img1.jpg" alt="alt1" loading="lazy" id="idI1" width="300" height="250"></a>',
              '<a href="out/a2" id="id2" target="_blank" rel="nofollow"><img class=" penci-lazy " src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20100'%3E%3C/svg%3E" data-src="/wp-content/uploads/img2.jpg" alt="alt2" loading="lazy" id="idI2" width="300" height="250"></a>',
              '<a href="/out/a3" id="id3" target="_blank" rel="nofollow"><img class=" penci-lazy " src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20100'%3E%3C/svg%3E" data-src="/wp-content/uploads/img3.jpg" alt="alt3" loading="lazy" id="idI3" width="300" height="250"></a>'];

consequently I get the error: Uncaught SyntaxError: missing ] after element list

and the problem I imagine comes from the svg url and its quotes:

src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20100'%3E%3C/svg%3E"

Solution? Some fix? Can you send me the previous version the shortcodes and performance until it is solved?