Spade

Mini Shell

Directory:~$ /home/lmsyaran/www/templates/g5_hydrogen/custom/particles/
Upload File

[Home] [System Details] [Kill Me]
Current File:~$ /home/lmsyaran/www/templates/g5_hydrogen/custom/particles/slideshow.html.twig

{% extends '@nucleus/partials/particle.html.twig' %}

{% set attr_extra = '' %}
{% if particle.extra %}
    {% for attributes in particle.extra %}
        {% for key, value in attributes %}
            {% set attr_extra = attr_extra ~ ' ' ~ key|e ~
'="' ~ value|e('html_attr') ~ '"'
%}
        {% endfor %}
    {% endfor %}
{% endif %}

{% set particleheading %}
    <div class="g-particle-intro">
        {% if particle.mainheading %}
            <h3 class="g-title g-main-title">{{
particle.mainheading|raw }}</h3>
            <div class="g-title-separator {% if particle.introtext
== false %}no-intro-text{% endif %}"></div>
        {% endif %} 
        {% if particle.introtext %}<p
class="g-introtext">{{ particle.introtext|raw }}</p>{%
endif %}
    </div>
{% endset %}

{%- set slideshow_settings -%}
    {
        autoplay:{{ particle.autoplay|default("true")|e }},
        autoplayInterval:{{ particle.autoplayInterval|default(7000)|e }},
        kenburns:{{ particle.kenburns|default("false")|e }},
        animation:'{{ particle.animation|default('fade')|e
}}',
        duration:{{ particle.animationDuration|default(500)|e }},
        pauseOnHover:{{ particle.pauseOnHover|default("true")|e
}},
        height:'{{ particle.height|default('auto')|e
}}'
    }
{%- endset -%}

{% set slideshow_slides %}
    {% for item in particle.items %}

        {% set slide_media %}
            {% if item.image %}
                <img alt="{{ item.alt|e }}" src="{{
url(item.image) }}" {{ item.image|imagesize|raw }}>
            {% endif %}
            {% if item.videoiframe %}
                {{ item.videoiframe|raw }}
            {% endif %}
        {% endset %} 

        {% set slide_overlay %}

            {% set overlay_position %}
                {%- if item.overlayposition|default('bottom') ==
'bottom' -%}
                    uk-overlay-bottom
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'left' -%}
                    uk-overlay-left
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'right' -%}
                    uk-overlay-right
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'top' -%}
                    uk-overlay-top
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'bottom-left' -%}
                    uk-flex-bottom
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'bottom-center' -%}
                    uk-flex-bottom uk-flex-center
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'bottom-right' -%}
                    uk-flex-bottom uk-flex-right
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'middle-left' -%}
                    uk-flex-middle
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'middle-center' -%}
                    uk-flex-middle uk-flex-center
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'middle-right' -%}
                    uk-flex-middle uk-flex-right
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'top-left' -%}
                    uk-flex-top
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'top-center' -%}
                    uk-flex-top uk-flex-center
                {%- endif -%}

                {%- if item.overlayposition|default('bottom') ==
'top-right' -%}
                    uk-flex-top uk-flex-right
                {%- endif -%}
            {% endset %}

            {% set slide_overlay_animation %}
                {%- if item.overlayanimation|default('fade') ==
'fade' -%}
                    uk-overlay-fade
                {%- endif -%}

                {%- if item.overlayanimation|default('fade') ==
'slide-left' -%}
                    uk-overlay-slide-left
                {%- endif -%}

                {%- if item.overlayanimation|default('fade') ==
'slide-right' -%}
                    uk-overlay-slide-right
                {%- endif -%}

                {%- if item.overlayanimation|default('fade') ==
'slide-top' -%}
                    uk-overlay-slide-top
                {%- endif -%}

                {%- if item.overlayanimation|default('fade') ==
'slide-bottom' -%}
                    uk-overlay-slide-bottom
                {%- endif -%}

                {%- if item.overlayanimation|default('fade') ==
'slide-left-short' -%}
                    uk-overlay-slide-left uk-overlay-left-short
                {%- endif -%}

                {%- if item.overlayanimation|default('fade') ==
'slide-right-short' -%}
                    uk-overlay-slide-right uk-overlay-right-short
                {%- endif -%}

                {%- if item.overlayanimation|default('fade') ==
'slide-top-short' -%}
                    uk-overlay-slide-top uk-overlay-top-short
                {%- endif -%}

                {%- if item.overlayanimation|default('fade') ==
'slide-bottom-short' -%}
                    uk-overlay-slide-bottom uk-overlay-bottom-short
                {%- endif -%}

                {%- if item.overlayanimation|default('fade') ==
'scale' -%}
                    uk-overlay-scale
                {%- endif -%}
            {% endset %}

            {% set title %}
                <h3 class="g-slideshow-title">
                    {%- if item.link -%}
                        <a target="{{
