Мирчар на полочке
    Вход через социальные сети
    E-mail:
    Пароль:
    Воспользуйтесь формой, если у вас не получается войти через uID.
    Администрация Каталога: Tinory (Профиль в Мирчар).
     
    Главная » Статьи » Web-чар

    Добавляем картинки v2.1

    Классика жанра

    Я неоднократно говорила о том, как важны для восприятия иллюстрации в тексте. Даже если они имеют слабое отношение к самому тексту или, что называется "притянуты за уши", они уже облегчают восприятие текста. Также я считаю, что в системе 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">
    

    Добавляем картинки v2.1
    Web-чар | | 1949 | 2 | 0.0/0 | кодинг, uCoz
    Еще по теме:
    Всего комментариев: 2
    avatar
    0
    2 aldeberskova • 09:11, 24.10.2016
    Частично знакома с C++ и уже изучала вставку картинок. Могу сказать что здесь все гораздо проще и не так пугающе. Жаль что я не прочла гораздо раньше эту статью.Будем наверстывать упущенное.)
    Ответ: Не нужно путать языки программирования (C++) и языки разметки (HTML). Язык разметки объясняет браузеру, как выводить контент, его результат - страница в этом самом браузере. В случае с языком программирования результатом будет скомпилированная программа-приложение, выполняемое само по себе.
    Это как сравнивать графический планшет и кисть с красками
    avatar
    0
    1 Мирчаровец sleiter • 17:04, 22.10.2016
    Вот для меня лично когда я захожу на сайт и читаю статью в которой или мало или совсем нет картинок, вызивает желание покинуть сайт, читать просто не интересно ели мне не нужно прочесть текст. Картинки привлекают и заставляют посетителя прочесть статью а ,, голый ,, текст совсем не привлекает. Хорошо что есть такая статья которая может помочь сайтоводам украсить их сайт красивыми картинками.
    avatar