drowl_paragraphs_bs-1.x-dev/modules/drowl_paragraphs_bs_type_card/templates/paragraph--drowl-paragraphs-bs--card.html.twig

{% extends "@drowl_paragraphs_bs/paragraph--drowl-paragraphs-bs.html.twig" %}

{# To archive equal height cards like: https://codepen.io/rafibomb/pen/MJWQZZ
   we make the paragraph wrapper the card wrapper.
#}
{# @todo: Still required? #}
{% set link_field = content.field_link.0 %}
{% set link_label = link_field['#title'] == link_field['#url'].toString() ? '' : link_field['#title']|default('read on'|t) %}
{% set target_url = link_field['#url'] %}

{# Check if it's an external link > set target blank #}
{% if link_field['#options'].external == true %}
  {% set link_attributes = { 'class':['card-link'], 'target': '_blank' } %}
{% else %}
  {% set link_attributes = { 'class':['card-link'] } %}
{% endif %}

{% block paragraph %}
  {% if not content.field_image.0.field_media_image is empty %}
    {% set image %}
      {{ include('@drowl_paragraphs_bs/inc/flexible_image.html.twig', {
        image_field: content.field_image.0.field_media_image,
        image_is_zoomable: paragraph.field_image_zoomable.value,
        responsive_image_size: paragraph.field_resp_imagestyle.value.0.target_id,
        image_link: paragraph.field_link.value,
        image_link_attributes: link_attributes
      }) }}
    {% endset %}
  {% endif %}

  {%
    set card_classes = [
      'paragraph',
      content.field_nodeentityref.0 ? 'paragraph--entity-view-mode-' ~ content.field_nodeentityref.0['#view_mode']|clean_class,
      'paragraph--type-' ~ paragraph.bundle|clean_class,
      view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
      'card',
      'card--paragraph',
      card_type == 'tile' ? 'card--tile',
      image_zoomable ? 'card--image-zoom' : '',
      'scale' in responsive_image_size ? 'card--image-scale' : '',
    ]
  %}
  {% set card_body_classes = [
    attributes.hasClass('card--type-tile') ? 'card-img-overlay' : 'card-body',
  ] %}

  {#
    Button classes
    Formatter classes are set using ui_styles.
    You can add further formatters adding ui_style classes prefixed with "btn-".
  #}
  {%
    set button_classes = [
      'btn'
    ]
  %}

  {% block content %}
    {# Add upublished label #}
    {{ block("unpublished_hint", "@drowl_paragraphs_bs/paragraph--drowl-paragraphs-bs.html.twig") }}

    <div {{ attributes.addClass(card_classes) }}>
      {{ title_prefix }}
      {{ title_suffix }}
      {% if image %}
        {% block card_image %}
          <div class="card-image">
            {{ image }}
          </div>
        {% endblock card_image %}
      {% endif %}
      <div {{ card_body_attributes.addClass(card_body_classes) }}>
        {% if content.field_title.0 %}
          {% block card_title %}
            {# We accidentally added 'card__title' instead of 'card-title'. Leave it for legacy reasons. #}
            <div class="card-title h3{% if content.field_subtitle.0 %} has-subline{% endif %} card__title">
              {% if target_url %}
                {{ link(content.field_title|field_value, target_url, link_attributes) }}
              {% else %}
                {{ content.field_title|field_value }}
              {% endif %}
            </div>
          {% endblock card_title %}
        {% endif %}
        {% if content.field_subtitle.0 %}
          {% block card_subline %}
            <div class="card-subline subline">
              {{ content.field_subtitle|field_value }}
            </div>
          {% endblock card_subline %}
        {% endif %}
        {% if content.field_text.0 %}
          {% block card_teaser %}
          <div class="card-text">
            {{ content.field_text|field_value }}
          </div>
          {% endblock card_teaser %}
        {% endif %}
        {% if link_label and target_url %}
          {% block card_buttons %}
            <div class="card-buttons">
              {# {{- link(link_label, target_url, button_link_attributes) -}} #}
              <a{{ button_attributes.addClass(button_classes) }} href="{{ paragraph.field_link.0.url.toString }}">
                {{ content.field_link.0['#title'] }}
              </a>
            </div>
          {% endblock card_buttons %}
        {% elseif link_field['#url'] %}
          {% block card_overlay_link %}
            {{- link(link_label, target_url, link_attributes) -}}
          {% endblock card_overlay_link %}
        {% endif %}
      </div>
    </div>
  {% endblock content %}
{% endblock paragraph %}