Как сделать статическую картинку

Показ масштабируемых изображений

Традиционная работа HTML-страниц с картинками заключается в раскрывании картинок вместо этих страниц. Пришла пора прекращать это неудобство на отдельно взятом сайте. Ссылки — хорошо, но удобный просмотр — лучше.

Что такое удобный просмотр? Пример «лайтбоксов» разных показал, что лучше открыть псевдоокно просмотра внутри документа, не удаляя документ. Но при чтении статей этот подход не очень удобен. Мы не видим контекст документа. Получается, что видна или картинка, или документ. Лучше, если картинка не закрывает текст, как организовано, например, в скрипте Dollchan Extension Tools (подсказали здесь), где просмотр картинок занимает малую часть общей функциональности просмотра «имаджбордов» — примерно таких же текстово-картиночных потоков статей. Сделаем и мы контролы управления картинками, добавив кое-что своё.

Кратко: что получилось в итоге

Далее будут последовательно рассмотрены: идеи, правила поведения интерфейса, детали реализации, алгоритм, примеры. Рассмотрения кода не будет — он есть в реализации, написан на чистом JS и выполняет свою роль, больше ничего не требуется. Может быть использован как практически, в готовой реализации (берём и смотрим картинки на сайте), так и для установки на другой сайт (LGPL v3). А теперь — во всех подробностях.

Причины (поиска лучшей жизни)

Имеем несколько случаев появления тегов с изображениями в HTML, когда желателен улучшенный подход к просмотру. Рассмотрим примеры и придумаем правила того, как лучше поступить с просмотром картинок.

1) Ссылка. На странице встречается ссылка, ведущая на статическую картинку с расширением jpg, jpeg, gif, png.
Пример: ссылка на картинку (случайно взятые виды курсорных схем).
Пример 2: ссылка на большую картинку: инфографика про Android (300 K) из статьи «Android в цифрах».
Решение: отображаем картинку (делая её загрузку) в уменьшенном размере рядом со ссылкой. По клику — просмотр.

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

2) Мини-превью. На странице имеется мини-картинка со ссылкой, раскрывающая (обычно) увеличенный оригинал.
Пример:

Решение: отображаем оригинал в скрытом блоке, чтобы узнать его размеры. По клику на ссылке — просмотр.

Нужно подчеркнуть, что в случаях 1 и 2 мы делаем загрузку картинок по ссылкам в автоматическом режиме — все ссылки на странице. Если нет безлимитного интернета, нужно помнить, что эти способы просмотра приведут к избыточному трафику, если автор текстов специально скрыл под ссылками многомегабайтные картинки. Значит, нужно иметь возможность отключать и включать эти режимы настройкой «подгружать ссылки«.

3) Ограничение по ширине. На странице в силу красивости дизайна картинки ужимаются до ширины колонки текста. Хочется посмотреть в полную ширину, но для этого надо расширять окно браузера.
Пример: широкая картинка (204 К)

Решение: картинку помечаем специальным курсором, например, «move» . Значит, по клику на ней перейдём к просмотру в максимальном размере.

4) что делать, если видим картинку, прекрасно помещающуюся в тексте?
Пример: небольшая картинка:

Решение: есть 2 варианта: или ничего не делать (настройка «смотреть увеличенные вдвое картинки» отключена), или показать в увеличенном в 2 раза виде и отмечать особым курсором (например, «ne-resize» — или ).
(Виды системных курсоров браузера в Windows, в других системах, как изменить курсор мыши.)

Случаи 3 и 4 не предполагают дополнительной загрузки картинок, а только улучшают просмотр. Поэтому их можно не отключать пользовательскими настройками сайта. Они перехватывают клики по ссылкам, поэтому, если ничего не предусмотреть, останется неудобный способ перехода по ссылке «Правая кнопка мыши — Просмотреть в новой вкладке». Поэтому в скрипте предусмотрим отключение функций просмотра, если удерживается клавиша Ctrl.

Более подробное правило 2

