Поддержка Плагины Lazy load optimizer

  • Установил плагин Lazy load optimizer, но в логах сидит ошибка:
    Undefined variable: transition C:i////pluginslazy-load-optimizersrcFrontendFrontend.php on line 174
    Документ Frontend:

    
    <?php namespace LazyLoadOptimizer\Frontend;
    
    use Premmerce\SDK\V2\FileManager\FileManager;
    use LazyLoadOptimizer\LazyLoadOptimizerPlugin;
    
    /**
     * Class Frontend
     *
     * @package LazyLoadOptimizer\Frontend
     */
    class Frontend
    {
    
        /**
         * @var FileManager
         */
        private $fileManager;
    
        public $settings;
    
        public function __construct(FileManager $fileManager)
        {
            $this->fileManager = $fileManager;
            $this->registerActions();
            $this->settings = array(
                'lazyload_styles' => get_theme_mod('lazyload_styles',1)
            );
        }
    
        private function registerActions()
        {
            add_action('wp_enqueue_scripts', array($this, 'enqueueScripts'));
            add_action('wp_head', array($this, 'addInlineStyles'));
            add_filter('wp_get_attachment_image_attributes', array($this, 'addDataSrcAttachmentImage'), 50, 3);
            add_action('init', array($this, 'initActions'));
            add_filter('script_loader_tag', array($this, 'addAsyncAttribute'), 20, 2);
            add_filter('the_content', array($this, 'filterImages'), 100);
            add_filter('acf_the_content', array($this, 'filterImages'), 100);
            add_filter('widget_text', array($this, 'filterImages'), 100);
            add_filter('get_avatar', array($this, 'filterAvatar'), 10);
    
        }
    
        public function enqueueScripts()
        {
    
            wp_enqueue_script(
                'lazysizes',
                $this->fileManager->locateAsset('frontend/js/lazysizes.min.js'),
                array(),
                LazyLoadOptimizerPlugin::VERSION,
                true
            );
    
            if($this->settings['lazyload_styles']) {
                wp_add_inline_script('lazysizes', "document.addEventListener('lazyloaded', function (e)  {
        var alt = e.target.getAttribute('data-alt');
        if(alt){
            e.target.removeAttribute('data-alt');
            e.target.setAttribute('alt',alt);
        }
        var title = e.target.getAttribute('data-title');
        if(title){
            e.target.removeAttribute('data-title');
            e.target.setAttribute('title',title);
        }
    });");
            }
    
    //        wp_enqueue_style(
    //            'lazy-load-styles',
    //            $this->fileManager->locateAsset('frontend/css/lazy-load-styles.css'),
    //            array(),
    //            LazyLoadOptimizerPlugin::VERSION
    //        );
    
        }
    
        public function addInlineStyles()
        {
            $this->settings = array(
                'lazyload_styles' => get_theme_mod('lazyload_styles',1),
                'img_url' => get_theme_mod('spinner_image', $this->fileManager->locateAsset('frontend/img/50x50-loader.gif')),
                'loading_effect' => get_theme_mod('loading_effect','spinner'),
                'is_spinner' => get_theme_mod('spinner',1),
                'is_fadein' => get_theme_mod('fade_in',0),
                'is_animation' => get_theme_mod('animation',0),
                'spinner_size' => get_theme_mod('spinner_size',30),
                'time_animation' => get_theme_mod('time_animation',300),
                'time_fadein' => get_theme_mod('time_fadein',300),
                'is_transparent' => get_theme_mod('transparent_background',0),
                'background_color' => get_theme_mod('lla_background_color', '#ffffff')
            );
    
            $spinner = '';
            $opacity = 1;
    
            if($this->settings['is_spinner']){
                $spinner = " background-image: url('{$this->settings['img_url']}');";
            }
    
            if($this->settings['is_fadein']){
                $opacity = 0;
                $transition = "-webkit-transition:opacity {$this->settings['time_fadein']}ms;
    -moz-transition: opacity {$this->settings['time_animation']}ms;
    -ms-transition: opacity {$this->settings['time_animation']}ms;
    -o-transition: opacity {$this->settings['time_animation']}ms;
    transition: opacity {$this->settings['time_animation']}ms;";
            }
    
            if($this->settings['is_animation']){
                $transition = "-webkit-transition:{$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition:{$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-transition:{$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition:{$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition:{$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);";
            }
    
            if($this->settings['is_fadein'] && $this->settings['is_animation']){
                $opacity = 0;
                $transition = "-webkit-transition: all {$this->settings['time_fadein']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: all {$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-transition: all {$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: all {$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all {$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);";
            }
    
            if($this->settings['is_transparent']){
                $backgroundColor = 'background-color: rgba(0,0,0,0);';
            }else{
                $backgroundColor = 'background-color: '.$this->settings['background_color'].';';
            }
    
    $styles = "<style>
    img.lazyload{
    display: block;
    font-size:0px;
    $backgroundColor
    $spinner
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: {$this->settings['spinner_size']}px;
    }
    img.lazyloading{
    display: block;
    max-height: 0px;
    height: 0px;
    $backgroundColor
    $spinner
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: {$this->settings['spinner_size']}px;
    }
    @supports (--custom:property) {
        [style*='--aspect-ratio'].lazyload,[style*='--aspect-ratio'].lazyloading{
            padding-bottom: calc(100% / (var(--aspect-ratio)));
        }
    }
    .lazyload,
    .lazyloading {
    opacity: $opacity; 
    }
    .lazyload,
    .lazyloaded {
    opacity: 1;
    $transition;
    }
    .wp-block-gallery.is-cropped .blocks-gallery-item img.lazyload {
    height:auto;
    }
    </style>";
    
            if($this->settings['lazyload_styles']){
            echo $styles;
            }else{
                echo "<style>img.lazyload{opacity: 0;}</style>";
            }
        }
    
        public function addAsyncAttribute($tag, $handle)
        {
    
            if ('lazysizes' !== $handle) {
                return $tag;
            }
    
            return str_replace(' src', ' async="async" src', $tag);
        }
    
        public function addDataSrcAttachmentImage($attr, $attachment, $size)
        {
            $image = image_downsize($attachment->ID,$size);
            if(!empty($image[1]) && !empty($image[2])){
                $ratio = $image[1]/$image[2];
            }else{
                $ratio = 2;
            }
            $attr['style'] = '--aspect-ratio:'.$ratio.';';
            if (isset($attr['src'])){
                $dataSrc = array('data-src' => $attr['src']);
                unset($attr['src']);
                $attr = $dataSrc + $attr;
            }
    
            if($this->settings['lazyload_styles']) {
                if (isset($attr['title'])) {
                    $dataTitle = array('data-title' => $attr['title']);
                    unset($attr['title']);
                    $attr = $attr + $dataTitle;
                }
    
                if (isset($attr['alt'])) {
                    $dataAlt = array('data-alt' => $attr['alt']);
                    unset($attr['alt']);
                    $attr = $attr + $dataAlt;
                }
            }
    
            if (isset($attr['srcset'])){
                $dataSrcSet = array('data-srcset' => $attr['srcset']);
                unset($attr['srcset']);
                $attr = $dataSrcSet + $attr;
            }
            $attr['class'] = $attr['class'] . ' lazyload';
    
            return $attr;
        }
    
        public function initActions()
        {
            global $allowedposttags;
            $img = $allowedposttags['img'];
            $dataSrc = array('data-src' => true);
            $dataSrcSet = array('data-srcset' => true);
            $allowedposttags['img'] = $img + $dataSrc + $dataSrcSet;
    
            remove_action('woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10);
            add_action('woocommerce_before_subcategory_title', array($this, 'woocommerceSubcategoryThumbnail'), 10);
    
        }
    
        public function woocommerceSubcategoryThumbnail($category)
        {
    
            $small_thumbnail_size = apply_filters('subcategory_archive_thumbnail_size', 'woocommerce_thumbnail');
            $dimensions = wc_get_image_size($small_thumbnail_size);
            $thumbnail_id = get_woocommerce_term_meta($category->term_id, 'thumbnail_id', true);
    
            if ($thumbnail_id) {
                $image = wp_get_attachment_image_src($thumbnail_id, $small_thumbnail_size);
                if(!empty($image[1]) && !empty($image[2])){
                    $ratio = $image[1]/$image[2];
                }else{
                    $ratio = 2;
                }
                $image = $image[0];
                $image_srcset = function_exists('wp_get_attachment_image_srcset') ? wp_get_attachment_image_srcset($thumbnail_id, $small_thumbnail_size) : false;
                $image_sizes = function_exists('wp_get_attachment_image_sizes') ? wp_get_attachment_image_sizes($thumbnail_id, $small_thumbnail_size) : false;
    
            } else {
                $image = wc_placeholder_img_src();
                $image_srcset = false;
                $image_sizes = false;
                $ratio = 1.0179;
            }
    
            if ($image) {
                // Prevent esc_url from breaking spaces in urls for image embeds.
                // Ref: https://core.trac.wordpress.org/ticket/23605.
                $image = str_replace(' ', '%20', $image);
                $style = 'style="--aspect-ratio:'.$ratio.';"';
                // Add responsive image markup if available.
                if ( $image_srcset && $image_sizes ) {
                    echo '<img />name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" data-srcset="' . esc_attr( $image_srcset ) . '" sizes="' . esc_attr( $image_sizes ) . '" class="lazyload" />';
                } else {
                    echo '<img />name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" class="lazyload" />';
                }
            }
        }
    
        public function FilterImages($content)
        {
            
            $matches = array();
            preg_match_all('/<img[\s\r\n]+(.*?)>/is', $content, $matches);
    
            $search = array();
            $replace = array();
    
            foreach ($matches[0] as $img_html) {
    
                if (strpos($img_html, 'data-src') !== false || strpos($img_html, 'data-srcset') !== false) {
                    continue;
                }
    
                $width= array();
                $heigth= array();
    
                preg_match('/width=["\']([0-9]{2,})["\']/i', $img_html, $width);
                preg_match('/height=["\']([0-9]{2,})["\']/i', $img_html, $heigth);
    
                if(!empty($width) && !empty($heigth)) {
                    $ratio = $width[1]/$heigth[1];
                    $isWidth = 1;
                }else{
                    preg_match('/-([0-9]{2,})x/i', $img_html, $width);
                    preg_match('/[0-9]{2,}x([0-9]{2,})\./i', $img_html, $heigth);
                    if(!empty($width) && !empty($heigth)){
                        $ratio = $width[1]/$heigth[1];
                        $isWidth = 0;
                    }else{
                        $ratio = 2;
                    }
                }
    
                $style = 'style="--aspect-ratio:'.$ratio.';"';
                $widthHtml = '';
                if(!$isWidth){
                    $widthHtml = 'width="'.$width[1].'"';
                }
                $output = '';
                $output = preg_replace('/<img(.*?)src=/is', '<img '.$widthHtml.' '.$style.' $1data-src=', $img_html);
                $output = preg_replace('/<img(.*?)srcset=/is', '<img$1data-srcset=', $output);
                if($this->settings['lazyload_styles']) {
                    $output = preg_replace('/<img(.*?)alt=/is', '<img$1data-alt=', $output);
                    $output = preg_replace('/<img(.*?)title=/is', '<img$1data-title=', $output);
                }
    
                if (preg_match('/class=["\']/i', $output)) {
                    $output = preg_replace('/class=(["\'])(.*?)["\']/is', 'class=$1$2 lazyload$1', $output);
                } else {
                    $output = preg_replace('/<img/is', '<img class="lazyload"', $output);
                }
    
                if (strpos($img_html, 'data-id') === false &&  $this->settings['lazyload_styles']) {
                    $classHtml = array();
                    preg_match('/class=["\'](.*?)["\']/i',$img_html, $classHtml);
                    $output = '<span '.$classHtml[0].' style="display:block;max-width:'.$width[1].'px;">'.$output.'</span>';
                }
    
                array_push($search, $img_html);
                array_push($replace, $output);
            }
    
            $search = array_unique($search);
            $replace = array_unique($replace);
            $content = str_replace($search, $replace, $content);
    
            if($this->settings['lazyload_styles']) {
                $matchesFigure = array();
                preg_match_all('/<figure(.*?)figure>/i', $content, $matchesFigure);
    
                foreach ($matchesFigure[0] as $figure_html) {
                    $output = preg_replace('/<figure(.*?)(<span.*;">)(.*?)(<\/span>)(.*?)figure>/i', '<figure$1$3$5figure>', $figure_html);
                    array_push($search, $figure_html);
                    array_push($replace, $output);
                }
    
                $search = array_unique($search);
                $replace = array_unique($replace);
                $content = str_replace($search, $replace, $content);
            }
            return $content;
        }
    
        public function FilterAvatar($content)
        {
    
            $matches = array();
            preg_match_all('/<img[\s\r\n]+.*?>/is', $content, $matches);
    
            $search = array();
            $replace = array();
    
            foreach ($matches[0] as $img_html) {
    
                if (strpos($img_html, 'data-src') !== false || strpos($img_html, 'data-srcset') !== false) {
                    continue;
                }
    
                $width= array();
                $heigth= array();
    
                preg_match('/width=["\']([0-9]{2,})["\']/i', $img_html, $width);
                preg_match('/height=["\']([0-9]{2,})["\']/i', $img_html, $heigth);
    
                if(!empty($width) && !empty($heigth)) {
                    $ratio = $width[1]/$heigth[1];
                }else{
                    preg_match('/-([0-9]{2,})x/i', $img_html, $width);
                    preg_match('/[0-9]{2,}x([0-9]{2,})\./i', $img_html, $heigth);
                    if(!empty($width) && !empty($heigth)){
                        $ratio = $width[1]/$heigth[1];
                    }else{
                        $ratio = 2;
                    }
                }
    
                $style = 'style="--aspect-ratio:'.$ratio.';"';
    
                $output = '';
                $output = preg_replace('/<img(.*?)src=/is', '<img '.$style.' $1data-src=', $img_html);
                $output = preg_replace('/<img(.*?)srcset=/is', '<img$1data-srcset=', $output);
                if($this->settings['lazyload_styles']) {
                    $output = preg_replace('/<img(.*?)alt=/is', '<img$1data-alt=', $output);
                }
    
                if (preg_match('/class=["\']/i', $output)) {
                    $output = preg_replace('/class=(["\'])(.*?)["\']/is', 'class=$1$2 lazyload$1', $output);
                } else {
                    $output = preg_replace('/<img/is', '<img class="lazyload"', $output);
                }
    
                array_push($search, $img_html);
                array_push($replace, $output);
            }
    
            $search = array_unique($search);
            $replace = array_unique($replace);
            $content = str_replace($search, $replace, $content);
            return $content;
        }
    }
    

    Что не так? Сохранен в UTF-8.

    • Тема изменена 3 года, 5 месяцев назад пользователем Yui. Причина: для оформления кода есть кнопочка code

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 8 ответов — с 1 по 8 (всего 8)
  • Что не так?

    п. 7, 14

    Извиняюсь, в следующий раз буду внимательнее.

    https://pastebin.com/kDfAt1bb
    Загрузил на данный ресурс содержимое Frontend

    Переменная $transition не объявлена до 102 строки, а должна

    https://pastebin.com/EyQuyTaE
    Объявил вроде как 102, но по-прежнему та же ошибка в логах. Может еще что-то можно попробовать? Большое спасибо за отклик.

    Не объявили…

    Ошибка вам пишет «Неопределенная переменная: transition» (только на английском). Это значит что в момент вывода $transition она не определена, т.к. $transition во всем вашем коде находится внутри условий IF. По ходу выполнения кода, ни одно из условий не выполнилось, а значит и переменной такой нет.

    Вот что бы она была определена, перед условиями нужно написать, например,
    $transition = "";
    т.е. задать переменной как минимум пустое значение.

    И эту строку вам нужно вставить перед
    if($this->settings['is_fadein']){

    Сделал, ошибка ушла. Большое спасибо)
    Правда плагин, по-прежнему, не работает(
    Есть какой-нибудь тест для работоспособности плагина?

    Есть какой-нибудь тест для работоспособности плагина?

    Вкладка «сеть» в инструментах вебмастера браузера. В современных можно даже эмалировать низкую скорость загрузки.

Просмотр 8 ответов — с 1 по 8 (всего 8)
  • Тема «Lazy load optimizer» закрыта для новых ответов.