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

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

HIT

31.07.2016

1758

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

Тэги:

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

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

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

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

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

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

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

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

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

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

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

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

  1. Аватар
    Антон

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

    1. Alexandr
      Alexandr

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

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