(2.a) Несколько картинок под ссылкой на картинку. Имеется ссылка на статическую картинку, определяемую по расширению файла, а внутри неё — различное, возможно, сложное HTML-содержание.
Решение:
*) если внутри ссылки нет тегов картинок, ставим уменьшенную копию скачанной картинки сверху (не более 200 на 200 пикс.).
*) Если есть только 1 картинка с тегами вокруг, и, возможно, с текстом, то считаем, что это — классическое превью в виде малой картинки со ссылкой на большую.
*) Если ссылка имеет более сложное внутреннее строение (больше 1 тега IMG), то строится отдельно превью для ссылки и отдельно — внутренности ссылки, просмотр её картинок. (Этот случай редкий, но его нужно учесть в алгоритме. Могут, например, сделать составное слово из картинок и навесить ссылку.)
Если попалась большая картинка — более 50% ширины окна, ставим курсор для индикации просмотра на 100%. Просматриваем с увеличением 200%, если ширина картинки — менее 50% ширины окна. По клику откроется рисунок по ссылке.

Пример: сложный случай: курсоры: снаружи — ссылка на таблицу с курсорами, а внутри малые картинки:
e-resize: , nw-resize: , crosshair:

Алгоритм

Из правил следует алгоритм. Сначала пробегаем область HTML (или DOM), ищем ссылки на картинки. Найдя, проверяем число тегов IMG внутри. Если 0 — просмотр ссылки по клику на отдельно сформированной картинке. Если один — устраиваем просмотр ссылки по клику на IMG, а к классу IMG добавляется класс-признак «не добавлять собственный просмотр» (_noAddOwnView). Если более одного тега IMG — просмотр ссылки отдельно, как в случае 0 тегов IMG, и каждый IMG просматривается также отдельно (но подготовлены они к просмотру будут во 2-м проходе).

Второй проход элементов ищет IMG. Все, не имеющие _noAddOwnView, оформляются для просмотра (перед ними появляется невидимый DIV с вложенной невидимой картинкой — дублем IMG, чтобы измерить её настоящие размеры). На все _noAddOwnView добавляется тот же просмотр, но картинка подменяется адресом родительской ссылки (ссылка может быть родителем не первого уровня, а старше). Все картинки для предпросмотра, созданные на 1-м проходе не затрагиваются (отсеиваются по классу _noAddOwnView).

Особые расширения возможностей

Служебные картинки и остальные внутри ссылок обрамлены ссылкой. Но клики по картинкам перехватываются по preventDefault(), то есть, ссылки не работают. Было бы интересно иметь обычное поведение ссылки, если хотим просмотреть картинку в новой вкладке, нажав перед кликом клавишу Ctrl (как обычно принято в Firefox и Chrome для открывания ссылки в новой вкладке). Поэтому, по нажатию Ctrl все действия просмотра отменяются, чтобы ссылка открылась в новой вкладке.

Чтобы получить ещё ряд возможностей, с удержанием кнопки Shift показываем контекстное меню для картинок. Оно будет содержать все желаемые операции, которые не поместились на клик мыши. Например, просмотр превью-картинки в увеличенном виде (то, что скрыли при наличии ссылки вокруг, хотя вряд ли нужно просматривать картинки превью), поиск через поисковики картинок (5 ссылок). При желании, в меню добавляются иные возможности.

Пусть также мелкие картинки (менее 23х23 пикс.), используемые иногда как служебные, типа таких: , не обеспечиваются предпросмотром.

Реализация

Все эти варианты просмотра возможны со скриптом HabrAjax версии 0.901 (от 21 января 2013) на страницах Хабра.

Таким образом, пользователи юзерскрипта освободились от оков просмотра картинок в масштабе или 1 к 1, или в уменьшенном, которым так богаты коллективные блоги. Картинку можно даже переместить к другой части страницы, комментариям, прокручивая скролл страницы в режиме просмотра картинки.

И это не всё. Если пользователь включил настройку «Принудительный кат«, картинки из аннотаций в ленте уменьшаются (было сделано довольно давно, месяцев 8 назад). Чтобы увидеть полные картинки, требовалось просмотреть статью. Теперь, по клику на картинке, также смотрим её в полном размере и с перемещением по окну. Все картинки принудительного ката тоже получили освобождение.

Надо снова предупредить: настройка «подгружать ссылки-картинки» увеличивает трафик. Включать её имеет смысл на безлимитных тарифных планах. Чтобы скрипт не был ответственным за неосознанный расход трафика, добавлено подтверждение пользователем этого предупреждения: ‘Включена настройка «Подгрузка рисунков», но не подтверждена. Согласны ли Вы с увеличением трафика за счёт подгрузки рисунков?‘. Нужно один раз согласиться, что будет запомнено в настройках.

