Add a new Paragraph Type "Before/After Image Slider" (Cocoen Library)

Created on 17 August 2023, over 1 year ago

Updated 7 March 2024, 10 months ago

Problem/Motivation

Add a new Paragraph Type "Before/After Image Slider": https://github.com/koenoe/cocoen

Steps to reproduce

Proposed resolution

Twig example code:

{% extends "paragraph.html.twig" %}

{% block content %}
  {{ attach_library('drowl_paragraphs/paragraph-before-after-image-slider') }}
  <div class="cocoen">
    {{ content.field_paragraphs_image|field_value }}
    {{ content.field_paragraphs_image_secondary|field_value }}
  </div>
{% endblock %}

Javascript init:

(function ($, Drupal) {
  Drupal.behaviors.drowl_paragraphs_image_before_after_slider = {
    attach: function (context, settings) {
      $('.paragraph--type--before-after-image-slider', context).each(function () {
        Cocoen.parse($(this)[0]);
      });
    },
  };
})(jQuery, Drupal);