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

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

HIT

31.07.2016

1217

У миниатюры (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);

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Плагин: Миниатюра таксономии

Плагин: Миниатюра таксономии

Обычно для добавления изображения (миниатюры) таксономии импользую плагин Advanced Custom Fields. Плагин хороший, но довольно тяжеловат, т.к. является мощным многозадачным плагином. Есть более легковесная альтернатива — плагин taxonomy term image Читать далее »

/
Адаптивные изображения (атрибут srcset)

Адаптивные изображения (атрибут srcset)

Давно интересовал вопрос адаптивности изображений с помощью атрибута srcset. Как это работает и как правильно настроить. Пришло время это выяснить. Теория srcset В атрибуте srcset выводятся все варианты миниатюры и Читать далее »

Изображение для категории товаров

Изображение для категории товаров

В дизайнерских целях иногда требуется выводить изображение для категории товаров. Сделать это можно несколькими способами: плагином, кодом в functions, либо дополнительными полями.При этом кодом в funtions описанном мы будем использовать Читать далее »

/

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

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

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