item.target|default('_parent')|e }}" href="{{
item.link|e }}">
                    {%- endif -%}
                        {{- gantry.platform.filter(item.title)|html|raw
-}}
                    {%- if item.link -%}
                        </a>
                    {%- endif -%}
                </h3>
            {% endset %}

            {% set description %}
                <div class="g-slideshow-desc">
                    {{- gantry.platform.filter(item.description)|html|raw
-}}
                </div>
            {% endset %}

            {% set buttons %}
                <div class="g-slideshow-buttons">
                    {% for button in item.buttons %}
                        <a class="button {{
button.buttonstyle|default('empty-light')|e }}"
target="{{ button.target|default('_parent')|e }}"
href="{{ button.link|e }}">
                            {%- if button.buttonicon -%}
                                <span class="{{ button.buttonicon|e
}}"></span>
                            {%- endif -%}
                            {{- button.text|raw -}}
                        </a>
                    {% endfor %}    
                </div>
            {% endset %}

            {% if item.overlaystyle|default('style1') ==
'style1' %}

                {% if (item.overlayposition|default('bottom') ==
'bottom') or (item.overlayposition|default('bottom') ==
'top') or (item.overlayposition|default('bottom') ==
'left') or (item.overlayposition|default('bottom') ==
'right') %}
                    <div class="uk-overlay-panel
uk-overlay-background {{ overlay_position }} {{ slide_overlay_animation }}
{% if item.overlaywidth|default(auto)|e != 'auto' %}
uk-width-1-{{ item.overlaywidth|default(auto)|e }}{% endif %} {{
item.overlaystyle|default("style1")|e }}">
                        <div class="slideshow-caption">
                            {% if item.title %}
                                {{ title }}
                            {% endif %}

                            {% if item.description %}
                                {{ description }}
                            {% endif %}

                            {% if item.buttons %}
                                {{ buttons }}
                            {% endif %}
                        </div>
                    </div>
                {% else %}
                    <div class="uk-overlay-panel uk-flex {{
overlay_position }} {{ slide_overlay_animation }}{% if
item.overlaycontainer|default(0) == 1 %} g-overlay-container{% endif %} {{
item.overlaystyle|default("style1")|e }}">
                        <div class="slideshow-caption
uk-overlay-background{% if item.overlaywidth|default(auto)|e !=
'auto' %} uk-width-1-{{ item.overlaywidth|default(auto)|e }}{%
endif %}">
                            {% if item.title %}
                                {{ title }}
                            {% endif %}

                            {% if item.description %}
                                {{ description }}
                            {% endif %}

                            {% if item.buttons %}
                                {{ buttons }}
                            {% endif %}
                        </div>
                    </div>
                {% endif %}

            {% endif %}

            {% if item.overlaystyle|default('style1') ==
'style2' or item.overlaystyle|default('style1') ==
'style3' %}
                
                {% if (item.overlayposition|default('bottom') ==
'bottom') or (item.overlayposition|default('bottom') ==
'top') or (item.overlayposition|default('bottom') ==
'left') or (item.overlayposition|default('bottom') ==
'right') %}
                     <div class="uk-overlay-panel {{
