it-osu-web / it-osu-pl

IT@OSU Pattern Lab
https://it-osu-web.github.io/it-osu-pl/
3 stars 1 forks source link

Rework card pattern to better enable import into Drupal themes #203

Closed mel-miller closed 3 years ago

mel-miller commented 3 years ago

Also set and enforce image proportions.

mel-miller commented 3 years ago

How it is currently in wcm_theme

{%
  set classes = [
    'block',
    'block--' ~ configuration.provider|clean_class,
    'block--' ~ base_plugin_id|clean_class,
    'block--' ~ derivative_plugin_id|clean_class,
  ]
%}

{% set card_image = file_url(content.field_wcm_block_card_image[0]['#media'].field_media_image.entity.uri.value) %}
{% set card_image_alt = content.field_wcm_block_card_image[0]['#media'].field_media_image.alt %}
{% set card_link_url = content.field_wcm_block_card_link[0]['#url'] %}
{% set card_link_title = content.field_wcm_block_card_link[0]['#title'] %}

<div{{attributes.addClass(classes)}}>
    {{ title_suffix }}
    <div class="card">
        <img class="card__image" alt="{{ card_image_alt }}" src="{{ card_image }}"/>
        <div class="card__inner">
            <h2 class="card__title">{{ label }}</h2>
            <div class="card__content">{{ content.field_wcm_block_card_body }}</div>
            <a class="button" href="{{ card_link_url }}">
                {{ card_link_title }}
            </a>
        </div>
    </div>
</div>
mel-miller commented 3 years ago

Also do this with tiles.