Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

pimcore-toolbox/docs/40_DataAttributesGenerator.md

Go to file
 
 
Cannot retrieve contributors at this time
Data Attributes Generator Define Attributes Usage:
62 lines (46 sloc) 1.9 KB
Raw Blame
Open in GitHub Desktop

Data Attributes Generator

The Toolbox Bundle provides a twig extension to generate data attributes for your html elements.

Since we're using the awesome slick slider to generate the gallery element, the toolbox also relies on the data attributes generator. There are two predefined nodes: gallery and gallery_thumbs. You may want to override them or add your custom nodes - so let's check it out:

Define Attributes

# add this to your config/packages/toolbox.yaml
toolbox:
    data_attributes:
    
        #override the gallery data attributes 
        gallery:
            lazy_load: false
            fade: false
           
        # all attributes must be written in underscore notation
        my_custom_node:
            attribute_1: true
            attribute_2: 'special value'
            
            # array values will be transformed to a json string
            responsive:
                -
                    breakpoint: 1200,
                    settings:
                        slidesToShow: 3

                -
                    breakpoint: 991,
                    settings:
                        slidesToShow: 2

                -
                    breakpoint: 480,
                    settings:
                        slidesToShow: 1

Usage:

Render the attributes is very simple. It's also possible to override your defined properties within the twig extension call.

<div class="x" {{ toolbox_data_attributes_generator('my_custom_node', {attribute_2: 'overritten special value'}) }}></div>

This will generate something like this:

<div
 class="x" 
 data-attribute-1="true" 
 data-attribute-2="overritten special value" 
 data-responsive="[{"breakpoint":1200,"settings":{"slidesToShow":3}},{"breakpoint":991,"settings":{"slidesToShow":2}},{"breakpoint":480,"settings":{"slidesToShow":1}}]"
 ></div>