Украшательства на сайте : делаем надпись поверх картинки

Долгая, вообще, история с картинками. Хорошо, если есть шаблон, где предусмотрены позиции картинок, может быть какой то слайдер или галерея. А все картинки причесаны под один формат. «Проблемными» являются изображения внутри статьи. Во-первых, их нужно особо подготавливать к публикации — обрезать, подогнать к размерам, а во-вторых, часто их нужно подписать.

Вот это «во-вторых» мы красиво и сделаем. Задача такая — в alt или title картинки в wysiwyg редакторе CMS делается описание картинки, далее, при выводе этой картинки в шаблоне статьи, будем делать подстановку в html коде такую, чтобы получить заданное описание поверх картинки. Ну как то так, к примеру :han-shatyr

Можно подстановку делать и на стороне сервера, я же предлагаю вариант с использованием jQuery, добиваясь точно такого же эффекта как это сделано в примере выше.

Что нам понадобится

  • Добавить обработчик после загрузки окна, который будет осуществлять подстановку. Добавим в head шаблона конструкцию вроде — $(window).load( … ) ;
  • Определиться с областью где будет происходить замена. Скорее всего — контейнер вывода публикации, пусть это будет <div id=main> … </div>;
  • Для фона подписи нужна полупрозрачная картинка (надеюсь, не надо рассказывать как сделать ? :) ) или специальные каскадные стили. Я использую вариант с картинкой — так как с картинками браузеры более или менее работают одинаково, а вот со стилями (особенно, что касается прозрачности) — наблюдается какой то бардак;
  • Добавим нужные описания в файл каскадных стилей;
  • Убедиться, что скрипт библиотеки jquery подключен :). К примеру, в Drupal он используется штатно, там заботиться об этом не надо, а в вашем случае поступайте по ситуации. Его, кстати, можно подключить с Google, что якобы потенциально уменьшит нагрузку на ваш веб-сервер. Что то в этом есть.. Мне, правда, не нравится зависеть от работы сторонних серверов, даже если это сервера гугл.

Когда все детали понятны, осталось показать что получилось.

Итоговый вариант

У вас, в любом случае, будет немного свой вариант, зависящий и от конструкции движка, и стиля оформления сайта, но за основу, для эксперимента или как начальный вариант можете использовать кусочки моего кода.

Обработчик, с использованием jquery (размещается внутри тега <head> в шаблоне)

Картинка для полупрозрачного фона — img-alt-mask.png. Ну не делать же вам её самим?

img-alt-mask

Осталось только добавить стили для класса img-alt, который мы присвоили контейнеру, заменяющему картинку.

Мало букафф? Читайте есчо !

Contact Form 7 - добавим галочку на согласие по обработке персональных данных

Июль 21, 2017 г.

Вступившие в силу поправки (с 01.07.2017) федерального закона ФЗ 152 "О защите персональных данных" требуют, чтобы владельцы сайтов информировали пользователя ...

Читать

Обновить пароль через Drush

Ноябрь 22, 2021 г.

Изменить/обновить пароль, используя drush можно следующим образом. [crayon-68b05971598e6858940045/] В данном случае пароль newpassword будет установлен пользователю admin. И это работает для Drupal 7. Если в консоли вы получате ошибку: ...

Читать

Миграция конфигурации Denwer с Apache 2.2 на Apache 2.4

Март 7, 2016 г.

Пока не вышло следующей версии Denwer, решаем задачу перехода с Apachе 2.2 на Apache 2.4. Проблема миграции в том, что конфигурации окажутся не совместимыми ...

Читать

Перебор изображений R.drawable

Ноябрь 21, 2022 г.

Рассмотрим как организовать перебор коллекции ресурсов в Kotlin на примере R.drawable. Типичная задача заключается в том, чтобы отфильтровать элементы коллекции по имени и вернуть список целочисленных идентификаторов, соответствующих вашим критериям. ...

Читать
 

Комментарии к «Украшательства на сайте : делаем надпись поверх картинки»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Украшательства на сайте : делаем надпись поверх картинки”

  1. Andrew:

    Клас то так и не присвоили… минут пять искал в чем проблема…

  2. Точно, класс забыл в div прописать, спасибо, исправляю…