V6NET.RU

Изображения

Для показа фото, картинок и прочих графических материалов в AMP HTML используются ПАРНЫЕ тэги <amp-img>, <amp-image-lightbox>, <amp-carousel>, <amp-image-slider>, <amp-amp-fx-flying-carpet>, <amp-fx-collection>. Первый тэг заменяет "классический" HTML тэг <img>, второй служит для разворота маленького изображения на весь экран, третий - для показа серии изображений, которые располагаются по горизонтали. Остальные - для показа изображений с некоторыми эффектами появления-исчезания.

<amp img> - базовый синтаксис:

<amp-img src="___" width="___" height="___" layout="___" alt="___"> </amp-img>

Расшифровка параметров:

src
путь к файлу с изображением

width, heigth

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

alt

текст, отображаемый при невозможности показа изображения (то есть как и в "классическом" HTML)

layout

управляет размером изображения. Допустимые варианты:

nodisplay

изображение не показывается, width и height не требуются

fixed

изображение будет показано с указанной вами высотой и шириной, width и height обязательны, соблюдение пропорций - на ваше усмотрение

responsive

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

fixed-height

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

fill, container, flex-item intrinsic - об этих параметрах для layout можно почитать здесь

Вот примеры изображений:


layout="responsive" - всегда занимает максимальную площадь с сохранением пропорций, то есть изображение займет или всю высоту, или всю ширину экрана (или и то, и другое, если сильно повезет :-) ).


layout="fixed" - всегда одинаковый размер на любом экране. В данном случае заданы размеры изображения 180х210 пикселей.


AMP-IMAGE-LIGHTBOX

Сначала в HEAD нужно включить компоненту <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

Затем в нужном месте описывается само изображение:

<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

и для этого id описывается изображение при помощи amp-img:

<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/static/img/pic-example.jpg" alt="Picture" layout="responsive" width="300" height="246"></amp-img>

Здесь появляются дополнительные параметры on="tap:lightbox1" и role="button". Про использование "on" немного рассказано на первой странице, использование второго параметра - в соответствии с HTML5.

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

Карусель - галерея

Эта компонента предназначена для показа серии изображений, которые располагаются по горизонтали и прокручиваются или вручную, или автоматически. Для использования нужно добавить в раздел head: <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Вызов галереи выглядит так:

<amp-carousel height="300" layout="fixed-height" type="____"> <amp-img src="/static/img/c01.jpg" width="4608" height="1733" alt="Первое изображение"></amp-img> <amp-img src="/static/img/c02.jpg" width="4608" height="1881" alt="Второе изображение"></amp-img> <amp-img src="/static/img/c03.jpg" width="4608" height="1992" alt="Третье изображение"></amp-img> </amp-carousel>

Параметры:

Карусель

Из эстетических соображений следует делать все картинки одинаковой высоты.

Слайды

В чем разница между каруселью и слайдами: у карусели снизу наблюдается полоса прокрутки и картинки в карусели выровнены по нижней кромке, а у слайдов полосы прокрутки нет и они выровнены по центру пространства, заданного в amp-carousel. Если в "карусели" по ширине экрана умещается более одного изображения - то они будут показаны (точнее, их уместившиеся части), а у слайдов будет показан строго один слайд по центру. У слайдов, при отсутствии параметра auto, менять слайды на экране придется вручную, как у карусели.

Есть еще такие компоненты, связанные с изображением:

Примечание: для работы с анимацией требуются другие компоненты.


Слайдер (amp-image-slider)

Используется для показа двух наложенных изображений с возможностью перемещения границы наложения, то есть для сравнения двух изображений. Требует включения в раздел <HEAD> компоненты <script async custom-element="amp-image-slider" src="https://cdn.ampproject.org/v0/amp-image-slider-0.1.js"></script>. (ИМХО) основное назначение - сравнение двух изображений в ситуации "день-ночь", "раньше-сейчас", "было-стало". Базовое использование весьма просто: внутри тэгов слайдера помещаются два изображения.

<amp-image-slider width="3320" height="2201" layout="responsive"> <amp-img src="/static/img/br-1.jpg" alt="День" layout="fill"></amp-img> <amp-img src="/static/img/br-2.jpg" alt="Ночь" layout="fill"></amp-img> </amp-image-slider>

Вот как это выглядит на экране:


amp-fx-flying-carpet

Служит для показа статичного изображения через движущееся по экрану по вертикали окно. Для использования нужно включить в раздел <HEAD> компоненту <script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>.

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

Вот пример для показа текста:

<amp-fx-flying-carpet height="150px" class="f-carpet"> <h3 class="red center">Здесь могла быть ваша реклама</h3> </amp-fx-flying-carpet>

А выглядит это так:

Реклама на странице

Здесь могла быть ваша реклама

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


amp-fx-collection

Это - целый набор эффектов для показа изображений. Генерируются эффекты: "проявление" изображения на экране, "проявление" при движении экрана, выезд изображения с любой стороны, синхронизированное перемещение текста и изображения а также комбинации этих эффектов (fadding, parallax etc.) Для работы требуется добавить в раздел <head> модуль <script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>