You are here

Home » API reference » Bootstrap Paragraphs 8

paragraph--carousel.html.twig in Bootstrap Paragraphs 8

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.
    • createdtime: Formatted creation date. Preprocess functions can reformat it by calling format_date() with the desired parameters on $variables['paragraph']->getCreatedTime().
  • content: All paragraph items. Use {{ content }} to print them all, or print a subset such as {{ content.field_example }}. Use {{ content|without('field_example') }} to temporarily suppress the printing of a given child element.
  • attributes: HTML attributes for the containing element. The attributes.class element may contain one or more of the following classes:

    • paragraphs: The current template type (also known as a "theming hook").
    • paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an "Image" it would result in "paragraphs--type--image". Note that the machine name will often be in a short form of the human readable label.
    • paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a preview would result in: "paragraphs--view-mode--preview", and default: "paragraphs--view-mode--default".
  • view_mode: View mode; for example, "preview" or "full".
  • logged_in: Flag for authenticated user status. Will be true when the current user is a logged-in member.
  • is_admin: Flag for admin user status. Will be true when the current user is an administrator.

See also

template_preprocess_paragraph()

File

templates/paragraph--carousel.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Bootstrap Paragraphs template for displaying a Carousel.

  5.  *

  6.  * Available variables:

  7.  * - paragraph: Full paragraph entity.

  8.  *   - id: The paragraph ID.

  9.  *   - bundle: The type of the paragraph, for example, "image" or "text".

  10.  *   - authorid: The user ID of the paragraph author.

  11.  *   - createdtime: Formatted creation date. Preprocess functions can

  12.  *     reformat it by calling format_date() with the desired parameters on

  13.  *     $variables['paragraph']->getCreatedTime().

  14.  * - content: All paragraph items. Use {{ content }} to print them all,

  15.  *   or print a subset such as {{ content.field_example }}. Use

  16.  *   {{ content|without('field_example') }} to temporarily suppress the printing

  17.  *   of a given child element.

  18.  * - attributes: HTML attributes for the containing element.

  19.  *   The attributes.class element may contain one or more of the following

  20.  *   classes:

  21.  *   - paragraphs: The current template type (also known as a "theming hook").

  22.  *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an

  23.  *     "Image" it would result in "paragraphs--type--image". Note that the machine

  24.  *     name will often be in a short form of the human readable label.

  25.  *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a

  26.  *     preview would result in: "paragraphs--view-mode--preview", and

  27.  *     default: "paragraphs--view-mode--default".

  28.  * - view_mode: View mode; for example, "preview" or "full".

  29.  * - logged_in: Flag for authenticated user status. Will be true when the

  30.  *   current user is a logged-in member.

  31.  * - is_admin: Flag for admin user status. Will be true when the current user

  32.  *   is an administrator.

  33.  *

  34.  * @see template_preprocess_paragraph()

  35.  *

  36.  * @ingroup themeable

  37.  */

  38. #}

  39. 

  40. {{ attach_library('bootstrap_paragraphs/bootstrap-paragraphs') }}

  41. 

  42. {# Renders Width field. #}

  43. {# Sets class name from values in database. #}

  44. {% if content.field_width|render %}

  45.   {% set layout_width = content.field_width['#items'].getString() %}

  46.   {% set layout_width_classes = [

  47.     'paragraph--width--tiny' == layout_width ? 'paragraph--width--tiny',

  48.     'paragraph--width--narrow' == layout_width ? 'paragraph--width--narrow',

  49.     'paragraph--width--medium' == layout_width ? 'paragraph--width--medium',

  50.     'paragraph--width--wide' == layout_width ? 'paragraph--width--wide',

  51.     'paragraph--width--full' == layout_width ? 'paragraph--width--full',

  52.   ]

  53.   %}

  54. {% endif %}

  55. 

  56. {# Renders Background field. #}

  57. {# Sets class name from values in database. #}

  58. {% if content.field_background|render %}

  59.   {% set layout_background = content.field_background['#items'].getString() %}

  60.   {% set layout_background_classes = [

  61.     'paragraph--color paragraph--color--rgba-black-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-black-slight',

  62.     'paragraph--color paragraph--color--rgba-black-light' == layout_background ? 'paragraph--color paragraph--color--rgba-black-light',

  63.     'paragraph--color paragraph--color--rgba-black-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-black-strong',

  64.     'paragraph--color paragraph--color--rgba-blue-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-black-strong',

  65.     'paragraph--color paragraph--color--rgba-blue-light' == layout_background ? 'paragraph--color paragraph--color--rgba-blue-light',

  66.     'paragraph--color paragraph--color--rgba-blue-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-blue-strong',

  67.     'paragraph--color paragraph--color--rgba-bluegrey-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-bluegrey-slight',

  68.     'paragraph--color paragraph--color--rgba-bluegrey-light' == layout_background ? 'paragraph--color paragraph--color--rgba-bluegrey-light',

  69.     'paragraph--color paragraph--color--rgba-bluegrey-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-bluegrey-strong',

  70.     'paragraph--color paragraph--color--rgba-brown-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-brown-slight',

  71.     'paragraph--color paragraph--color--rgba-brown-light' == layout_background ? 'paragraph--color paragraph--color--rgba-brown-light',

  72.     'paragraph--color paragraph--color--rgba-brown-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-brown-strong',

  73.     'paragraph--color paragraph--color--rgba-cyan-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-cyan-slight',

  74.     'paragraph--color paragraph--color--rgba-cyan-light' == layout_background ? 'paragraph--color paragraph--color--rgba-cyan-light',

  75.     'paragraph--color paragraph--color--rgba-cyan-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-cyan-strong',

  76.     'paragraph--color paragraph--color--rgba-green-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-green-slight',

  77.     'paragraph--color paragraph--color--rgba-green-light' == layout_background ? 'paragraph--color paragraph--color--rgba-green-light',

  78.     'paragraph--color paragraph--color--rgba-green-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-green-strong',

  79.     'paragraph--color paragraph--color--rgba-grey-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-grey-slight',

  80.     'paragraph--color paragraph--color--rgba-grey-light' == layout_background ? 'paragraph--color paragraph--color--rgba-grey-light',

  81.     'paragraph--color paragraph--color--rgba-grey-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-grey-strong',

  82.     'paragraph--color paragraph--color--rgba-indigo-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-indigo-slight',

  83.     'paragraph--color paragraph--color--rgba-indigo-light' == layout_background ? 'paragraph--color paragraph--color--rgba-indigo-light',

  84.     'paragraph--color paragraph--color--rgba-indigo-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-indigo-strong',

  85.     'paragraph--color paragraph--color--rgba-lime-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-lime-slight',

  86.     'paragraph--color paragraph--color--rgba-lime-light' == layout_background ? 'paragraph--color paragraph--color--rgba-lime-light',

  87.     'paragraph--color paragraph--color--rgba-lime-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-lime-strong',

  88.     'paragraph--color paragraph--color--rgba-orange-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-orange-slight',

  89.     'paragraph--color paragraph--color--rgba-orange-light' == layout_background ? 'paragraph--color paragraph--color--rgba-orange-light',

  90.     'paragraph--color paragraph--color--rgba-orange-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-orange-strong',

  91.     'paragraph--color paragraph--color--rgba-pink-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-pink-slight',

  92.     'paragraph--color paragraph--color--rgba-pink-light' == layout_background ? 'paragraph--color paragraph--color--rgba-pink-light',

  93.     'paragraph--color paragraph--color--rgba-pink-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-pink-strong',

  94.     'paragraph--color paragraph--color--rgba-purple-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-purple-slight',

  95.     'paragraph--color paragraph--color--rgba-purple-light' == layout_background ? 'paragraph--color paragraph--color--rgba-purple-light',

  96.     'paragraph--color paragraph--color--rgba-purple-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-purple-strong',

  97.     'paragraph--color paragraph--color--rgba-red-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-red-slight',

  98.     'paragraph--color paragraph--color--rgba-red-light' == layout_background ? 'paragraph--color paragraph--color--rgba-red-light',

  99.     'paragraph--color paragraph--color--rgba-red-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-red-strong',

  100.     'paragraph--color paragraph--color--rgba-stylish-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-stylish-slight',

  101.     'paragraph--color paragraph--color--rgba-stylish-light' == layout_background ? 'paragraph--color paragraph--color--rgba-stylish-light',

  102.     'paragraph--color paragraph--color--rgba-stylish-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-stylish-strong',

  103.     'paragraph--color paragraph--color--rgba-teal-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-teal-slight',

  104.     'paragraph--color paragraph--color--rgba-teal-light' == layout_background ? 'paragraph--color paragraph--color--rgba-teal-light',

  105.     'paragraph--color paragraph--color--rgba-teal-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-teal-strong',

  106.     'paragraph--color paragraph--color--rgba-white-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-white-slight',

  107.     'paragraph--color paragraph--color--rgba-white-light' == layout_background ? 'paragraph--color paragraph--color--rgba-white-light',

  108.     'paragraph--color paragraph--color--rgba-white-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-white-strong',

  109.     'paragraph--color paragraph--color--rgba-yellow-slight' == layout_background ? 'paragraph--color paragraph--color--rgba-yellow-slight',

  110.     'paragraph--color paragraph--color--rgba-yellow-light' == layout_background ? 'paragraph--color paragraph--color--rgba-yellow-light',

  111.     'paragraph--color paragraph--color--rgba-yellow-strong' == layout_background ? 'paragraph--color paragraph--color--rgba-yellow-strong',

  112.     'paragraph--color--transparent' == layout_background ? 'paragraph--color--transparent',

  113.     'paragraph--color paragraph--color--primary' == layout_background ? 'paragraph--color paragraph--color--primary',

  114.     'paragraph--color paragraph--color--secondary' == layout_background ? 'paragraph--color paragraph--color--secondary',

  115.     'paragraph--color paragraph--color--success' == layout_background ? 'paragraph--color paragraph--color--success',

  116.     'paragraph--color paragraph--color--info' == layout_background ? 'paragraph--color paragraph--color--info',

  117.     'paragraph--color paragraph--color--warning' == layout_background ? 'paragraph--color paragraph--color--warning',

  118.     'paragraph--color paragraph--color--danger' == layout_background ? 'paragraph--color paragraph--color--danger',

  119.   ]

  120.   %}

  121. {% endif %}

  122. 

  123. {# Renders Slide Interval field. #}

  124. {# Converts database values to classes supplied by template. #}

  125. {% if content.field_slide_interval|render %}

  126.   {% set slide_interval = content.field_slide_interval['#items'].getString() %}

  127.   {% set slide_interval_classes = [

  128.     'false' == slide_interval ? 'false',

  129.     '1000' == slide_interval ? '1000',

  130.     '2000' == slide_interval ? '2000',

  131.     '3000' == slide_interval ? '3000',

  132.     '4000' == slide_interval ? '4000',

  133.     '5000' == slide_interval ? '5000',

  134.     '6000' == slide_interval ? '6000',

  135.     '7000' == slide_interval ? '7000',

  136.   ]

  137.   %}

  138. {% endif %}

  139. 

  140. {# The template default set classes. #}

  141. {%

  142. set classes = [

  143. 'paragraph',

  144. 'paragraph--type--' ~ paragraph.bundle|clean_class,

  145. view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,

  146. 'carousel',

  147. 'slide',

  148. ]

  149. %}

  150. 

  151. {# Merges Width field with classes. #}

  152. {% set width_field = content.field_width|render %}

  153. {% if width_field %}

  154.   {% set classes = classes|merge(layout_width_classes) %}

  155. {% endif %}

  156. 

  157. {# Merges Background field with classes. #}

  158. {% set background_field = content.field_background|render %}

  159. {% if background_field %}

  160.   {% set classes = classes|merge(layout_background_classes) %}

  161. {% endif %}

  162. 

  163. {# Sets Unique ID for Carousel from Paragraph ID. #}

  164. {% set paragraph_id = 'myCarousel-' ~ paragraph.id.value %}

  165. 

  166. {# Prints Carousel template. #}

  167. {{ content|without('field_slide_content','field_slide_interval', 'field_width', 'field_background') }}

  168. <div{{ attributes.addClass(classes).setAttribute('id', paragraph_id).setAttribute('data-interval', slide_interval_classes).setAttribute('data-ride', 'carousel') }}>

  169.   <ol class="carousel-indicators">

  170.     {% for key, item in content.field_slide_content if key|first != '#' %}

  171.       <li class="{% if loop.first %}active{% endif %}" data-slide-to="{{ key }}" data-target="#{{ paragraph_id }}"></li>

  172.     {% endfor %}

  173.   </ol>

  174.   <div class="carousel-inner" role="listbox">

  175.     {% for key, item in content.field_slide_content if key|first != '#' %}

  176.       <div class="paragraph--layout-slideshow__slide-{{ key + 1 }} item carousel-item{% if loop.first %} active{% endif %}">{{ item }}</div>

  177.     {% endfor %}

  178.   </div>

  179.   <a class="left carousel-control" href="#{{ paragraph_id }}" role="button" data-slide="prev">

  180.     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

  181.     <span class="sr-only">Previous</span>

  182.   </a>

  183.   <a class="right carousel-control" href="#{{ paragraph_id }}" role="button" data-slide="next">

  184.     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

  185.     <span class="sr-only">Next</span>

  186.   </a>

  187. </div>