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

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

HIT

31.07.2016

2860

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

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

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

Миниатюры

Миниатюра — это графическое изображение передающее её суть записи. При удалении изображения, удаляются все его миниатюры. Миниатюра записи Добавление миниатюр записям (в файле funсtions.php) Если отсутствует миниатюры выдает placeholder (в Читать далее »

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

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

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

/
Несколько миниатюр записи

Несколько миниатюр записи

В некоторых случаях необходимо, чтобы у записи было несколько миниатюр. Например, если запись это товар с несколькими изображениями. Добавим эту возможность при редактировании записи. Плагин Multiple Featured Images После установки Читать далее »

/

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

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

  1. Антон

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

    1. Alexandr

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

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