Добавление произвольных или автоматических ALT и TITLE к изображению категории и товара MODx

Для ALT возможны 2 варианта — брать его автоматом из названия категории (товара) или вбивать ручками (полезно для SEO).

Для начала разберем первый вариант — автоматическое создание ALT для изображений в категории и товаре MODx.

Соответственно, дальше — больше — этот же ALT будет управляемым пользователем.

Вариант Автоматом.

Все осложняется тем, что названия товаров, например, могут содержать совершенно непредсказуемые символы, которых в ALT быть не должно, например, кавычки.

Делаем сниппет [[PageTitleWithoutTags]]:

<?php
return trim(preg_replace("'<span[^>]*?>.*?</span>'si","",$this_pagetitle));
?>

Что он делает — preg_replace убивает ненужные нам символы по регулярному выражению (так сложилось, что <span> в моем магазине, который я обслуживаю, заворачивает названия товаров и категорий в красоту, так что пример привожу вместе с ним).

trim — обрезает пробелы по краям (зачем нам лишние пробелы).

Теперь переходим в чанк с категорией и в тег IMG добавляем это:

alt="[[PageTitleWithoutTags?this_pagetitle=`[+pagetitle+]`]]

Получится примерно такой тег:

<img src="[*image*]" width="206" height="206" alt="[[PageTitleWithoutTags?this_pagetitle=`[+pagetitle+]`]]" />

В карточке товара вместо  [+pagetitle+] будет стоять [*pagetitle*].

Собственно на этом можно было бы и закончить, но есть и второй путь, он, ИМХО, более правильный — дать пользователю возможность самому менять ALT и TITLE.

Вариант Ручками.

Итак, создаем два Параметра TV — custom-alt-Image и custom-title-Image. Соответственно, первый для ALT, второй для TITLE.

Оба одинаковые, только названия разные:

Имя параметра: [*custom-alt-Image*]  или [*custom-title-Image*]
Заголовок:  ALT для изображения
Тип ввода:  Text

Доступ шаблонов: выставляем галки напротив шаблонов категорий, подкатегорий (если есть) и материалов (товаров).

Сохраняем. Теперь у нас в админке есть поля для ввода описаний к изображениям категорий и товаров. Нужно их вывести.

В шаблоне категории/подкатегории пишем (у меня это чанк):

<a href="[+url+]"><img src="[+image+]" width="206" height="206" alt="[+custom-alt-Image+]" title="[+custom-title-Image+]" /></a>

В шаблоне товара пишем (у меня это шаблон):

<a href="[*image*]"><img src="[*image*]" width="206" height="206" alt="[*custom-alt-Image*]" title="[*custom-title-Image*]" /></a>

 

Вот и все. Можно проверять. Удачи!

0

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