You are here

Home » API reference » Bootstrap Paragraphs 8

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

Bootstrap Paragraphs template for displaying an Accordion (Collapse).

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--accordion.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Bootstrap Paragraphs template for displaying an Accordion (Collapse).

  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. {# The template default set classes. #}

  124. {%

  125. set classes = [

  126. 'paragraph',

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

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

  129. ]

  130. %}

  131. 

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

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

  134. {% if width_field %}

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

  136. {% endif %}

  137. 

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

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

  140. {% if background_field %}

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

  142. {% endif %}

  143. 

  144. {# Sets Unique ID for Accordion from Paragraph ID. #}

  145. {% set paragraph_id = 'accordion-' ~ paragraph.id.value %}

  146. 

  147. {# Prints Accordion template. #}

  148. <div{{ attributes.addClass(classes).setAttribute('id', paragraph_id) }} role="tablist" aria-multiselectable="true">

  149.   <section>

  150.     <div class="card panel panel-default">

  151.       {# Loop through all of the accordion sections. #}

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

  153.         <div class="card-header panel-heading" role="tab" id="heading-{{ key + 1 }}">

  154.           <div class="panel-title">

  155.             <a data-toggle="collapse" data-parent="{{ paragraph_id }}" href="#collapse-{{ key + 1 }}" aria-expanded="true" aria-controls="collapse-{{ key + 1 }}">

  156.               {# Print the accordion section title. #}

  157.               {{ item['#paragraph'].field_accordion_section_title.value }}

  158.             </a>

  159.           </div>

  160.         </div>

  161.         <div id="collapse-{{ key + 1 }}" class="card-block panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ key + 1 }}">

  162.           {# Loop through all of the accordion section bodies. #}

  163.           {% for body_key, body_item in item['#paragraph'].field_accordion_section_body %}

  164.             {# Use the same render array as item and set the '#paragraph'. #}

  165.             {% set section_body = item %}

  166.             {% set section_body = section_body|merge({'#paragraph': section_body['#paragraph'].field_accordion_section_body[body_key].entity}) %}

  167.             {# Remove the cache keys so it doesn't repeat the first value. #}

  168.             {% set section_body = section_body|merge({'#cache': {}}) %}

  169.             {# Print the compiled section body. #}

  170.             {{ section_body }}

  171.           {% endfor %}

  172.         </div>

  173.       {% endfor %}

  174.     </div>

  175.   </section>

  176. </div>