---
url: /html.md
---
# HTML Elements
## i:img (images)
Renders an image for a product, category, article, etc. Not used for static template images (icons, etc.).
Handles thumbnail URL generation, retina display support, and automatic image alt text.
When multiple dimensions are specified, a srcset is generated that can be used in combination with the HTML5 *sizes* attribute. If the *sizes* attribute is omitted, *width* and *height* attributes are set based on the actual resulting image dimensions.
If the **alt** attribute is not specified, it is automatically populated from the image description or the product/variant/... name.
The output differs depending on the device (retina/non-retina) and load order (first/subsequent). **Retina images may overflow -- you must handle this in CSS**, for example with *max-width:100%;max-height:100%*.
```twig
```
**Attributes**
| Attribute | Required | Description |
|---|---|---|
| **src** | **yes** | Twig object |
| **format** | **yes** | image dimensions |
| sizes | *no* | same as HTML5 sizes -- required when multiple dimensions are specified |
| watermark | *no* | image will have a watermark |
| fill | *no* | pad the image with white borders |
| vector | *no* | use PNG/SVG |
| transparent | *no* | image has transparency |
| quality | *no* | low/normal/high/lossless (default: normal) |
| lazyload | *no* | *src* and *srcset* as data attributes |
| class | --- | CSS class |
### Image Zoom
Wrap an image in a link with **@** as the href -- it will be replaced with the appropriate URL. The link may contain **only one image**. If you need a conditional, use two separate links.
```twig
```
## i:img-360 -- 360 Product View
Renders the 360° spin player for a product that has 360° frames (`product.images360`). The player is a
100 %-wide box that keeps the frames' aspect ratio from the first paint, shows the first frame as a
placeholder until the library has loaded, and re-draws itself whenever its width changes (a slider
showing the slide, a fancybox dialog, a phone rotating). Give it a container of the width you want; no
sizing CSS is needed. A product without frames renders nothing, so wrap the tag only when the
surrounding markup (a slide, a thumbnail) must be conditional too.
```twig
{% if product.images360 is not empty %}
{% endif %}
```
**Attributes**
| Attribute | Required | Description |
|---|---|---|
| **product** | **yes** | Product object |
| format | *no* | frame dimensions (same as i:img). Default: \[500x500, 1000x1000, 1500x1500, 2000x2000]; the library picks the size closest to the screen width |
| sizes | *no* | responsiveness of the placeholder (same as i:img) -- required when multiple dimensions are specified |
| zoom | *no* | magnifier zoom, 2–5 or `off` (default: 3); the library disables the magnifier on touch devices |
| no-steps | *no* | hide the forward/backward step buttons |
| no-fullscreen | *no* | hide the fullscreen button (the fullscreen view carries the same prev/play/next bar as the inline player) |
| no-play | *no* | hide the play/stop button |
| autoplay | *no* | start rotating as soon as the frames are loaded (the play button starts as "pause") |
| hide-logo | *no* | hide the 360 view logo overlay shown before the first drag |
| bottom-circle | *no* | show the bottom 360 circle |
| lazyload | *no* | load the library and frames only when the element enters the viewport (see the strategies below) |
| lazyload="click" | *no* | load the library and frames only when the element is clicked (a 360 icon marks the placeholder) |
| hidden | *no* | render the player hidden (`display:none`); it is activated only by `window.image360.push()` -- see below |
| class | *no* | CSS class added to the `.img-360-container` element (used to target the player from fancybox `data-src`) |
**Loading strategies**
| Strategy | Markup | Frames download |
|---|---|---|
| eager | `` | on page load |
| viewport | `lazyload` | when the box scrolls into view (200 px ahead in the white-label bundle, at the edge with the legacy inline helper) |
| click | `lazyload="click"` | when the visitor clicks the placeholder |
| on demand | `hidden` + `window.image360.push(element)` | when your JS activates it (slider slide shown, dialog opened) |
`window.image360.push(element)` takes the `.image-360-hidden` element (or its `.image-360` counterpart)
and initializes it; before the storefront bundle has booted it queues the element and processes it at
boot, so it is safe to call from template JS at any time. Pushing an already initialized element does
nothing.
### In a slider
Put the player into a slide and activate it when the slide is about to be shown, so the frames are
downloaded only by visitors who reach the slide. The thumbnail strip gets the first frame via
`product.firstImage360`. While the pointer is down on the player, disable the slider's own swipe so a
horizontal drag rotates the product instead of changing the slide (slick example):
```twig
{% if product.images360 is not empty %}
{% endif %}
```
```js
function activate360InSlide(slick, index) {
var el = slick.$slides.eq(index).find('.image-360-hidden')[0];
if (el) {
window.image360 = window.image360 || [];
window.image360.push(el);
}
}
$('.slider')
.on('init', function (e, slick) { activate360InSlide(slick, slick.currentSlide); })
.on('beforeChange', function (e, slick, current, next) { activate360InSlide(slick, next); })
.slick({ fade: true, /* … */ });
$('.item-360 .img-360-container').on('mousedown touchstart', function () {
$('.slider').slick('slickSetOption', 'swipe', false);
});
$(document).on('mouseup touchend touchcancel', function () {
$('.slider').slick('slickSetOption', 'swipe', true);
});
```
Because the player renders hidden until the slide is shown, make the placeholder visible so the slide
has its height from the first paint (the box keeps the frames' aspect ratio):
```scss
.item-360 .image-360-hidden { display: block; }
```
### In a fancybox lightbox (3.5)
Add a thumbnail link of type `inline` pointing at a hidden player; the storefront bundle activates the
player when the lightbox opens and re-draws it when its slide is shown. The link's `data-options`
switch off fancybox's own touch gestures and the click-to-close on that slide only, so dragging the
product does not pan or close the lightbox. The dialog content gets its width from the viewport so
that the box fits the viewport height as well (`min(92vw, (100vh - 20px) * ratio)`; the frames'
ratio is emitted as `--img360-ratio` on the `.img-360-container`). The rule has zero specificity,
so any `.fancybox-slide .img-360-container { width: … }` in the template wins.
```twig
```
Keep the lightbox player inside a `hidden` wrapper: the bundle initializes it as soon as the lightbox
opens (so the frames preload while the visitor still looks at the first photo), which makes the
player element itself visible; fancybox moves only the `.img-360-container` into the dialog and puts
it back on close, so the wrapper keeps it off the page the whole time.
The same player can be both the slider slide and the lightbox slide only by rendering it twice (one
`` per place): fancybox moves its inline content into the dialog and back, so a single
element cannot live in both.
## i:video
```twig
{%for video in zbozi.videa%}
{%endfor%}
{%for video in zbozi.videa%}
{%endfor%}
```
**Attributes**
| Attribute | Required | Type | Description |
|---|---|---|---|
| **src** | **yes** | twig | Twig object |
| width | no | int | width in pixels (no units) |
| height | no | int | height in pixels (no units) |
| controls | no | string | `true` / `false` |
| loop | no | string | `true` / `false` |
| color | no | string | HEX color code for the icon |
| autoplay | no | | |
| class | --- | --- | CSS class |
## i:dynamic (attribute) -- dynamic section definition
Wrapping a section of code in an element with the *i:dynamic* attribute defines that this section needs to be dynamically updated from JavaScript. The attribute must list the variables used -- only these variables will be available inside the element (similar principle to a Twig [macro](https://twig.symfony.com/doc/1.x/tags/macro.html)).
Adding the *i:dynamic* attribute does not change the code's behavior -- the output remains the same. The only difference is a new attribute in the resulting HTML that enables reloading part of the page from JavaScript.
When reloading, you can also pass additional custom variables as "arguments". These are then available in the template via the "arguments" array. A typical use case is reloading a section that shows variant-specific information -- the newly selected variant can be passed as an argument.
Arguments are intended only for refining the selection and **cannot be used** to load entirely new content. The URL is public, so if an argument carried e.g. an order number, anyone could change the URL to see details of any order. For variant IDs and similar data, manual URL changes are harmless.
```twig
{# class is not required and can be anything #}
{% if arguments['variant']|default(product.variant.id) %}
abc
{% endif %}
```
```javascript
$('.cart-items-table').reload(); // reload by class
$('.cart-items-table, .second-dynamic-div').reload(); // reload multiple sections at once
$('.cart-items-table').reload({
callback: function() {
alert('načteno!');
}
});
$('.cart-items-table').reload({
callback: function() {
alert('načteno!');
},
arguments: {
variant: 123
}
});
$('.cart-items-table').reload({
after:function(callback){
// code that runs after the loading animation but before the actual reload
// the reload is triggered by calling the callback
// useful for async actions where you want the loading animation but delay the reload until completion
callback();
}
});
```
## i:dynamic (tag) -- dynamic section definition
Wrapping a section of code in an `` element defines that this section can be dynamically updated from JavaScript (automatically or manually).
The tag can be used for:
* reloading the element's content triggered by a JavaScript call
* deferring content generation until the element enters the viewport (lazy="auto")
* deferring content generation until explicitly requested from JavaScript (lazy="manual")
The *variables* attribute must list the variables used -- only these variables will be available inside the element (similar principle to a Twig [macro](https://twig.symfony.com/doc/1.x/tags/macro.html)).
```twig
{# content is rendered immediately with the page and can be refreshed from JavaScript #}
{# class is not required and can be anything #}
{{ product.name }}
{# content is not rendered with the initial page load; it loads automatically when the element enters the viewport and can be refreshed from JavaScript #}
{{ product.name }}
{# content is not rendered with the initial page load; it loads only when reload() is called from JavaScript #}
{{ product.name }}
```
## i:map -- interactive map
The goal is to unify and simplify embedding maps in templates. The map automatically selects zoom and center based on the inserted points (**unless explicitly defined!**).
The map is rendered via mapy.cz, but support for additional map providers will likely be added in the future for language versions, etc. The template syntax is unified, and adding Google Maps support should not require any template changes.
```twig
Po: 08:00-18:00
Út: 08:00-18:00
St: 08:00-18:00
Čt: 08:00-18:00
Pá: 08:00-18:00 {%trans%}Otevírací doba{%endtrans%}
08:00-18:00
{% for location in locations %}
{% endfor %}
```
```html
