ixm_blocks-1.0.x-dev/modules/ixm_blocks_cards/templates/block--ixm-blocks-cards.html.twig

{#
/**
 * @file
 * Theme override to display a block.
 *
 * Available variables:
 * - plugin_id: The ID of the block implementation.
 * - label: The configured label of the block if visible.
 * - configuration: A list of the block's configuration values.
 *   - label: The configured label for the block.
 *   - label_display: The display settings for the label.
 *   - provider: The module or other provider that provided this block plugin.
 *   - Block plugin specific settings will also be stored here.
 * - content: The content of this block.
 * - attributes: array of HTML attributes populated by modules, intended to
 *   be added to the main container tag of this template.
 *   - id: A valid HTML ID and guaranteed unique.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 *
 * @see template_preprocess_block()
 */
#}
{% set classes = [
  'block',
  'block-' ~ configuration.provider|clean_class,
  'block-' ~ plugin_id|clean_class,
] %}

{% set card_id = 'cards-' ~ configuration['block_revision_id'] %}

<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}>

  {{ title_prefix }}
  {% if label %}
    <h3{{ title_attributes.addClass('mb-5') }}>{{ label }}</h3>
  {% endif %}
  {{ title_suffix }}

  {% block content %}
    <div class="mb-3 mb-lg-4">
      {{ content|without('field_entity_reference_paragraph', 'field_content_reference') }}
    </div>

    <div class="row row-cols-1 row-cols-md-3 g-4" id="{{ card_id }}">

      {# Cards > Custom #}
      {% if content.field_entity_reference_paragraph %}
        {% for key, item in content.field_entity_reference_paragraph|filter((value, key) => key|first != '#') %}

          {# Setup our image style. #}
          {# @todo: make this a setting from the module, check if d8 is installed vs. d9, pass media_image as a variable instead. #}
          {% if item['#paragraph'].field_media_element.0.entity.image.entity.uri.value %}
            {# lightning_media_image 8.x-3x source_field: [image] #}
            {% set media_image = item['#paragraph'].field_media_element.0.entity.image.entity.uri.value %}
            {% set image_alt = item['#paragraph'].field_media_element.0.entity.image.0.alt %}
          {% elseif item['#paragraph'].field_media_element.0.entity.field_media_image.entity.uri.value %}
            {# lightning_media_image 8.x-4x source_field: [field_media_image] #}
            {% set media_image = item['#paragraph'].field_media_element.0.entity.field_media_image.entity.uri.value %}
            {% set image_alt = item['#paragraph'].field_media_element.0.entity.field_media_image.0.alt %}
          {% endif %}

          {% if media_image %}
            {% set image = file_url(media_image|image_style('large')) %}
          {% endif %}

          {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}
          <div class="col mb-4">
            <div class="card h-100">

              {% if image %}
                <img class="card-img-top" src="{{ image }}"
                     alt="{{ item['#paragraph'].field_media_element.0.entity.image.0.alt }}">
              {% endif %}

              <div class="card-body">

                {% if item['#paragraph'].field_title %}
                  <h5 class="card-heading" id="heading-{{ safe_hash }}">
                    {{ item['#paragraph'].field_title.value }}
                  </h5>
                {% endif %}

                {% if item['#paragraph'].field_body %}
                  <div class="card-text">
                    {{ item['#paragraph'].field_body.value|raw }}
                  </div>
                {% endif %}

              </div>

              {% if item['#paragraph'].field_links is not empty %}
                <div class="card-footer bg-transparent border-0">
                  <div class="row flex-wrap mx-n2">
                    {% set numTagsIndex = item['#paragraph'].field_links|length - 1 %}
                    {% for i in 0..numTagsIndex %}
                      <div class="col-auto px-2 cta-link my-2">
                        <a href="{{ item['#paragraph'].field_links[i].uri.toString() }}"
                           class="btn {{ loop.first ? 'btn-primary' : 'btn-secondary' }}">
                          {{ item['#paragraph'].field_links[i].title }}
                        </a>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              {% endif %}

            </div>
          </div>
        {% endfor %}
      {% endif %}

      {# Cards > Nodes #}
      {% if content.field_content_reference %}
        {% for key, item in content.field_content_reference|filter((value, key) => key|first != '#') %}

          {% set media_image = item['#node'].field_image.0.entity.image.entity.uri.value %}
          {% if media_image %}
            {% set image = file_url(media_image|image_style('large')) %}
            {% set image_alt = item['#paragraph'].field_media_element.0.entity.image.0.alt %}
          {% endif %}

          {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}
          <div class="col mb-4">
            <div class="card h-100">

              {% if image %}
                <img class="card-img-top" src="{{ image }}" alt="{{ image_alt }}">
              {% endif %}

              <div class="card-body">

                {% if item['#node'].title %}
                  <h5 class="card-heading" id="heading-{{ safe_hash }}">
                    <a href="{{ path('entity.node.canonical', {'node': item['#node'].nid.value}) }}"
                       class="stretched-link">{{ item['#node'].title.value }}</a>
                  </h5>
                {% endif %}

                {% if item['#node'].body.value %}
                  <div class="card-text">
                    {{ item['#node'].body.value|raw }}
                  </div>
                {% endif %}

              </div>

              {% if item['#paragraph'].field_links is not empty %}
                <div class="card-footer bg-transparent border-0">
                  <div class="row flex-wrap mx-n2">
                    {% set numTagsIndex = item['#paragraph'].field_links|length - 1 %}
                    {% for i in 0..numTagsIndex %}
                      <div class="col-auto px-2 cta-link my-2">
                        <a href="{{ item['#paragraph'].field_links[i].uri.toString() }}"
                           class="btn {{ loop.first ? 'btn-primary' : 'btn-secondary' }}">
                          {{ item['#paragraph'].field_links[i].title }}
                        </a>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              {% endif %}

            </div>
          </div>
        {% endfor %}
      {% endif %}
    </div>
  {% endblock %}

</div>