special_tile¶

The special_tile macro is used to render a single tile element, such as a banner with customizable image, link, alternative text, background color, and device-specific visibility.

Definition¶

{% special_tile(class, options) %}

Input parameters¶

class¶

string CSS class or classes that will be applied to the special tile element. For example, you can use classes like desktop-only, laptop-only, tablet-only, or mobile-only to control the visibility of the tile on specific devices.

options¶

object parameter represents an object of special tile options

Option key	Type	Default	Required	Description
options.img	`string`	false	no	Path or URL to the image file displayed in the special tile.
options.href	`string`	false	no	URL to which the tile will link if provided.
options.alt	`string`	false	no	Alternative text for the image.
options.shouldOpenSpecialTileLinkInSameTab	`number`	false	no	If set to 1, the link will open in the same browser tab.
options.backgroundColor	`string`	false	no	Background color of the special tile.

Example¶

In this example we render a special tile that is only visible on desktop devices. The tile displays an image, links to an external URL, uses alternative text for accessibility, opens the link in the same tab, and applies a custom background color.

{% from "@macros/special_tile.twig" import special_tile %}

{{ special_tile('desktop-only', {
    img: 'path/to/my-image.jpg',
    href: 'https://storefront.developers.shoper.pl/',
    alt: 'This is an example of a basic image',
    shouldOpenSpecialTileLinkInSameTab: 1,
    backgroundColor: @globalBodyBackgroundColor
}) }}

Macro source code¶

{% macro special_tile(class, options) %}
    <div class="special-tile {{ class }}" {% if options.backgroundColor %} style="background-color: {{ options.backgroundColor }}"{% endif %}>
        {% if options.href %}
            <a href="{{ options.href }}" 
            title="{{ options.alt ? options.alt : options.href }} {{ options.shouldOpenSpecialTileLinkInSameTab ? '' : '- ' ~ translate('opens in a new tab')}}" 
            {% if not options.shouldOpenSpecialTileLinkInSameTab %} target="_blank" rel="noopener noreferrer"{% endif %}>
        {% endif %}
        <img src="{{ options.img }}" 
            alt="{{ options.href ? '' : options.alt }}" 
            class="special-tile__image" 
            loading="lazy"/>
        {% if options.href %}
            </a>
        {% endif %}
    </div>
{% endmacro %}