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

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

HIT

31.07.2016

4676

2

У миниатюры (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 '>';
В вызове $image_url размер изображения обязательно должен быть — full. Если сама миниатюра должна быть другого размера, надо заменить в src=»» переменную $image_url на новый вызов
wp_get_attachment_image_url( $childcat->term_image, ‘square’ );
Также есть еще одна проблема вывод ID изображений (по крайней мере изображений категорий) может не работать из-за того что в базе данных в таблице wp_posts столбец guid они внесены с http: а сайт например работает и ищет по https

В этом случае, нужно поиском и заменой в phpMyAdmin изменить это

UPDATE wp_posts SET guid = REPLACE (guid, 'http://site.ru', 'https://site.ru');

Вообще странно, что даже после перевода сайта на https: этот столбец (guid) остается без изменения.

Альтернативная функция определения и вывода ID изображения по URL (сам еще не проверял):

function get_attachment_id_by_url( $url ) {
    global $wpdb;
  
    $table  = $wpdb->prefix . 'posts';
    $attachment_id = $wpdb->get_var( 
        $wpdb->prepare( "SELECT ID FROM $table WHERE guid RLIKE %s", $url ) 
    );
    return $attachment_id; // Returns id
}

echo get_attachment_id_by_url( $url_img );  // выведет id изображения

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);

Все атрибуты медиафайла

Для получения атрибутов нужен ID медиафайла

$attachment = get_post( $attachment_id );

'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
'caption' => $attachment->post_excerpt,
'description' => $attachment->post_content,
'href' => get_permalink( $attachment->ID ),
'src' => $attachment->guid,
'title' => $attachment->post_title

Поделиться в соц. сетях:

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

Галерея изображений товара в категории

Создадим переключающиеся изображения товара при наведении мыши, либо галерею изображений товара в шаблоне категории. Под галереей изображений (Featured Images) понимаются дополнительные изображения помимо основного изображения. Выводим дополнительные изображения function woocommerce_feature_gallery() Читать далее »

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

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

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

Выводим записи у которых нет миниатюры

Выводим записи у которых нет миниатюры

Иногда нужно вывести все записи в которых отсутствуют миниатюры. Например, для интернет-магазина с множеством товаров. Сделаем это! Создаем страницу вывода Создадим шаблон страницы none-img.php, вначале обязательно прописываем название шаблона: <?php Читать далее »

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

2 комментария

  1. Антон

    Добрый день, спасибо за отличную статью, подскажите а как можно из файла csv загрузить поля alt, title, для изображения товара woocommerce, не могу понять название полей. Спасибо.

    1. Alexandr

      Добрый день! Не вполне понимаю что Вы имеете в виду под загрузкой файла csv для изображений. Но название полей в БД для изображений такие:
      alt (метаполе записи, таблица wp_postmeta) — _wp_attachment_image_alt
      title (атрибут записи, таблица wp_posts) — post_title

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