S6 Studio

 

Кастомизация вывода изображений c использованием визуального редактора 1С-Bitrix

Bitrix  JQuery  Howto  • Евгений Задорин, Юлия Зубарева • 5 февраля 2013 • Без комментариев

 

Представим себе довольно распространенную ситуацию. Вы разрабатываете сайт для заказчика, используя какую-либо CMS. Из заголовка понятно, что речь в данной статье пойдет о CMS Bitrix, но в общем-то это особой роли не играет.

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

Визуальный редактор в битриксе в общем-то достаточно удобная штука. Но, только если дело касается каких-то базовых элементов: абзац, список, размер и насыщенность шрифта, подчеркивание и тому подобные вещи. Что-то более сложное, например иллюстрации в тексте статьи, вывести красиво гораздо сложнее.

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

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

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

В ответ на это 12 версия битрикса выдает нам такое дышащее Bootstrap'ом модальное окно:

Активно используя предпросмотр, заполняем ряд параметров изображения, и жмем сохранить. Видим в итоге вот такую картину:

Обратите внимание, как пришлось отодвинуть подпись «my time». Думаете, зачем это? А чтобы получить вот такое отображение:

Выглядит ужасно. Хотелось бы получить что-нибудь поаккуратнее, хотя бы так:

Ну и самое интересное. Как кастомизировать такой вывод изображения? На самом деле есть несколько способов, каждый со своими плюсами и минусами. Общий подход предлагается такой — в качестве выводимой к изображению подписи использовать атрибут alt, который можно заполнить в соответствующем поле «Альтернативный текст» на форме добавления изображения. Далее рассмотрим, как можно этот атрибут использовать.

1. Средствами PHP

Алгоритм простой — берем html-разметку, парсим ее, выцепляя из общего текста теги «img» и находя в них значение заветного атрибута alt. Как это сделать, регулярными выражениями или еще каким-нибудь способом, пожалуй потянет на отдельную статью, поэтому такой способ тут не рассматривается.

2. Кастомизация визуального редактора Bitrix

Этот способ предоставляет на самом деле очень широкие возможности по кастомизации, и работой с изображениями не ограничивается. Если вкратце, то Bitrix дает возможность подключать пользовательские css и js файлы при вызове визуального редактора. В итоге можно написать серьезный дополнительный функционал, если вдруг таковой потребуется. А он может потребоваться, например, на новостных сайтах или порталах.

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

3. Средствами jQuery

В самом деле, если перед нами стоит достаточно четко поставленная задача, ограниченная именно выводом изображений с подписями, а возиться с php-парсерами не хочется, можно применить простое и элегантное решение на jQuery. Сразу скажу минус — если у пользователя отключен javascript, способ работать не будет. К нашему великому сожалению, такие пользователи встречаются, но их подавляющее меньшинство. Поэтому переходим к реализации.

Javascript код, который нам потребуется, приведен ниже. Не забываем подключать библиотеку jQuery.

$(document).ready(function(){

    $("div.article img").each(function(index, elem){
    // получаем доступ ко всем тегам img контейнера article
    // и запускаем цикл по всем изображениям
        var alt = $(this).attr('alt'); // получаем содержимое атрибута alt

        // обертываем изображение в нужную нам html-разметку
        var imageBox =
            $(this)
                .wrap('
')                 .after('
' + alt + '
')                 .wrap('
');     }); });

В итоге для каждой иллюстрации мы должны получить html такого вида:

 
собственно изображение
 
подпись к изображению

Ну а он уже легко варьируется правилами css. Преимущество такого подхода — минимальный и наиболее элегантный по сравнению с другими описанными способами код.

Заключение

Как и всегда, при выборе способа для решения задачи, нужно исходить из поставленных условий. Нужен сложный кастомный визуальный редактор — используем возможности Bitrix для кастомизации. Задача ограничена выводом изображений? Можно обойтись jQuery. Критично отображение даже при отключенном JS? Парсим html средствами PHP, либо выстраиваем css таким образом, чтобы даже не обернутое изображение смотрелось адекватно.

<< К блогу Добавить комментарий

 

comments powered by Disqus

Самые популярные

К прочтению обязательно