Skip to content

Exclude image classes not working #4

Open
@eInyzant

Description

@eInyzant

Hi,
First of all I would like to thank you for your extension.

I have a problem with my home slider where images have a "noLazyLoad" class but there are still managed through the lazy loader module.
Here is my setting for excluding classes where I added "noLazyLoad" : "loaded, notlazy, noLazyLoad"

Here is my html code :

<div class="home-slider-container">
    <div class="home-slider">
        <div class="home-slider-item">
            <img src="{{media url=wysiwyg/ED.webp}}" alt="ED" class="pagebuilder-mobile-hidden noLazyLoad" />
            <img src="{{media url=wysiwyg/ED_mobile_webp}}" alt="ED" class="pagebuilder-mobile-only noLazyLoad" />
        </div>
        <div class="home-slider-item">
            <a href="/marque/leecooper" title="Marque Lee Cooper">
                <img src="{{media url=wysiwyg/LE.webp}}" alt="Marque Lee Cooper" class="pagebuilder-mobile-hidden noLazyLoad" />
                <img src="{{media url=wysiwyg/LE_mobile.webp}}" alt="Marque Lee Cooper" class="pagebuilder-mobile-only noLazyLoad" />
            </a>
        </div>
    </div>
</div>
<script type="text/javascript">
require(['jquery', 'slick'], function($, slick) {
    $('.home-slider').slick({
        autoplay: true,
        dots: true
    });});
</script>

After debugging it seams that the method "addLazyLoadImage" in Plugin/LazyResponse.php does not detect the image classes correctly.

Here my working solution where I changed the regexp and the way of getting the classes.

public function addLazyloadImage($content, $placeholder)
{
    return preg_replace_callback(
        '/<img\s+(?![^>]*?\bdata-src=)([^>]+)>/',
        function($match) use ($placeholder) {
            // Vérifie si l'attribut data-src existe déjà.
            if (stripos($match[0], ' data-src="') !== false) {
                return $match[0];
            }

            // Initialisation d'une variable pour les classes d'image.
            $class = '';

            // Vérification de l'existence de l'attribut class.
            if (preg_match('/class="([^"]*)"/', $match[0], $classMatch)) {
                $class = $classMatch[1];
                if ($this->isExclude($class)) {
                    return $match[0];
                }
                // Ajoute lazyload à la classe existante
                $lazy = preg_replace('/class="([^"]*)"/', 'class="$1 lazyload"', $match[0]);
            } else {
                // Ajoute la classe lazyload si aucune classe n'est présente
                $lazy = str_replace('<img ', '<img class="lazyload" ', $match[0]);
            }

            // Remplacer src par data-src et ajouter le placeholder à src.
            return preg_replace('/src="([^"]+)"/', 'src="' . $placeholder . '" data-src="$1"', $lazy);
        },
        $content
    );
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions