Banner Image

Описание

Шаблон работает только на кодах вставок, использующих библиотеку loader.js - в инструкции такие коды имеют пометку NEW.

Banner Image - баннер, который отображает картинку со ссылкой.

Баннер имеет удобные настройки расположения и масштабирования изображения внутри баннера - это означает, что картинка будет занимать ширину, равную ширине картинки или меньше, если контейнер для баннера меньше размеров изображения. Данный шаблон удобно применять для адаптивных сайтов.

Возможности баннера, доступные при добавлении в ADFOX:
- 3 варианта настройки расположения и масштабирования изображения внутри баннера.
- собственные css-стили для контейнера с баннером.
- можно загружать картинки высокого разрешения, чтобы баннер смотрелся более красиво на мобильных устройствах. Например, для баннера размером 240x400 надо загрузить картинку 480x800, а в настройках баннера надо установить ширину 240x400.
- возможность добавить некликабельный баннер, для этого оставьте параметр "URL перехода" пустым.

Требования к изображениям

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

Рекомендуется уменьшать размер файла изображения, используя сервисы наподобие TinyPng. Данный сервис работает как с PNG, так и c JPEG.

Можно использовать SVG картинки. Они векторные, а значит они будут лучше выглядеть на всех устройствах - мобильных и декстопных. Также они имеют малый размер файла и могут быть с анимацией.

Допустимые форматы изображений: png, gif, jpg, svg.
Максимальный вес одного файла: 300Кб.

Добавление баннера в ADFOX

Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон "Banner Image [loader]".

Укажите параметры баннера:

  1. Изображение — изображение баннера.

  2. "ALT" изображения — альтернативный текст, видимый до того как изображение баннера загружено.

  3. Параметр передачи "target" — укажите как будет открыта ссылка из баннера заглушки. Возможные значения _blank и _top. Если значение не указано, ссылка будет открыта в новом окне.

  4. Ссылка на промерочный пиксель — по умолчанию используется пиксель ADFOX //banners.adfox.ru/transparent.gif, при необходимости вести учет показов в сторонней системе, удалите пиксель ADFOX и укажите другую ссылку.

  5. URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).

  6. Ширина баннера (% или px) — укажите ширину баннера.

  7. Высота баннера (px) — укажите высоту баннера. Обязательно, если в параметре "Расположение картинки" выбрано значение contain или cover. Для пустого значения в параметре "Расположение картинки" высота игнорируется и будет применен стиль height: auto;.

  8. Расположение картинки (contain, cover, пусто) — каким образом будет расположено изображение внутри баннера и как оно будет масштабироваться.

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

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

Вариант Описание Схема
contain Размер баннера не зависит от размера контейнера и будет таким, как указано в параметрах баннера.
Если размер изображения больше размера баннера, изображение будет пропорционально смасштабировано таким образом, чтобы изображение было полностью видно.
Свободные от изображения области будут прозрачными.
Центр изображения будет расположен по центру блока.
Обязательно укажите высоту баннера.
Совет: чтобы изменить цвет фона, укажите в параметре баннера "Стили для блока баннера" стиль для фона, например: background-color: #cd1e25;
cover Размер баннера не зависит от размера контейнера и будет таким, как указано в параметрах баннера.
Если размер изображения больше размера баннера, изображение будет пропорционально смасштабировано таким образом, чтобы вся площадь баннера была занята изображением.
Центр изображения будет расположен по центру блока.
Обязательно укажите высоту баннера.
пустая строка Изображение будет адаптироваться под окружающий контейнер.
Если размер изображения больше контейнера, то изображение будет пропорционально уменьшено в размерах и равно по ширине размеру контейнера, а высота изображения будет изменена в соответствии с пропорциями картинки.
Если размер изображения меньше контейнера, то размер изображения будет таким, как указано в параметрах баннера и расположено у верхнего левого края контейнера.

  1. Стили для блока баннера — произвольные стили для контейнера баннера одной строкой. Например, "border: 1px solid red;". Невалидные значения будут отброшены браузером.