Как добавить title на основе alt у тега img

Скрипты и советы | 26 апреля 2018

мы рекомендуем, скрипты

В свежих версиях движка DLE пропала полезная функция - вывод атритуба title для изображений. Теперь она заменена на атрибут alt.

Но иногда есть потребность выводить описание картинки при наведении на фотку мышкой.
При использовании BBCODES редактора у нас нет такой возможности.

Для понимания сути происходящего обратимся к официальной документации DLE.
Теги при написании новостей


[img=выравнивание|свой текст для alt] ссылка [/img] Вставка картинки новость и выравнивание ее по указанному параметру, а также назначение картинке собственного описания



а так-же

[thumb=выравнивание|свой текст для alt] ссылка [/thumb] Вставка уменьшенной копии картинки новость, с ссылкой на увеличенную картинку и выравнивание ее по указанному параметру, а также назначение картинке собственного описания


Возможности прикрутить атрибут title нет :(

Предлагаемый java script автоматически добавляет атрибут titile на основе атрибута alt для каждого изображения.



Сам скрипт будем применять для полной новости (шаблон fullstory.tpl)


{* Автоматическое добавление атрибута title для картинок в блоке с .full-content на основе атрибута alt *}
<script type="text/javascript">
	jQuery(document).ready(function($) {
	  setTittleToImagesIn(".full-content");
	});

	function setTittleToImagesIn(selector) {
	  var $images = $(selector + " img");

	  $.each($images, function(index) {
	    var $this = $(this);
	    var alt = $this.attr("alt");
	    var hasTitle = $this.attr("title");
	    if (!hasTitle && alt) {
	      var title = "Рисунок " + (index + 1) + ": " + alt;
	      $this.attr("title", title);
	    }
	  });
	}
</script> {* .Автоматическое добавление атрибута title для картинок в блоке с #staticPage на основе атрибута alt *}


Для тега вывода содержимого статьи целиком

{full-story}


добавляем класс .full-content
получается так

<div class="full-content">
	{full-story}
</div>


Теперь если в теле публикации вы заморочились с добавлением описания к каждой картинке у вас автоматически появится атрибут title

Живой пример https://hikm.ru/numismatics.html
сам код картинок в админке

результат на сайте при наведении мышкой на фото



Скрипта написал Павел Pafnuty Белоусов
Блог им. RatID / Новые правила учета мета тегов поисковой системой Яндекс

В помощи Яндекса вебмастерам описано нововведение. Теперь Яндекс стрго указывает на то, что он использует при...

Подробнее
Шпаргалка по верстке для больших и маленьких

Хочу представить вашему вниманию небольшую шпаргалку, в которой собраны решения некоторых из часто встречающихся...

Подробнее
[Перевод] Flexbox: насколько велика эта гибкая коробка?

Продолжаю публикацию переводов по особенностям CSS-технологии Flexbox. Из цикла опубликованы следующие статьи: Что...

Подробнее
[Перевод] Все, что вам нужно знать о выравнивании во Flexbox

Цикл публикаций по особенностям CSS-технологии Flexbox от Rachel Andrew. Что происходит при создании контейнера...

Подробнее
[Перевод] Всё, что нужно знать о выравнивании во Flexbox

Об авторе: Рэйчел Эндрю — не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и...

Подробнее
[Из песочницы] Font (ещё более) Awesome — узорное изобретение

Привет, Хабр! Представляю вашему вниманию перевод статьи "Font (More) Awesome — an iconic invention" автора Pubudu...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями