@cnbritain/wc-card/template/macro.html

Card component - Portrait, landscape and switcher

{%- from "@cnbritain/wc-common-image/template/macro.html" import common_image -%}
{%- from "@cnbritain/wc-common-picture/template/macro.html" import common_picture -%}

{%- macro card_core_byline(name, prefix='By') -%}
    <div class="c-card__byline">
        <span class="c-card__byline-prefix">{{ prefix }}</span> <span class="c-card__byline-name">{{ name }}</span>
    </div>
{%- endmacro -%}

{%- macro card_core_description(desc) -%}
    <p class="c-card__desc">
        {{ desc }}
    </p>
{%- endmacro -%}

{%- macro card_core_image(article, image_sources, brand='default', image_crop_keys=['default'], image_gallery_order=None, lazyload_images=True, hide_image_icon=False) -%}


    {%- set image_orientations = image_sources|get_image_source_orientations -%}
    {%- set image_cls = '' -%}
    {%- if image_orientations|length == 1 -%}
        {%- if image_orientations[0] == 'landscape' -%}
            {%- set image_cls = '%s %s'|format(image_cls, 'c-card__image--landscape') -%}
        {%- elif image_orientations[0] == 'square' -%}
            {%- set image_cls = '%s %s'|format(image_cls, 'c-card__image--square') -%}
        {%- elif image_orientations[0] == 'portrait' -%}
            {%- set image_cls = '%s %s'|format(image_cls, 'c-card__image--portrait') -%}
        {%- endif -%}
    {%- endif -%}

    {%- if image_gallery_order and image_gallery_order|length > 1 -%}
        <div class="c-card__image-group">
            {%- for image_index in image_gallery_order -%}
                <div class="c-card__image {{ image_cls }}">

                    {%- set card_image = article['gallery']['images'][image_index]|create_crops(image_sources=image_sources, retina=True, max_width=600) -%}

                    {%- if image_orientations|length > 1 -%}
                        {%- set image_breakpoints = card_image|get_breakpoints_from_image_sources(image_sources) -%}
                        {%- set picture_sources = card_image|create_picture_sources(image_breakpoints) -%}
                        {{- common_picture(card_image, picture_sources, class='global__image', lazyload=lazyload_images) -}}
                    {%- else -%}
                        {{- common_image(card_image, class='global__image', lazyload=lazyload_images) -}}
                    {%- endif -%}

                    {%- if loop.last and article['gallery']['images']|length - 3 > 0 -%}
                        <div class='c-card__image__remaining'>
                            <div class='c-card__image__remaining__text'>
                                <span class='c-card__image__remaining__value'>{{ article['gallery']['images']|length - 3 }}</span>
                            </div>
                        </div>
                    {%- endif -%}

                </div>
            {%- endfor -%}
        </div>
    {%- else -%}
        <div class="c-card__image {{ image_cls }}">

            {%- if article['images'] is list -%}
                {%- set card_image = article|get_key('images')|first|create_crops(image_sources=image_sources, retina=True, max_width=600) -%}
            {%- else -%}
                {%- set card_image = article|get_key('images')|try_image_crops(image_crop_keys)|create_crops(image_sources=image_sources, retina=True, max_width=600) -%}
            {%- endif -%}

            {%- if image_orientations|length > 1 -%}
                {%- set image_breakpoints = card_image|get_breakpoints_from_image_sources(image_sources) -%}
                {%- set picture_sources = card_image|create_picture_sources(image_breakpoints) -%}
                {{- common_picture(card_image, picture_sources, class='global__image', lazyload=lazyload_images) -}}
            {%- else -%}
                {{- common_image(card_image, class='global__image', lazyload=lazyload_images) -}}
            {%- endif -%}

            {%- if 'type' in article and not hide_image_icon -%}

                {%- if article['type'] == 'gallery' -%}
                    <div class="c-card__image__icon c-card__image__icon--gallery">{{ "@cnbritain/wc-assets/import/%s/icons/gallery.svg"|format(brand)|import_svg_icon }}</div>
                {%- endif -%}

                {%- if article['type'] == 'video' -%}
                    <div class="c-card__image__icon c-card__image__icon--video">{{ "@cnbritain/wc-assets/import/%s/icons/video.svg"|format(brand)|import_svg_icon }}</div>
                {%- endif -%}

                {%- if article['type'] == 'podcast' -%}
                    <div class="c-card__image__icon c-card__image__icon--podcast">{{ "@cnbritain/wc-assets/import/%s/icons/play.svg"|format(brand)|import_svg_icon }}</div>
                {%- endif -%}

            {%- endif -%}

        </div>
    {%- endif -%}

{%- endmacro -%}

{%- macro card_core_link(article, url=None) -%}
    {%- if 'ad_url' in article and article['ad_url'] -%}
        <a href="{{ article['ad_url'] }}" class="c-card__link c-card__link--article">{{ article['title'] }}</a>
    {%- elif not 'ad_url' in article -%}
        {%- if is_article(article) -%}
            <a href="{{ url_for_article(article) }}" class="c-card__link c-card__link--article">{{ article['title'] }}</a>
        {%- elif is_tag(article) -%}
            <a href="{{ url_for_tag(article) }}" class="c-card__link c-card__link--article">{{ article['title'] }}</a>
        {%- elif url -%}
            <a href="{{ url }}" class="c-card__link c-card__link--article">{{ article['title'] }}</a>
        {%- elif is_magazine(article) -%}
            <a href="{{ url_for('marketing.magazine_issue', year=article.year, month=article.month|get_month_from_int) }}" class="c-card__link c-card__link--article">{{ article['month']|get_month_from_int|title }} {{ article['year'] }}</a>
        {%- elif is_show(article) -%}
            <a href="{{ url_for_show_summary(article) }}" class='c-card__link c-card__link--article'></a>
        {%- endif -%}
    {%- endif -%}
{%- endmacro -%}

{%- macro card_core_meta(article, brand='default', hide_tag=False, hide_duration=True, hide_date=False) -%}
    {%- set has_type = 'type' in article -%}

    <ul class="global__list-reset c-card__meta">

        {%- if not hide_tag and article|get_primary_tag -%}
            <li class="c-card__meta-item c-card__meta-item--tag">
                {{ article|get_primary_tag|get_key('title') }}
            </li>
        {%- endif -%}

        {%- if has_type and article['type'] == 'gallery' -%}
            {# Old api does not have image_count #}
            {# This will be removed soon #}
            {%- if article|get_key('gallery')|get_key('images') -%}
                <li class="c-card__meta-item c-card__meta-item--gallery">
                    {{ "@cnbritain/wc-assets/import/%s/icons/gallery.svg"|format(brand)|import_svg_icon }} {{ article['gallery']['images']|length }} items
                </li>
            {# New api include image_count #}
            {%- elif article|get_key('gallery')|get_key('image_count') -%}
                <li class="c-card__meta-item c-card__meta-item--gallery">
                    {{ "@cnbritain/wc-assets/import/%s/icons/gallery.svg"|format(brand)|import_svg_icon }} {{ article['gallery']['image_count'] }} items
                </li>
            {%- endif -%}
        {%- endif -%}

        {%- if not hide_duration and has_type and article['type'] == 'video' and article|get_key('video') and article['video']|get_key('duration') -%}
            <li class="c-card__meta-item c-card__meta-item--video">
                {{ "@cnbritain/wc-assets/import/%s/icons/video.svg"|format(brand)|import_svg_icon }} {{ article['video']['duration'] }}
            </li>
        {%- endif -%}

        {%- if is_show(article) -%}
            {%- if not hide_date and 'date_time' in article and article['date_time'] -%}
                <li class="c-card__meta-item c-card__meta-item--date">
                    <time datetime="{{ article['date_time'] }}">{{ article['date_time']|dt_format('%-d %B %Y') }}</time>
                </li>
            {%- endif -%}
        {%- else -%}
            {%- if not hide_date and 'show_date' in article and article['show_date'] -%}
                <li class="c-card__meta-item c-card__meta-item--date">
                    <time datetime="{{ article|get_article_date }}">{{ article|get_article_date|get_relative_time }}</time>
                </li>
            {%- endif -%}
        {%- endif -%}

        {%- if article|get_meta_value('event_date_start') -%}
            <li class="c-card__meta-item c-card__meta-item--event-date">
                {{ article|get_event_datetime(output='html') }}
            </li>
        {%- endif -%}

        {%- if article|get_meta_value('event_location') -%}
            <li class="c-card__meta-item c-card__meta-item--event-location">
                {{ article|get_meta_value('event_location') }}
            </li>
        {%- endif -%}

    </ul>
{%- endmacro -%}

{%- macro card_core_review(review_info) -%}
    <ul class="global__list-reset c-card__rating">
        {%- for i in range(review_info['maxscore']) -%}
            {%- if i < review_info['score'] -%}
                <li class="c-card__rating-mark c-card__rating-mark--fill"></li>
            {%- else -%}
                <li class="c-card__rating-mark"></li>
            {%- endif -%}
        {%- endfor -%}
        <li class="c-card__rating-label">{{ review_info['score'] }}/{{ review_info['maxscore'] }}</li>
    </ul>
{%- endmacro -%}

{%- macro card_core_separator(cls='') -%}
    <hr class="c-card__separator {{ cls }}" />
{%- endmacro -%}

{%- macro card_core_sponsor(sponsor, prefix='In partnership with') -%}
    <div class="c-card__sponsor">
        <span class="c-card__sponsor-label">{{ prefix }}</span> <span class="c-card__sponsor-title">{{ sponsor['title'] }}</span>
    </div>
    {{- card_core_separator('c-card__separator--sponsor') -}}
{%- endmacro -%}

{%- macro card_core_title(title) -%}
    <h3 class="c-card__title">
        <span>{{ title }}</span>
    </h3>
{%- endmacro -%}























{%- macro card_core(article, cls='', brand='default', hide_author=True, hide_duration=True, hide_image_icon=True, hide_description=True, hide_tag=False, hide_date=False, theme='light', lazyload_images=True, image_sources=None, image_gallery_order=None, image_crop_keys=['default']) -%}

    {%- set article_sponsor = article|get_article_sponsor -%}

    <article class="c-card c-card--{{ theme }} {{ cls }}">

        {{- card_core_link(article) -}}

        <div class="c-card__obj">

            <div class="c-card__obj__header">
                {{- card_core_image(article, image_sources=image_sources, image_crop_keys=image_crop_keys, brand=brand, image_gallery_order=image_gallery_order, hide_image_icon=hide_image_icon, lazyload_images=lazyload_images) -}}
            </div>

            <div class="c-card__obj__body">
                {%- set article_title = article['title'] -%}
                {%- if is_magazine(article) -%}
                    {%- set article_title = '%s %s'|format(article['month']|get_month_from_int|title, article['year']) -%}
                {%- endif -%}
                {{- card_core_title(article_title) -}}

                {%- if not hide_description -%}
                    {{- card_core_description(article['teaser_short']) -}}
                {%- endif -%}

                {{- card_core_separator() -}}

                {%- if 'type' in article and article['type'] == 'review' -%}
                    {%- set review_info = article|get_review_information -%}
                    {%- if review_info -%}
                        {{- card_core_review(review_info) -}}
                    {%- endif -%}
                {%- endif -%}

                {%- if not article_sponsor and not hide_author and article|get_key('profiles') and article['profiles']|length > 0 -%}
                    {%- if is_show(article) -%}
                        {{- card_core_byline(article['profiles'][0]['full_name'], prefix='show report by') -}}
                    {%- else -%}
                        {{- card_core_byline(article['profiles'][0]['full_name']) -}}
                    {%- endif -%}
                {%- endif -%}

                {%- if article_sponsor -%}
                    {{- card_core_sponsor(article_sponsor) -}}
                {%- endif -%}

                {{- card_core_meta(article, brand, hide_tag, hide_duration, hide_date) -}}
            </div>

        </div>

    </article>
{%- endmacro -%}

{%- macro card(article) -%}

    {%- set card_type = kwargs.pop('card_type', 'portrait') -%}

    {%- if card_type == 'portrait' -%}
        {{- card_portrait(article, **kwargs) -}}
    {%- elif card_type == 'landscape' -%}
        {{- card_landscape(article, **kwargs) -}}
    {%- elif card_type == 'switcher' -%}
        {{- card_switcher(article, **kwargs) -}}
    {%- elif card_type == 'magazine' -%}
        {{- card_magazine(article, **kwargs) -}}
    {%- elif card_type == 'inline' -%}
        {{- card_inline(article, **kwargs) -}}
    {%- elif card_type == 'thumbnail' -%}
        {{- card_thumbnail(article, **kwargs) -}}
    {%- endif -%}

{%- endmacro -%}

{%- macro card_portrait(article) -%}
    {%- set cls = '%s %s'|format('c-card--portrait', kwargs.pop('cls', '')) -%}
    {{- card_core(article, cls=cls, **kwargs) -}}
{%- endmacro -%}

{%- macro card_landscape(article) -%}
    {%- set cls = '%s %s'|format('c-card--landscape', kwargs.pop('cls', '')) -%}
    {{- card_core(article, cls=cls, **kwargs) -}}
{%- endmacro -%}

{%- macro card_switcher(article) -%}
    {%- set cls = '%s %s'|format('c-card--switcher', kwargs.pop('cls', '')) -%}
    {{- card_core(article, cls=cls, **kwargs) -}}
{%- endmacro -%}

{%- macro card_inline(article) -%}
    {%- set cls = '%s %s'|format('c-card--inline', kwargs.pop('cls', '')) -%}
    {{- card_core(article, cls=cls, **kwargs) -}}
{%- endmacro -%}

{%- macro card_magazine(article) -%}
    {%- set cls = '%s %s'|format('c-card--magazine', kwargs.pop('cls', '')) -%}
    {{- card_core(article, cls=cls, **kwargs) -}}
{%- endmacro -%}

{%- macro card_thumbnail(article, image_gallery_order) -%}
    {%- if 'gallery' in article and article['gallery'] and 'images' in article['gallery'] and article['gallery']['images'] and image_gallery_order|length <= article['gallery']['images']|length -%}
        {%- set cls = '%s %s'|format('c-card--thumbnail', kwargs.pop('cls', '')) -%}
        {{- card_core(article, cls=cls, image_gallery_order=image_gallery_order, **kwargs) -}}
    {%- else -%}
        {%- set dont_need_this = kwargs.pop('image_sources') -%}
        {{- card_portrait(article, image_sources=[('landscape')], **kwargs) -}}
    {%- endif -%}
{%- endmacro -%}