Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2941248
Pency-lazy script warps the url of the images in my custom script
Closed

Comments

  • xxScorpionxx started the conversation

    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?

  •  2,492
    PenciDesign replied

    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 replied

    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 replied privately
  • xxScorpionxx replied

    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.

  •  2,492
    PenciDesign replied

    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

    Now yes, it already worked. Thanks a lot.