/ Сайтостроение / Wordpress / Атрибуты миниатюры

Атрибуты миниатюры

31.07.2016

981

У миниатюры (thumbnail) есть служебная функция назначения атрибутов. Манипулируя атрибутами можно добиться интересных результатов.

Фильтр wp_get_attachment_image_attributes распространяется на миниатюры, а также на вложенные изображения wp_get_attachment_image($image->ID, ‘rectangle’).

Как сделать отложенную загрузку миниатюр можно узнать из статьи Постепенная загрузка изображений.

атрибуты

title и alt из заголовка записи

Мы можем сделать, чтобы у миниатюры записи (когда мы внутри записи) title и alt прописывались из заголовка записи динамически. Для этого, добавляем следующий сниппет в functions.php

function titles_gallery($attr){
if ( is_single() ) {  
 $title = get_the_title();
 $attr['title'] = trim(strip_tags( $title ));
 $attr['alt'] = trim(strip_tags( $title )); 
}  
 return $attr;  
}
add_filter('wp_get_attachment_image_attributes','titles_gallery',10,2);

При использовании функции логотип темы (custom_logo) изображение логотипа принимает свойства миниатюры и в него могут подставится те же alt и title, это неправильно! Нужно изменить вывод логотипа:

<div id="logo">
<a href="<?php echo get_site_url(); ?>">
<?php $custom_logo_id = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $custom_logo_id , 'full' ); ?>
<img src="<?php echo $image[0]; ?>" alt="site-logo" title="site-logo">
</a>
</div>

Микроразметка миниатюры

Добавление миниатюре атрибута itemprop=»image»

if ( !is_admin() ) {
  
add_filter( 'wp_get_attachment_image_attributes', 'alter_att_attributes_wpse');

function alter_att_attributes_wpse($attr) {

  $attr['itemprop'] = 'image';
  return $attr;
	
  }
  
}

Размеры миниатюры

add_filter( 'wp_get_attachment_image_attributes', 'alter_att_attributes_wpse');

function alter_att_attributes_wpse($attr) {

  $attr['srcset'] = ' '; // !Отключение вывода вариаций изображения
  return $attr;
	
  }

Можно делать комбинацию атрибутов title и alt + itemprop и т.д. в одной функции

Атрибуты миниатюры у категории

Мы можем сделать миниатюру категории, но т.к. это не запись атрибуты будут работать у нее немного по другому. В частности атрибуты title и alt подставляются неправильно.

Для миниатюр категории лучше задавать alt и title напрямую в медиабиблиотеке. И немного изменить вывод таких миниатюр. Для начала, зададим функцию определения id изображения:

// Вывести id изображения
function pippin_get_image_id($image_url) {
    global $wpdb;
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); 
        return $attachment[0]; 
}

После этого меняем код вывода:

<?php $id = $childcat->cat_ID; $link = get_category_link($id); ?>

<a href="<?php echo $link ?>" title="<?php echo $cat->cat_name ?>">

<?php if ( $childcat->term_image ) {

$image_url = wp_get_attachment_image_url( $childcat->term_image, 'full' );
$image_id = pippin_get_image_id($image_url);

echo '<img src="' .$image_url. '"';
echo 'alt="'.esc_attr( get_post_meta( $image_id, '_wp_attachment_image_alt', true ) ).'"';
echo 'title="'.get_the_title($image_id).'"';

echo '>';

} ?>

</a>

В вызове $image_url размер изображения обязательно должен быть — full. Если сама миниатюра должна быть другого размера, надо заменить в src=»» переменную $image_url на новый вызов
wp_get_attachment_image_url( $childcat->term_image, ‘square’ );

title и alt товара woocommerce

По умолчанию товарам woocommerce проставляется alt и title записанные в соответствующих полях в медиабиблиотеке. Чтобы изменить в карточке товара title и alt на: Название товара + «по выгодной цене», нужно сделать следующее. В шаблоне WC product-image.php меняем 2 строки с назначением alt и title и добавляем новую переменную $title

$title            = get_the_title().' по выгодной цене';
'title'	 =>   $title, //$props['title'],
'alt'    =>   $title, //$props['alt'],

В новых версиях WC, заголовок нужно получать следующим запросом:

$title = get_post_field( 'post_title', $attachment_id );

C версии Woocommerce 3.3.2 вывод миниатюр в карточке изменился. Теперь в карточке добавить атрибуты не получится. За вывод изображения отвечает функция wc_get_gallery_image_html.

Но работает эта функция странно…

Добавить динамический alt и title в виде заголовка товара изображениям товаров в категории — используем следующую функцию:

add_filter('wp_get_attachment_image_attributes', 'change_attachement_image_attributes', 20, 2);

function change_attachement_image_attributes( $attr, $attachment ){
    // Get post parent
    $parent = get_post_field( 'post_parent', $attachment);

    // Get post type to check if it's product
    $type = get_post_field( 'post_type', $parent);
    if( $type != 'product' ){
        return $attr;
    }

    /// Get title
    $title = get_post_field( 'post_title', $parent);

    $attr['alt'] = $title;
    $attr['title'] = $title;

    return $attr;
}

Эта функция добавляет атрибуты и в шаблоне карточки товара

В шаблоне категории alt и title от товаров попадает на логотипы и изображения в сайтбаре

Вывел в отдельную статью материал по вставке изображений в запись.

title и alt из полей медиафайла

Правильная система вставка title и alt из полей медифайла. Метод для стандартных миниатюр.

$image_alt = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true);

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Галерея изображений в виде карусели

Галерея изображений в виде карусели

Нужно переделать стандартное представление галереи изображений в карточке товара. Сделаем данный функционал более похожим на привычный в виде карусели. Для этого подключаем функционал карусели slick, и создать скрипт инициализации $(document).ready(function() Читать далее »

/
Миниатюра — фон сайта

Миниатюра — фон сайта

Мы можем использовать миниатюру записи для самых разных целей. В данной статье рассмотрим вариант использовать миниатюру в виде фонового изображения сайта. Вывод миниатюры в виде фона В цикл вывода миниатюры Читать далее »

/
Выравнивание миниатюр товаров

Выравнивание миниатюр товаров

Идеальная ситуация, когда мы загружаем изображения для товаров (хотя бы для главного изображения) квадратными. т.е. заранее подготовленными, откадрированными. Но бывают случаи, когда на сайт начинают заливаться изображения разных пропорций. Сделаем Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Атрибуты миниатюры Атрибуты миниатюры
Безопасность сайта
Рекомендации для васБезопасность сайтаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.