Классика жанра
Я неоднократно говорила о том, как важны для восприятия иллюстрации в тексте. Даже если они имеют слабое отношение к самому тексту или, что называется "притянуты за уши", они уже облегчают восприятие текста. Также я считаю, что в системе uCoz гораздо удобнее прикреплять картинки непосредственно к статье с помощью специальных полей, нежели загружать их через файловый менеджер.
Во-первых, так картинки не потеряются, во-вторых, можно настроить автоматический вывод картинок в краткой версии материала на странице со списком статей или в результатах поиска по сайту. Сделать это можно в шаблоне Вид материалов соответствующего модуля. Универсальный код будет выглядеть следующим образом:
<?if($IMG_SMALL_URL1$)?> <img align="left" src="$IMG_SMALL_URL1$" /> <?else?> <img align="left" src="$IMG_URL1$" /> <?endif?>
Нажимаем кнопку Обзор и получаем код, который и нужно вставлять в текст.
Если хотите иметь обтекание картинки текстом, дописываете управляющие слова: IMAGE1-left или IMAGE1-right. Если картинка больше указанных размеров, система создаст по этим размерам миниатюру и организует увеличение по клику в красивом лайт-боксе. Кроме того, "старички" наконец дождались таких полезных полей, как title и alt. Их значения можно вписать чуть ниже, нажав на "шестеренку", и это полезное дополнение также будет встроено в основной код.
Ручная работа
Новый визуальный редактор, выпущенный uCoz в 2014 году, избавился от ряда подводных камней, которые портили жизнь в предыдущем. На них можно было никогда и не натолкнуться, а можно было "налететь". Также новый визуальный редактор стал более гибким и "продвинутым" при вставке в частности картинок и ссылок. Даже после усовершенствования загрузчика картинок, я продолжаю пользоваться этим методом, потому что текст в редакторе с собственно картинкой выглядит нагляднее.
Итак, в поле Изображения вы выбрали нужные картинки, затем требуется сохранить материал и открыть его заново в режиме редактирования. Теперь картинки находятся на сервере, и система дает ссылки на них (нажмите шестеренку и скопируйте ссылку на изображение с превьюшки).
Окно редактора стало более понятным, даже дополнительных пояснений не требуется. Правда, мне не хватает полного списка вариантов выравнивания, включая поверху, посредине и проч. Впрочем, не так часто они и используются. Тут же на вкладке Ссылка можно задать целевую ссылку, которая откроется при клике на картинку. Однако, если вы хотите сделать увеличение по клику в системном лайт-боксе, этого будет недостаточно.
Ручной лайт-бокс
Мы загрузили картинку, но она была уменьшена. В этом случае, вставляя картинку в визуальном редакторе, нам придется исправить ссылку, ведь ссылка в форме дает оригинал. Имя превьюшки начинается на s, а расширение всегда jpg - об этом нужно помнить. (пример: /_pu/2/72654912.png - оригинал, /_pu/2/s72654912.jpg - превью). Добавив картинку кнопкой OK, выделим ее и вставим ссылку специальной кнопкой визуального редактора. Редактор ссылки значительно усложнился, но я скажу, что нам понадобится: Как только вы вставили ссылку на оригинал в первой вкладке, открываете вкладку Дополнительно и заполняете поле Классы CSS: ulightbox.
В чистом HTML ссылка выглядит так:
<a href="/_pu/2/72654912.png" class="ulightbox" title="Увеличить"> <img src="/_pu/2/s72654912.jpg" alt="альтернативный текст" /></a>
Именно этот класс отвечает за красивое отображение картинки. Да, в визуальном редакторе есть возможность вписать alt, но нет title, да и теперь удобнее заполнять эти поля в форме рядом с изображением. Просто чуть модифицируем сгенерированный визуалкой код, чтобы он стал более универсальным:
<a href="/_pu/2/72654912.png" class="ulightbox" title="Увеличить"> <img src="/_pu/2/s72654912.jpg" alt="$IMG10_ALT$" title="$IMG10_TITLE$" /></a>
Номер в кодах $IMGN_TITLE$ должен соответствовать номеру картинки, под которым она загружена. А под занавес еще одна плюшка: листание картинок в в лайт-боксе пределах статьи.
Листание картинок
Если вы загрузили в статью много однотипных картинок, возникает желание их пролистать, как, например, это можно сделать в записях вКонтакте. В этом случае код придется писать вручную целиком. Для этого у визуального редактора предусмотрена кнопка Источник. Для каждой картинки последовательности необходимо организовать ссылку (даже если изображение в реальном размере, то есть без предварительного просмотра, все равно ссылка на картинку должна быть. И именно на картинку, иначе система работать не станет. А код будет вот такой:
<a class="ulightbox" data-fancybox-group="ultbx" href="/path.jpg">
0
