You are here

Home » API reference » Varbase Bootstrap Paragraphs 8.7

paragraph--bp-columns-two-uneven.html.twig in Varbase Bootstrap Paragraphs 8.7

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

Bootstrap Paragraphs template for displaying a Two Columns Uneven layout.

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

  2. /**

  3.  * @file

  4.  * Bootstrap Paragraphs template for displaying a Two Columns Uneven layout.

  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. 

  43. {# Background color. #}

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

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

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

  47. {% endif %}

  48. 

  49. {# Renders Column Style field. #}

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

  51. {% if content.bp_column_style_2|render %}

  52.   {% set column_style_2 = content.bp_column_style_2['#items'].getString() %}

  53.   {% set col_1 = [

  54.     'paragraph--style--75-25' == column_style_2 ? 'col-lg-9',

  55.     'paragraph--style--66-33' == column_style_2 ? 'col-lg-8',

  56.     'paragraph--style--25-75' == column_style_2 ? 'col-lg-3',

  57.     'paragraph--style--33-66' == column_style_2 ? 'col-lg-4',

  58.   ]

  59.   %}

  60.   {% set col_2 = [

  61.     'paragraph--style--75-25' == column_style_2 ? 'col-lg-3',

  62.     'paragraph--style--66-33' == column_style_2 ? 'col-lg-4',

  63.     'paragraph--style--25-75' == column_style_2 ? 'col-lg-9',

  64.     'paragraph--style--33-66' == column_style_2 ? 'col-lg-8',

  65.   ]

  66.   %}

  67. {% endif %}

  68. 

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

  70. {%

  71. set classes = [

  72. 'paragraph',

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

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

  75. ]

  76. %}

  77. 

  78. {# col classes #}

  79. {% set col_attribute = create_attribute() %}

  80. {% set col_classes = [] %}

  81. 

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

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

  84. {% if background_field %}

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

  86. {% endif %}

  87. 

  88. {# No container by default. #}

  89. {% set add_container = false %}

  90. 

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

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

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

  94.     {% set add_container = true %}

  95. {% endif %}

  96. 

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

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

  99.   {% set add_container = true %}

  100. {% endif %}

  101. 

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

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

  104. {% endif %}

  105. 

  106. {# Sets Unique ID for paragraph from Paragraph ID. #}

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

  108. 

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

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

  111. 

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

  113. {% set paragraph_title_status = true %}

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

  115.   {% set paragraph_title_status = false %}

  116. {% endif %}

  117. 

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

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

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

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

  122.   {% for custom_class in split_custom_classes %}

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

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

  125.   {%  endfor %}

  126. {% endif %}

  127. 

  128. {# Prints div with classes, and content without Width and Background. #}

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

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

  131.     <div class="row">

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

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

  134.         <div class="row">

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

  136.             {% set attributes = attributes.removeClass('bg-edge2edge').removeAttribute('id') %}

  137.             {% set column_style_field = content.bp_column_style_2|render %}

  138.             {% set col_classes= "" %}

  139.             {% if column_style_field %}

  140.               {% if loop.index  == 1 %}

  141.                   {% set col_classes = col_1 %}

  142.               {% endif %}

  143.               {% if loop.index  == 2 %}

  144.                   {% set attributes = attributes.removeClass(col_1) %}

  145.                   {% set col_classes = col_2 %}

  146.               {% endif %}

  147.             {% endif %}

  148.             <div{{ attributes.removeClass(classes).addClass(col_classes).addClass('p-0') }}>{{ item }}</div>

  149.           {% endfor %}

  150.         </div>

  151.       </div>

  152.     </div>

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

  154. </div>