Как обернуть фотки в микроразметку (решение)
Опишу как обернуть фотки содержимого в микроразметку
schema.org/ImageObject
и ресайзнуть их по ширине контента с помощью плагина
Было
Стало
schema.org/ImageObject
и ресайзнуть их по ширине контента с помощью плагина
Было
Стало
Комментарии: 2
1. Скачиваем библиотеку phpQuery
Кидаем её куда-нибудь, я залил в /assets/phpQuery
Так же потребуется phpthumbon
2. Создаем плагин с названием imageSrc
вешаем событие OnWebPagePrerender
Содержимое
Кидаем её куда-нибудь, я залил в /assets/phpQuery
Так же потребуется phpthumbon
2. Создаем плагин с названием imageSrc
вешаем событие OnWebPagePrerender
Содержимое
<?php
switch ($modx->event->name) {
case 'OnWebPagePrerender':
if ( $modx->context->get( 'key' ) == 'mgr') return;
// Условия для каких шаблонов мы будем это делать, у меня ID 3 - это статейные шаблоны
$templates_allow = array(3);
// класс обертки контента, где нужно искать фотки
$wrapper_class = 'about-content';
// Ваша ширина контента
$wrapper_width = 866;
$img_wrapper_min_width = 100; // минимальная ширина фотки для обертки
$img_wrapper_min_width_fancybox = 1000; // минимальная ширина фотки для обертки в fancybox
$img_wrapper_min_height_fancybox = 300; // минимальная высота фотки для обертки в fancybox
$template = $modx->resource->get('template');
$resource_id = $modx->resource->get('id');
$cache_key = md5($resource_id);
$file = MODX_BASE_PATH . 'resourcecache/u/prep_' . $cache_key . '.txt';
if(!in_array($template,$templates_allow)) return;
$output = &$modx->resource->_output;
if(is_file($file)){
if(!empty($cache)){
// здесь у меня дополнительная обертка кеша
$string = preg_replace('|<div class="'.$wrapper_class.'">(.*)</div>|isU', '<div class="'.$wrapper_class.' about-cache">'.$cache.'</div>',$output);
$output = $string;
return;
break;
}
}
include_once MODX_ASSETS_PATH . 'phpQuery/phpQuery.php';
// здесь я удаляю пустые теги
$output = str_replace(array('<h2> </h2>','<h3> </h3>','<h1> </h1>'),'<p> </p>',$output);
$html = phpQuery::newDocument($output);
// получаю картинки с условием
$img = $html->find('.'.$wrapper_class." img:not(.aggregate__img):not(.gallery__img)");
$i = 0;
foreach($img as $value){
$src = $value->getAttribute('src');
$img_path = MODX_BASE_PATH.ltrim($src, "/");
if(file_exists($img_path)){
$img_size = getimagesize($img_path);
$width = $img_size[0];
$height = $img_size[1];
$attr_width = $value->getAttribute('width');
$attr_height = $value->getAttribute('height');
// пропускаю фотки которые больше px
if($width >$img_wrapper_min_width && (isset($attr_width) && $attr_width > $img_wrapper_min_width)){
if($width >$wrapper_width){
$i++;
$w = 'w='.((isset($attr_width) && $attr_width < $wrapper_width) ? $attr_width :$wrapper_width);
$new_src = $modx->runSnippet('phpthumbon',array('input'=>$src,'options'=>$w.'&q=60&bg=ffffff'));
$img_mew_path = MODX_BASE_PATH.ltrim($new_src, "/");
$new_img_size = getimagesize($img_mew_path);
$new_width = $new_img_size[0];
$new_height = $new_img_size[1];
$src = $modx->runSnippet('phpthumbon',array('input'=>$src,'options'=>'q=100&f=png&bg=ffffff'));
$value->setAttribute('src',$new_src);
$value->setAttribute('data-src',$src);
if((isset($attr_width) && $attr_width > $wrapper_width)){
$value->setAttribute('width',$wrapper_width);
$value->setAttribute('height',$new_height);
}else{
$value->setAttribute('width',$new_width);
$value->setAttribute('height',$new_height);
}
$name = $value->getAttribute('alt');
if(!$name){
$value->setAttribute('alt',($name ? $name : $modx->resource->get('pagetitle')));
}
$value = pq($value);
$new_html = $value;
if($new_height > $img_wrapper_min_height_fancybox && $width > $img_wrapper_min_width_fancybox || (isset($attr_width) && $attr_width!=$width) && ((isset($new_height) && $new_height!=$height && $height >$img_wrapper_min_height_fancybox))){
// здесь я оборачиваю большие фотки, что бы их можно было показать при помощи fancybox
$new_html = '<a href="'.$src.'" class="article__image" data-fancybox="article-'.$i.'">'.$new_html.'</a>';
}
$new_html .='<meta itemprop="name" content="'.($name ? $name : $modx->resource->get('pagetitle')).'">';
$new_html .='<meta itemprop="width" content="'.$width.'">';
$new_html .='<meta itemprop="height" content="'.$height.'">';
$new_html .='<meta itemprop="contentUrl" content="'.$src.'">';
$new_html = $value->wrap('<span itemscope="" itemtype="http://schema.org/ImageObject">'.$new_html.'</span>');
$value->replaceWith($new_html);
}else{
$i++;
$new_src = $src;
$value->setAttribute('itemprop','contentUrl');
$name = $value->getAttribute('alt');
if(!$name){
$value->setAttribute('alt',($name ? $name : $modx->resource->get('pagetitle')));
}
$value = pq($value);
$new_html = $value;
$new_html .='<meta itemprop="name" content="'.($name ? $name : $modx->resource->get('pagetitle')).'">';
$new_html .='<meta itemprop="width" content="'.$width.'">';
$new_html .='<meta itemprop="height" content="'.$height.'">';
$new_html = $value->wrap('<p itemscope="" itemtype="http://schema.org/ImageObject">'.$new_html.'</p>');
$value->replaceWith($new_html);
}
}
}
}
$html = $html->html();
$output = $html;
return;
break;
}
Внимание! Требует доработок под ваши настройки с шириной контента, ещё я добавил туда обёртку для fancybox, так же можете изменить на другую
в кеш я не записываю, можете написать своё условие записи контента в кеш, сейчас работает на лету, но фотки кешируются, работает быстро
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.