* «Curiosity на дне» — фотографии Марса в большинстве своём имеют ширину 1100px — на узких окнах ужимаются стилями по ширине колонки. Клик — и все условности сняты. В комментариях есть большие фото, доступные также для просмотра в масштабе.

Процент масштаба показывается в текстовой подсказке, а при попадании в пределы 88-113% устанавливается в 100% (или 200%, в зависимости от вида просмотра).

* «Удивительный Марс» — несколько красивых больших и 2 очень больших (по ссылкам на них) картинки.

* «Когда каждый день как DDOS. Крупнейшие китайские сайты» — там между первой и второй картинками под цифрами «83%»появляется инфографика — большой JPG в 4000 пикселей высотой, в уменьшенном виде занимающий 200px. Без настройки «подгружать ссылки-картинки» — её нет, а по ссылке выполняется обычный просмотр.

* habrahabr.ru/feed/new или любая другая лента с настройкой «Принудительный кат«. Уменьшенные картинки просматриваются в размере 100%, а если они меньше 200 на 120 — то в размере 200%.

* «Javascript и canvas в игре «Жизнь» Джона Конвея» — большая первая картинка под превью на 1300 пикселей прекрасно просматривается внутри страницы, а остальные мелкие идут на просмотр в режиме «x2» (200% их размера).

*) И, к примеру, статья «Числа Каталана» с рядом картинок разного размера и степени прозрачности.

Если включена настройка «просмотр картинок» (в окне по центру), то все картинки на странице уже не замещают страницу, как это принято на сайте, и даже не просто открываются в новом окне, как это было сделано не очень давно (4 мес. назад) в HabrAjax, а открываются в виде максимальной по размеру картинки, вписанной в рамки окна и центрированной относительно него. Если она меньше размеров окна, картинка оказывается центрированной. При этом затенение не мешает читать страницу — затенения нет, в отличие от «лайтбокс»-подобных скриптов.

Пример 1: скриншот просмотра большого скриншота из статьи о просмотрщике Хабра на iOS. Курсор, наведённый на картинку-превью — это «ne-resize», а превью подсказывает размеры полной картинки.

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

Картинку можно передвинуть, чтобы прочитать страницу, а колесом мыши — изменить её масштаб. Кликом — закрыть. Кликом на исходной картинке — тоже.

Кроме имевшейся в Dollchan функциональности, расширяем удобства. При удержании Ctrl при клике на исходной картинке она открывается в новой вкладке. При Shift — открывается меню поиска по поисковикам картинок. Ещё одна группа удобств открывается для работы с принудительно уменьшенными картинками из «принудительного ката». Если она уменьшена, клик по ней показывает её исходный размер в формате просмотра картинки.

Не обойдён вниманием просмотр картинок из инфографики веток коментариев — недавней экспериментальной визуализации дерева комментариев. Возле веток отмечаются значки картинок в виде маленьких оранжево-жёлтых прямоугольников. По наведению на значок видно имя картинки и малые превью (если «подгружать ссылки-картинки«), а по клику — просматриваются полные картинки. Таким образом, не прокручивая окно просмотра, можно быстро оценить, какие картинки набросали в длинное дерева комментариев, длиной порой на десяток и более окон браузера.

Пример 3: статья, в которой имеется много картинок в комментариях: «Светодиодная лента в качестве освещения комнаты». Даже та одна картинка, которая представлена в виде ссылке, выглядит как «засветившийся оранжевым» прямоугольник в ровной матрице ссылок. Остаются не предпросматриваемыми те картинки, которые не смогли загрузиться (в нижнем ряду чья-то картинка из dropbox).

Наконец, исправлено и довольно больное место существующей вёрстки картинок: они не могут быть больше, чем ширина полосы просмотра статьи или ленты. Если скрипт обнаруживает, что картинка принудительно уменьшена вёрсткой, он к ней применяет те же способы просмотра. Теперь и в узких окнах можно просмотреть все картинки, не расширяя окно и не открывая их в новой вкладке. Примеры из начала статьи прекрасно иллюстрируют результаты, если вы установите HabrAjax и переоткроете эту страницу.

Все коды этой функциональности, не считая используемых процедур, записаны в юзерскрипте HabrAjax под именами функций addFullImg, handlImgViews на чистом JS и занимают примерно 200 строк.