overlay_position }} {{ slide_overlay_animation }} {% if
item.overlaywidth|default(auto)|e != 'auto' %} uk-width-1-{{
item.overlaywidth|default(auto)|e }}{% endif %} {{
item.overlaystyle|default("style1")|e }}">
                        <div class="slideshow-caption">
                            {% if item.title %}
                                {{ title }}
                            {% endif %}

                            {% if item.description %}
                                {{ description }}
                            {% endif %}

                            {% if item.buttons %}
                                {{ buttons }}
                            {% endif %}
                        </div>
                    </div>
                {% else %}
                    <div class="uk-overlay-panel uk-flex {{
overlay_position }} {{ slide_overlay_animation }}{% if
item.overlaycontainer|default(0) == 1 %} g-overlay-container{% endif %} {{
item.overlaystyle|default("style1")|e }}">
                        <div class="slideshow-caption{% if
item.overlaywidth|default(auto)|e != 'auto' %} uk-width-1-{{
item.overlaywidth|default(auto)|e }}{% endif %}">
                            {% if item.title %}
                                {{ title }}
                            {% endif %}

                            {% if item.description %}
                                {{ description }}
                            {% endif %}

                            {% if item.buttons %}
                                {{ buttons }}
                            {% endif %}
                        </div>
                    </div>
                {% endif %}

            {% endif %}

        {% endset %}

        <li class="g-slideshow-item{% if item.class %} {{
item.class|e }}{% endif %}">
            {{ slide_media }}
            {% if item.title or item.description or item.buttons %}
                {{ slide_overlay }}
            {% endif %}
        </li>
    {% endfor %}
{% endset %}

{% block particle %}
    
    <div class="g-slideshow{% if particle.css.class %} {{
particle.css.class|e }}{% endif %}" {% if particle.extra %}{{
attr_extra|raw }}{% endif %}>
        {% if particle.mainheading or particle.introtext %}
            {{ particleheading }}
        {% endif %}
        <div class="uk-slidenav-position{% if
particle.fullscreen|default(0) %} fullscreen{% endif %}{% if
particle.navigation|default('arrows') ==
'arrowsvisible' or
particle.navigation|default('arrows') == 'bothvisible'
%} nav-visible{% endif %}" data-uk-slideshow="{{
slideshow_settings }}">
            <ul class="uk-slideshow uk-overlay-active{% if
particle.fullscreen|default(0) %} uk-slideshow-fullscreen{% endif
%}">
                {{ slideshow_slides }}
            </ul>

            {% if (particle.navigation|default('arrows') ==
'arrows') or (particle.navigation|default('arrows') ==
'arrowsvisible') or
(particle.navigation|default('arrows') == 'both') or
(particle.navigation|default('arrows') ==
'bothvisible') %}
                <a href="" class="uk-slidenav
uk-slidenav-previous" data-uk-slideshow-item="previous"
aria-label="{{'Previous'|trans_key('IT_ACCESS_PREVIOUS')}}"></a>
                <a href="" class="uk-slidenav
uk-slidenav-next" data-uk-slideshow-item="next"
aria-label="{{'Next'|trans_key('IT_ACCESS_NEXT')}}"></a>
            {% endif %}

            {% if (particle.navigation|default('arrows') ==
'dots') or (particle.navigation|default('arrows') ==
'both') or (particle.navigation|default('arrows') ==
'bothvisible') %}
                <ul class="uk-dotnav uk-dotnav-contrast
uk-position-bottom uk-flex-center">
                {% set counter = 0 %}
                {% for item in particle.items %}
                    <li data-uk-slideshow-item="{{ counter
}}"><a href=""
aria-label="{{'Item'|trans_key('IT_ACCESS_ITEM')}}
{{ counter }}"></a></li>
                    {% set counter = counter + 1 %}
                {% endfor %}
                </ul>
            {% endif %}
        </div>
    </div>
{% endblock %}