You are here

Home » API reference » Varbase Bootstrap Paragraphs 8.7

paragraph--bp-accordion.html.twig in Varbase Bootstrap Paragraphs 8.7

Same filename and directory in other branches
  1. 8.4 templates/paragraph--bp-accordion.html.twig
  2. 8.5 templates/paragraph--bp-accordion.html.twig
  3. 8.6 templates/paragraph--bp-accordion.html.twig
  4. 9.0.x templates/paragraph--bp-accordion.html.twig

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--bp-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('varbase_bootstrap_paragraphs/vbp-default') }}

  41. {{ attach_library('varbase_bootstrap_paragraphs/vbp-colors') }}

  42. {{ attach_library('varbase_bootstrap_paragraphs/vbp-accordion') }}

  43. 

  44. {# Background color. #}

  45. {% if content.bp_background|render %}

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

  47.   {% set layout_background_classes = [ layout_background ] %}

  48. {% endif %}

  49. 

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

  51. {%

  52. set classes = [

  53. 'paragraph',

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

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

  56. ]

  57. %}

  58. 

  59. {# Merges Background color with classes. #}

  60. {% set background_field = content.bp_background|render %}

  61. {% if background_field %}

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

  63. {% endif %}

  64. 

  65. {# No container by default. #}

  66. {% set add_container = false %}

  67. 

  68. {# If there is BG image it's always edge to edge #}

  69. {% if (VBP.background_image.url or content.bp_background|render) %}

  70.     {% set attributes = attributes.addClass('bg-edge2edge') %}

  71.     {% set add_container = true %}

  72. {% endif %}

  73. 

  74. {# If gutter option were selected. #}

  75. {% if VBP.bp_gutter.value %}

  76.   {% set add_container = true %}

  77. {% endif %}

  78. 

  79. {% if VBP.background_image.url %}

  80.   {% set attributes = attributes.addClass('background-style') %}

  81. {% endif %}

  82. 

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

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

  85. 

  86. {# Sets paragraph title for paragraph. #}

  87. {% set paragraph_title = content.bp_title[0]['#context']['value']|render %}

  88. 

  89. {# Sets paragraph title status for paragraph. #}

  90. {% set paragraph_title_status = true %}

  91. {% if VBP.bp_title_status.value %}

  92.   {% set paragraph_title_status = false %}

  93. {% endif %}

  94. 

  95. {# Add custom paragraph CSS class(es). #}

  96. {% if VBP.bp_classes.value %}

  97.   {% set striped_custom_classes = VBP.bp_classes.value|striptags|lower %}

  98.   {% set split_custom_classes = striped_custom_classes|split(' ') %}

  99.   {% for custom_class in split_custom_classes %}

  100.     {% set clened_custom_class = [ custom_class|clean_class ] %}

  101.     {% set classes = classes|merge(clened_custom_class) %}

  102.   {%  endfor %}

  103. {% endif %}

  104. 

  105. {# Prints Accordion template. #}

  106. <div{{ attributes.addClass(classes).setAttribute('id', paragraph_id) }} role="tablist" aria-multiselectable="true" {% if VBP.background_image.url %} style="background-image:url({{- VBP.background_image.url -}});" {% endif %}>

  107.   {% if add_container %}<div class="container">{% endif %}

  108.     <div class="row">

  109.       <div class="{{- VBP.bp_width.value -}}">

  110.         {% if paragraph_title and paragraph_title_status %}<h2 class="text-center">{% spaceless %}{{- paragraph_title|striptags -}}{% endspaceless %}</h2>{% endif %}

  111.         {{ title_suffix }}

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

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

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

  115.             {% set attributes = attributes.removeClass('bg-edge2edge') %}

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

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

  118.                 <a data-toggle="collapse" data-target="#collapse-{{ paragraph_id }}-{{ key + 1 }}" href="#collapse-{{ paragraph_id }}-{{ key + 1 }}" aria-expanded="false" class="collapsed" aria-controls="collapse-{{ paragraph_id }}-{{ key + 1 }}">

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

  120.                   {{ item['#paragraph'].bp_accordion_section_title.value }}

  121.                 </a>

  122.               </div>

  123.             </div>

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

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

  126.               {% for body_key, body_item in item['#paragraph'].bp_accordion_section_body %}

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

  128.                 {% set section_body = item %}

  129.                 {# Get the language code #}

  130.                 {% set language = section_body['#paragraph'].langcode[0].value %}

  131.                 {# Check if a translation exists #}

  132.                 {% if section_body['#paragraph'].bp_accordion_section_body[body_key].entity.hasTranslation(language) %}

  133.                   {# Load the entity for the current translation #}

  134.                   {% set section_body = section_body|merge({'#paragraph': section_body['#paragraph'].bp_accordion_section_body[body_key].entity.getTranslation(section_body['#paragraph'].langcode[0].value)}) %}

  135.                 {% else %}

  136.                   {# Load the source entity #}

  137.                   {% set section_translation = section_body['#paragraph'].bp_accordion_section_body[body_key].entity %}

  138.                 {% endif %}

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

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

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

  142.                 {{ section_body }}

  143.               {% endfor %}

  144.             </div>

  145.           {% endfor %}

  146.         </div>

  147.       </div>

  148.     </div>

  149.   {% if add_container %}</div>{% endif %}

  150. </div>