Их можно использовать для построения собственного просмотрщика картинок (LGPL v3). Но специально такой задачи (сделать плагин для подключения просмотра картинок) также не стояло, поэтому отдельно выложенного кода на Гитхабе (пока) нет. Впрочем, копированием функций просмотра картинок и настройкой тегов под собственный сайт, это выполнимо, аналогично работе по копированию из Dollchan. Особенность — данные скрипты не поддерживают IE8 и ниже. Для поддержки нужно сделать кроссбраузерные дополнения, например, использовать для селекторов функцию jQuery $().

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

Источник

Как сделать анимированный gif-баннер в Canva и добавить его на блог Вордпресс?

Привет! Сегодня поделюсь, как можно быстренько сделать анимированный gif-баннер в сервисе Canva и как его тут же применить, разместив на своем Вордпресс блоге в сайдбаре.

Большинство своих баннеров я делаю именно в Канве и ранее записывала урок по созданию статического баннера и баннерной рекламе. А в этой статье рассмотрим именно двигающийся гиф-баннер.

Рассмотрим 2 варианта его реализации в сервисе Canva:

– добавление готовых анимированных элементов на баннер,
– вначале делаем обычный статический баннер нужного размера, затем придаем ему анимированный эффект.

По итогам, сохраняем баннер в формате gif, загружаем в медиафайлы на сайт Вордпресс и размещаем баннер со ссылкой в сайдбаре (боковой колонке) через специальный html-код и виджет.

Вот обо всем этот по порядку в статье.

А для тех, кто предпочитает наглядность, оставлю свой видеоурок по теме:

Создаем баннер по нужным размерам и добавляем на него анимированные элементы

Для этого нужно перейти и авторизоваться (новым пользователям зарегистрироваться) в сервисе canva.com.

При входе вам могут предложить протестировать версию PRO бесплатно 30 дней и ввести данные платежной карты. Но в большинстве случаев достаточно обычного бесплатного тарифа, поэтому данное предложение можно пропустить, закрыв крестиком.

На главной странице вверху нажимаем «Создать дизайн» – «Настраиваемые размеры».

Указываем желаемые размеры баннера – ширину и высоту. Я для сайдбара своего блога сделаю баннер размером 240х400 пикселей. Жмем «Создать дизайн».

И попадаем в редактор.

По центру у нас белый холст, сбоку слева – готовые шаблоны. За основу и в качестве идей можно взять их, редактируя под себя.

Кстати, здесь можно найти и уже готовые анимированные шаблоны, они помечены вот таким значком:

Также при наведении мышкой, если шаблон бесплатный, вы увидите пометку «беспл.», так как есть и платные варианты с водяным знаком.

Кроме того, можно с нуля наполнять свой холст, используя инструменты на панели слева – фон, текст, элементы и т.д.

То же самое – бесплатные элементы будут с пометкой «беспл.».

Плюс есть возможность загружать свои картинки, в том числе анимированные (gif) и использовать их в баннере. Загрузка своих картинок производится в разделе «Загрузки».

Загруженная гифка отобразится в подразделе «Видео» – нажатием левой кнопкой мыши ее можно добавить на свой холст, перемещать и ползунками по краям менять размер.

Можно подключить и встроенную библиотеку гифок – Gify. Чтобы ее подключить, на панели слева нажимаем «Еще» – там где «Приложения и интеграциях» выбираем Giphy.

Я часто применяю комбинированный вариант – беру готовый шаблон за идею, затем меняю цветовое решение под цвета, которые используются на рекламируемой странице (в обложке продукта) и добавляю нужные мне элементы.

Для примера остановлюсь на таком шаблоне:

Баннер буду делать под свой бесплатный курс по привлечению трафика на страницу подписки. Вот этот:

В этих цветах и буду оформлять свой баннер.

Чтобы шаблон применился к холсту, кликаем на него левой кнопкой мыши.

Чтобы удалить лишние элементы на холсте, выделяем ненужное мышкой – кликаем по иконке корзины справа или жмем кнопку «Delete» на клавиатуре.

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

Если требуется добавить новый текст, используем одноименный инструмент на панели слева.

Иногда элементы на шаблоне сгруппированы, чтобы разъединить их и править по отдельности, нажимаем сбоку «Разгруппировать».

Чтобы изменить цвет фоновых элементов, выделяем мышкой и на панели вверху меняем цвет.

