thejimbirch

{#
/**
 * @file
 * Overrides field template to add column class based on loop length.
 *
 * To override output, copy the "field.html.twig" from the templates directory
 * to your theme's directory and customize it, just like customizing other
 * Drupal templates such as page.html.twig or node.html.twig.
 *
 * Instead of overriding the theming for all fields, you can also just override

thejimbirch

/* -----------------------------------------------------------------------------

  Paragraph Section CSS.

  The following classes are available if the different Paragraph types
  need their own individual styling.

  .paragraph.paragraph--type--blank {}
  .paragraph.paragraph--type--carousel {} -- Is used below
  .paragraph.paragraph--type--columns {} -- Is used below

thejimbirch

/* -----------------------------------------------------------------------------

  Paragraph Section CSS.

  The following classes are available if the different Paragraph types
  need their own individual styling.

  .paragraph.paragraph--type--blank {}
  .paragraph.paragraph--type--carousel {} -- Is used below
  .paragraph.paragraph--type--columns {} -- Is used below

thejimbirch

/* RGBA Colors from http://mdbootstrap.com/css/colors/#rgba-colors */

.paragraph--color--rgba-blue-light {
  background: rgba(3, 169, 244, 0.3);
}

.paragraph--color--rgba-red-light {
  background: rgba(244, 67, 54, 0.3);
}

thejimbirch

{#
/**
 * @file
 * Default theme implementation to display a paragraph in Bootstrap Paragraphs.
 *
 * Available variables:
 * - paragraph: Full paragraph entity.
 *   - id: The paragraph ID.
 *   - bundle: The type of the paragraph, for example, "image" or "text".
 *   - authorid: The user ID of the paragraph author.

thejimbirch

/* -------------------------------------------------------------------------- */
/* Extends:                                                                   */
/* https://gist.github.com/thejimbirch/5b6b9ceb6e597a48f330e02edd8bcb49       */                                                */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* Here we add Width Modifiers                                                */
/* -------------------------------------------------------------------------- */

/* Adds Width Element -- Medium */

thejimbirch

<!-- Creates a unique number in PHP, and adds it to the Bootstrap JavaScript which is added inline -->
<!-- The random number is created to make sure multiple carousels can be on one page -->
<?php $a = mt_rand(100000,999999); drupal_add_js('(function($) {
  $(document).ready(function () {
    $(\'#myCarousel-'.$a.'\').carousel({interval: false});
     $(\'#myCarousel-'.$a.' .carousel-control.right\').click(function (e) {
        e.preventDefault();
        $(this).attr(\'href\',\'javascript:void(0)\');
        $(\'#myCarousel-'.$a.'\').carousel(\'next\');
    });

thejimbirch

{#
/**
 * @file
 * Theme override to turn a multivalue field into a Bootstrap Carousel.
 *
 * To override output, copy the "field.html.twig" from the templates directory
 * to your theme's directory and customize it, just like customizing other
 * Drupal templates such as page.html.twig or node.html.twig.
 *
 * Instead of overriding the theming for all fields, you can also just override

thejimbirch

{# Specify that we want to hide the content so we can print our fields individually #}
{{ content|without('field_sl','field_sli', 'field_wi', 'field_bg') }}
{# In the normal Boostrap carousel markup, we add our conditional fields as classes: #}
{# If Width field (field_wi) has value, add the class #}
{# If Background Color field (field_bg) has value, add the class #}
{# If Slide Interval field (field_sli) has value, add the data interval #}
{# We also add the Paragraph's id as the carousel id so we can allow multiple carousel on one page. (paragraph.id.value)" #}
<div class="element element--layout-slideshow carousel slide{% if content.field_wi %} {{content.field_wi}}{% endif %}{% if content.field_bg %} {{content.field_bg}}{% endif %}" id="myCarousel-{{ paragraph.id.value }}" data-ride="carousel"{% if content.field_sli %} data-interval="{{content.field_sli}}"{% endif %}>
  {# For the carousel indicators, we loop through the slide field #}
  {# We use Twig loop.first to set the active class, and the key to set

thejimbirch

{#
/**
 * @file
 * Theme override for a select element.
 *
 * Available variables:
 * - attributes: HTML attributes for the select tag.
 * - options: The option element children.
 *
 * @see template_preprocess_select()