Directory:~$ /home/lmsyaran/public_html/j3/templates/g5_hydrogen/custom/particles/

Upload File

[Home] [System Details] [Kill Me]

{% 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 attr_extra_left = '' %}
{% if particle.extra_left %}
    {% for attributes in particle.extra_left %}
        {% for key, value in attributes %}
            {% set attr_extra_left = attr_extra_left ~ ' ' ~
key|e ~ '="' ~ value|e('html_attr') ~
'"' %}
        {% endfor %}
    {% endfor %}
{% endif %}

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

{% set indentifier = random() %}

{% block stylesheets %}
	{% if particle.enabled %}
		{{ parent() }}
		<style type="text/css">
			.g-ba-{{ indentifier|e }} .twentytwenty-before-label:before {
				content: "{{ particle.beforetext|default('Before')|e
}}";
			}

			.g-ba-{{ indentifier|e }} .twentytwenty-after-label:before {
				content: "{{ particle.aftertext|default('After')|e
}}";
			}

			{% if particle.overlay|default('enabled')|e ==
'disabled' %}
				.g-ba-{{ indentifier|e }} .twentytwenty-overlay {
					pointer-events: none;
				}
			{% endif %}
		</style>
	{% endif %}
{% endblock %}

{% 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 textcontent %}
    {% if particle.title %}
        <h3 class="g-ba-feature-title">
            {{- particle.title|raw -}}
        </h3>
    {% endif %}

    {% if particle.description %}
        <p class="g-ba-feature-desc">
            {{- particle.description|raw -}}
        </p>
    {% endif %}

    {% if particle.link %}
        <a class="button g-ba-feature-link" href="{{
particle.link|e }}" target="{{
particle.target|default('_blank')|e }}">
            {%- if particle.buttonicon -%}
                <i class="{{ particle.buttonicon|e
}}"></i>
            {%- endif -%}
            {{- particle.buttontext|raw -}}
        </a>
    {% endif %}
{% endset %}

{% set bacontent %}
	<div class="twentytwenty-container"{% if
particle.layout_ba|default('horizontal')|e ==
'vertical' %} data-orientation="vertical"{% endif
%}>
		{%- if particle.beforeimage -%}
			<img alt="{{ particle.beforealt|e }}" src="{{
url(particle.beforeimage) }}" {{ particle.beforeimage|imagesize|raw
}}>
		{%- endif -%}

		{%- if particle.afterimage -%}
			<img alt="{{ particle.afteralt|e }}" src="{{
url(particle.afterimage) }}" {{ particle.afterimage|imagesize|raw
}}>
		{%- endif -%}
	</div>
{% endset %}

{% block particle %}
	<div class="g-before-after g-ba-{{ indentifier|e }}{% if
particle.css.class %} {{ particle.css.class|e }}{% endif %}" {% if
particle.extra %}{{ attr_extra|raw }}{% endif %} >
		{% if particle.mainheading or particle.introtext %}
			{{ particleheading }}
		{% endif %}

		{% if particle.featuremode|default(0) == 0 %}
			{{- bacontent -}}
		{% else %}
			<div class="g-grid">
				<div class="g-block g-ba-feature-left{% if particle.css.left %}
{{ particle.css.left|e }}{% endif %}{% if
particle.layout|default('right')|e == 'left' %}
ba-image-block size-{{ particle.imagewidth|default(50)|e }}{% endif
%}" {% if particle.extra_left %}{{ attr_extra_left|raw }}{% endif
%}>
					<div class="g-content">
						{% if particle.layout|default('right')|e ==
'right' %}{{ textcontent }}{% endif %}
						{% if particle.layout|default('right')|e ==
'left' %}{{ bacontent }}{% endif %}
					</div>
				</div>

				<div class="g-block g-ba-feature-right{% if particle.css.right
%} {{ particle.css.right|e }}{% endif %}{% if
particle.layout|default('right')|e == 'right' %}
align-right ba-image-block size-{{ particle.imagewidth|default(50)|e }}{%
endif %}" {% if particle.extra_right %}{{ attr_extra_right|raw }}{%
endif %}>
					<div class="g-content">
						{% if particle.layout|default('right')|e ==
'right' %}{{ bacontent }}{% endif %}
						{% if particle.layout|default('right')|e ==
'left' %}{{ textcontent }}{% endif %}
					</div>
				</div>
			</div>
		{% endif %}
	</div>
{% endblock %}

{% block javascript_footer %}
	{% if particle.enabled %}
		{% do gantry.load('jquery') %}
		{{ parent() }}
		<script type="text/javascript" src="{{
url('gantry-theme://js/jquery.event.move.js')
}}"></script>
		<script type="text/javascript" src="{{
url('gantry-theme://js/jquery.twentytwenty.js')
}}"></script>
		<script type="text/javascript">
			(function($) {
				$(window).load(function(){
					$(".twentytwenty-container{% if
particle.layout_ba|default('horizontal')|e ==
'vertical' %}[data-orientation='vertical']{% endif
%}").twentytwenty({default_offset_pct: {{
particle.offset|default('0.5') }}{% if
particle.layout_ba|default('horizontal')|e ==
'vertical' %}, orientation: 'vertical'{% endif %}});
				});
			})(jQuery);
		</script>
	{% endif %}
{% endblock %}