| Current Path : /home/zieirix/www/templates/it_medical/particles/ |
| Current File : /home/zieirix/www/templates/it_medical/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 %}