thejimbirch

{# Prints div with classes, & content w/o img/invert/overlay/parallax fields. #}
<div{{ attributes.addClass(classes).setAttribute('data-overlay', overlay_levels).setAttribute('data-speed', parallax_speeds) }}>
  {% if content.xeno_background_image|render %}
    <div class="paragraph--type--xeno-hero__image">
      {{ content.xeno_background_image }}
    </div>
  {% endif %}
  {{ content|without('xeno_background_image', 'xeno_invert', 'xeno_overlay', 'xeno_parallax') }}
</div>

thejimbirch

/*!
 * Bootstrap's Gruntfile
 * http://getbootstrap.com
 * Copyright 2013-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

module.exports = function (grunt) {
  'use strict';

thejimbirch

{#
/**
 * @file
 * Bootstrap Paragraphs template for displaying a Carousel.
 *
 * 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

{#
/**
 * @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\');
    });