Banner Image

Description

The template works in insertion codes which uses loader.js library only. That insertion codes marked “NEW” in the instruction.

Banner Image - is the banner with image link.

Banner has convenient layout and scaling settings of inside image. This means the image width will be original or less (depends on banner size). This template suits adaptive sites.

Settings options:
- 3 presets of layout and scaling for inside image.
- Custom CSS-styles for banner container.
- ability to upload high-resolution images in order that banner will look more attractive on mobile devices. For example, you could upload image in the size 480x800 for the banner in the size 240x400, then you have to set banner size as 240x400 in the settings.
- ability to add unclickable banner, just leave "Referrer URL" empty.

Example

Example

Images requirements

Use high-resolution images to improve banner quality on mobile devices despite this could decrease download speed of the banner.

We highly recommend to reduce image sizes using services like TinyPng. This service works with PNG and JPEG.

You can use SVG images. SVG is vector format so it looks better on all kinds of device (mobile and desktop). Additionally SVG has lower size and can be animated.

The following formats are supported: png, gif, jpg, svg.
Maximum file size: 300 Kb.

Adding banner in ADFOX

Choose necessary banner type and template “Banner Image [loader]” to add banner in ADFOX.

Specify the settings for banner:

Изображение – banner image.
“ALT” изображения – alternative text which is visible before image will be loaded.
Параметр передачи "target" – specify how the banner link will be opened. Possible values are _blank and _top. In case of empty value the link will be opened in new window.
Ссылка на промерочный пиксель – ADFOX pixel uses by default //banners.adfox.ru/transparent.gif . If you need to keep track in other system you have to delete ADFOX pixel and specify another link.
URL перехода – specify the link to advertiser’s site. It’s necessarily to check if there is a protocol mention in the link (http:// or https://) for correct work.
Ширина баннера (% или px) – specify banner width.
Высота баннера (px или пустая строка) – specify banner height. It's necessary setting if Расположение картинки contains value «contain» or «cover».
Расположение картинки (contain, cover, пусто) – how the image will be lay out inside banner and how it will be scale. Available layout options:

Option Description Scheme
contain Banner size doesn’t depend on container size so banner size will be exactly the same as set in banner settings. In case of image size is bigger than banner size the image will be scale in proportion to be fully shown. Free areas will be transparent. Image center will be set in center of the block.
Be sure to specify banner height.
Tip: specify background style in setting “Стили для блока баннера” to change background color. Example: background-color: #cd1e25;
cover Banner size doesn’t depend on container size so banner size will be exactly the same as set in banner settings. In case of image size is bigger than banner size the image will be scale in proportion to full width of the banner. Image center will be set in center of the block.
Be sure to specify banner height.
пустая строка The image will adopt for outer container. In case of container size is less than image size so image will decreasing proportionally. In case of container size is bigger than image so image size will be exactly the same as set in banner settings.

Стили для блока баннера – custom styles in one line for banner’s container. Except for: display. For example: “border: 1px solid red;”. Invalid values will be discarded.