Кроме цвета, к основному фону холста можно применить заготовки из раздела «Фон».

Или даже видеофон из раздела «Видео». Чтобы применить, ухватите видео левой кнопкой мыши и перетащите на ваш фон.

Чтобы добавить анимированные элементы на баннер, можно перейти в раздел «Элементы» – «Стикеры» и подобрать подходящий вариант.

Либо, как уже писала выше, загрузить свою gif-картинку, подключить библиотеку гифок…

Находить изображения можно и в строке поиска по ключевым словам: по-русски или по-английски. Использовать библиотеку «Фото». А также раздел «Элементы» – там кроме анимированных изображений есть статические – линии, фигуры, градиенты, иллюстрации, значки и многое другое, что можно интересно обыграть на баннере.

В моем варианте будут сочетаться статические элементы и анимированная картинка из встроенной библиотеки Канвы.

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

Чтобы изменить расположение элементов, к примеру, анимированный элемент я хочу переместить на задний план, выделяю его мышкой, жму справа вверху «Расположение» и выбираю «Назад».

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

Вот такой баннер в движении получился у меня:

Задаем анимированный эффект статическому баннеру

Сам процесс: размер, фон, добавление текста, графических элементов – все делается по аналогии, как я показала выше, кроме того, что баннер у нас полностью из статических элементов. Анимацию ему мы придаем в самом конце, нажав вверху «Анимация» и выбрав желаемый эффект.

Я сделала вот такой простенький статичный баннер и хочу его немного анимировать. Для этого вверху нажимаю «Анимация».

И выбираю эффект (нажав на тот или иной вариант, можно посмотреть результат). Те эффекты, которые помечены желтой коронкой, доступны на платном PRO тарифе.

Бесплатно доступно не так много эффектов, но выбрать интересный можно + задать продолжительность показа (через какой промежуток, анимация будет повторяться). По умолчанию 5 секунд.

Чтобы задать время повторения анимации, кликаем по цифре и указываем свое значение – например, я поставлю 6,5 секунд.

Вот, как выглядит баннер с эффектом:

Как скачать баннер в gif-формате?

Когда наш баннер с анимацией готов, его нужно скачать в формате gif. Нажимаем справа «Скачать», выбираем формат. Еще раз жмем «Скачать». По умолчанию картинка сохраняется в папку с загрузками на компьютере.

Как разместить баннер на блоге Вордпресс?

Алгоритм по шагам:

1. Заходим в консоль сайта, загружаем баннер в медиафайлы и копируем на него ссылку:

2. Подготавливаем ссылку, которую хотим добавить в баннер. У меня это ссылка на страницу подписки с бесплатным курсом. Чтобы отслеживать подписки, я ставлю на страницу Яндекс. Метрику, настраиваю цели и делаю utm-метку. Подробнее об этом тут.

Если ссылка партнерская, то метку или спец. партнерский код можно настроить в партнерском кабинете.

Также можно сократить рекламную ссылку своим доменом в плагине-маскировщике ссылок (для учета кликов). Об одном таком русскоязычном плагине я писала здесь. Есть англоязычный бесплатный аналог – Pretty Links.

3. Далее нам понадобится вот такой код для вставки баннера:

– вместо текста «Рекламируемая ссылка» между кавычками размещаем ссылку, которая ведет с баннера.
– вместо текста “URL картинки” – между кавычками размещаем ссылку на баннер, который предварительно загрузили в медиафайлы (см.пункт 1).

*удобно все манипуляции с кодом перед добавлением на сайт делать в обычном txt-блокноте или в блокноте Notepad++.

4. Теперь в консоли сайта Вордпресс заходим в раздел «Внешний вид» – «Виджеты», выбираем виджет «html-код» и перетягиваем его левой кнопкой мыши в сайдбар (боковую колонку). Вставляем в содержимое код нашего баннера и сохраняем.

Если в боковой колонке уже есть какие-то элементы – например, рубрики, поиск и т.д., то вы можете передвигать виджеты и разместить баннер в промежутке между тем или иным виджетом.

Важно: после добавления баннера – он не сразу может отобразиться на сайте. Причина – кеш браузера. Чтобы увидеть изменения – откройте ваш сайт в браузере из режима инкогнито. В Гугл Хроме – это делается нажатием на три вертикальные точки сбоку справа.

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

Буду рада, если информация вам пригодилась!

Источник