bootstrap_italia-8.x-0.x-dev/modules/bootstrap_italia_paragraph/templates/components/content/bi-paragraph-base.html.twig

{#
/**
 * @file
 * Template for Paragraphs base component.
 *
 * Available variables:
 * - paragraph: Full paragraph entity.
 *   Only method names starting with "get", "has", or "is" and a few common
 *   methods such as "id", "label", and "bundle" are available. For example:
 *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
 *   - paragraph.id(): The paragraph ID.
 *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
 *   - paragraph.getOwnerId(): The user ID of the paragraph author.
 *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
 *   and methods for the paragraph object.
 * - 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 template_preprocess_paragraph()
 *
 * @ingroup themeable
 */
#}
{{ attach_library('bootstrap_italia_paragraph/base') }}
{%
  set classes = [
  'paragraph',
  'paragraph--type--' ~ paragraph.bundle|clean_class,
  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  not paragraph.isPublished() ? 'paragraph--unpublished',
  content.field_settings[0]['#paragraph'].field_full_width.getString() ? 'paragraph--full-width',
  content.field_settings[0]['#paragraph'].field_container_classes.getString()
]
%}

{% set background_image =
  content.field_settings[0]['#paragraph'].field_background_image.entity.fileuri
  ? 'background-image: url("' ~ file_url( content.field_settings[0]['#paragraph'].field_background_image.entity.fileuri ) ~ '");'
  : ''
%}

{# Opacity has a value between 0.01 and 1.
  If the value is equal to 1 no opacity settings.
  When the opacity value is 1, I don't add anything to the background_color value.
  When the opacity value is between 0.1 and 0.99 I multiply by 100 to add a two-digit integer after the background_color value.
  When the opacity value is between 0.01 and 0.09 I add a zero to the string so that I have two characters for the background_color value.
#}
{% set opacity =
  content.field_settings[0]['#paragraph'].field_background_color.value[0]['opacity'] < 1
  ? content.field_settings[0]['#paragraph'].field_background_color.value[0]['opacity'] * 100
  : ''
%}
{% set opacity = opacity < 10 and opacity > 0 ? '0'~opacity : opacity %}

{% set background_color =
  content.field_settings[0]['#paragraph'].field_background_color.value[0]['color']
  ? 'background-color: ' ~ content.field_settings[0]['#paragraph'].field_background_color.value[0]['color']|lower ~ opacity ~ ';'
  : ''
%}

{% set background_blend_mode =
  content.field_settings[0]['#paragraph'].field_background_blend_mode.getString() != ""
  ? 'background-blend-mode: ' ~ content.field_settings[0]['#paragraph'].field_background_blend_mode.getString() ~ ';'
  : ''
%}

{% set background_fixed =
  content.field_settings[0]['#paragraph'].field_background_image_fixed.getString()
  ? 'background-repeat: no-repeat;background-position: left;background-size: cover;background-attachment: fixed;'
  : ''
%}

{% set style_attribute = [
  background_image,
  background_fixed,
  background_color,
  background_blend_mode,
  content.field_settings[0]['#paragraph'].field_inline_style.getString()
]
%}

{% set id = "paragraph-" ~ paragraph.bundle|clean_class ~ "-" ~paragraph.id() %}

<div{{ attributes.addClass(classes).setAttribute('id', id).setAttribute('style', style_attribute) }}>
  {% if content.field_settings[0]['#paragraph'].field_full_width.getString() == "1"
    and content.field_settings[0]['#paragraph'].field_enable_container.getString() == "1"  %}
    <div class="container">
  {% endif %}

    {% block content %}
      {{ content }}
    {% endblock %}

  {% if content.field_settings[0]['#paragraph'].field_full_width.getString() == "1"
    and content.field_settings[0]['#paragraph'].field_enable_container.getString() == "1"  %}
    </div>
  {% endif %}
</div>