vvjp-1.0.3/templates/views-view-vvjp.html.twig

{#
  @file
  Template for rendering a Views Vanilla JavaScript Parallax.

  Available variables:
  - options: The options array containing settings for the parallax.
  - rows: An array of row items to be displayed in the parallax.
  - attributes: A list of HTML attributes for the wrapper div.

  Options settings:
  - unique_id: A unique identifier for the parallax instance.
  - parallax_speed: Speed of the parallax effect.
  - max_width: Max width for parallax content.
  - overlay_color: Color of the overlay.
  - overlay_opacity: Opacity of the overlay.
  - section_height: Height of the parallax section.
#}
{# Set unique IDs for the carousel and container #}
{% set unique_id = options.unique_id %}
{% set vvjp_id = 'vvjp-' ~ unique_id %}
{% set parallax_inner_id = 'vvjp-inner-' ~ unique_id %}
{% set breakpoints = options.available_breakpoints %}
{% set max_width = options.max_width %}
{% set animation_speed =  options.bg_animation_speed ~ 's' %}
{% set animation_easing =  options.bg_animation_easing %}
{% set background_position =  options.background_position %}
{# Initialize base classes array #}
{% set classes = [
  'vvjp',
  'br-' ~ breakpoints,
  vvjp_id,
] %}

<div {{ attributes.addClass(classes).setAttribute('id', vvjp_id) }}>
  <div id="{{ parallax_inner_id }}" class="vvjp-inner">

    {# Loop through each row to render individual parallax sections #}
    {% for key, row in rows %}
      {% set row_content = row.content|render %}

      {# Use a unique tag or CSS class to split the content #}
      {% set split_content = row_content|split('<div class="vvjp-separator"></div>') %}
      {% set image_field = split_content[0]|striptags|trim %}
      {% set foreground_field = split_content[1]|default('') %}

      {# Determine the effect class based on the selected option #}
      {% set effect_class = options.scroll_effect ~ '-effect' %}

      {# Render each parallax row with background and content #}
      <div id="{{ vvjp_id ~ '-' ~ key }}" class="parallax-row {{ effect_class }}" data-breakpoint="{{ breakpoints }}" data-parallax-speed="{{ options.parallax_speed }}" data-parallax-effect="{{ options.scroll_effect }}" style="--section-height: {{ section_height }};">

        <div class="parallax-background" style="background-image: url('{{ image_field }}'); --background-position: {{ background_position }}; --animation-speed: {{ animation_speed }}; --animation-easing: {{ animation_easing }};">
        </div>

        {% if background_rgb and not options.disable_overlay and not options.over_content_only %}
        <div class="parallax-overlay" style="--bg-parallax-overlay: {{ background_rgb }}"></div>
        {% endif %}

        <div class="parallax-content"{% if background_rgb and not options.disable_overlay and options.over_content_only %} style="--bg-parallax-content: {{ background_rgb }};"{% endif %}>
          <div class="parallax-content-inner"{% if max_width %} style="--max-width: {{ max_width }};"{% endif %}>
            {{ foreground_field|safe_html }}
          </div>
        </div>

      </div>
    {% endfor %}

  </div> {# End of vvjp-inner #}
</div> {# End of main wrapper #}