Detail

{% extends '@wrapper-frame' %}

{% import _self as detail %}
{% import '@macro-render' as render %}

{% set CType = 'extension-news' %}

{% macro mediaImage(mediaElement, settings) %}
    {% import '@macro-img' as img %}

    {% set lightbox = settings.detail.media.image.lightbox %}

    <div class="mediaelement mediaelement-image">
        {% if mediaElement.properties.link %}
            <a href="{{ file.properties.link }}"
                title="{{ file.properties.title }}"
                {{ target }}>
                {% include '@atom-image' with {
                    file: mediaElement,
                    class: 'img-fluid',
                    additionalAttributes: [
                        {
                            itemprop: 'image'
                        }
                    ]
                } %}
            </a>
        {% else %}
            {% if lightbox.enabled %}
                {% set href = img.src(mediaElement) %}

                {% if mediaElement.properties.description %}
                    {% set dataLightboxCaption = ' data-lightbox-caption="'
                        ~ mediaElement.properties.description
                        ~ '"'
                    %}
                {% endif %}

                {% if lightbox.width %}
                    {% set dataLightboxWidth = ' data-lightbox-width="'
                        ~ lightbox.width
                        ~ '"'
                    %}
                {% elseif mediaElement.holder.width %}
                    {% set dataLightboxWidth = ' data-lightbox-width="'
                        ~ mediaElement.holder.width * 2
                        ~ '"'
                    %}
                {% endif %}

                {% if lightbox.height %}
                    {% set dataLightboxHeight = ' data-lightbox-height="'
                        ~ lightbox.height
                        ~ '"'
                    %}
                {% elseif mediaElement.holder.height %}
                    {% set dataLightboxHeight = ' data-lightbox-height="'
                        ~ mediaElement.holder.height * 2
                        ~ '"'
                    %}
                {% endif %}

                <a href="{{ href }}"
                    title="{{ mediaElement.properties.title }}"
                    class="lightbox"
                    rel="lighbox-group-news-detail"
                    {{ dataLightboxCaption }}
                    {{ dataLightboxWidth }}
                    {{ dataLightboxHeight }}>
                    {% include '@atom-image' with {
                        file: mediaElement,
                        class: 'img-fluid',
                        additionalAttributes: [
                            {
                                itemprop: 'image'
                            }
                        ]
                    } %}
                </a>
            {% else %}
                {% include '@atom-image' with {
                    file: mediaElement,
                    class: 'img-fluid',
                    additionalAttributes: [
                        {
                            itemprop: 'image'
                        }
                    ]
                } %}
            {% endif %}
        {% endif %}
    </div>
    {% if mediaElement.description %}
        <p class="news-img-caption">
            {mediaElement.description}
        </p>
    {% endif %}
{% endmacro %}

{% macro mediaVideo(mediaElement, settings) %}
    <div class="mediaelement">
        <div class="mediaelement-video">
            {% set extension = mediaElement.url|split('.')|last %}
            {% if extension == 'mp4' or extension == 'webm' %}
                {% include '@atom-video' with {
                    file: mediaElement,
                    external_media_ratio: external_media_ratio
                } %}
            {% else %}
                {% if
                    'youtube' in mediaElement.url
                        or 'vimeo' in mediaElement.url %}
                    {% include '@atom-iframe' with {
                        url: mediaElement.url,
                        external_media_ratio: external_media_ratio
                    } %}
                {% endif %}
            {% endif %}
        </div>

        {% if mediaElement.description %}
            <div class="medialement-alternative-content">
                <p class="news-img-caption">
                    {mediaElement.description}
                </p>
            </div>
        {% endif %}
    </div>
{% endmacro %}

{% macro mediaContainer(media, settings) %}
    {% import _self as detail %}

    {% if media %}
        <!-- media files -->
        <div class="news-img-wrap">
            {% for mediaElement in media %}
                <div class="outer">
                    {% if mediaElement.type == 'image' %}
                        {{ detail.mediaImage(mediaElement, settings) }}
                    {% endif %}
                    {% if mediaElement.type == 'media' %}
                        {{ detail.mediaVideo(mediaElement, settings) }}
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endmacro %}

{% macro share(settings) %}
    {% set services = settings.services|default('twitter,facebook,info') %}
    {% set lang = settings.lang|default('de') %}
    {% set buttonStyle = settings.buttonStyle|default('standard') %}
    {% set orientation = settings.orientation|default('horizontal') %}
    {% set theme = settings.theme|default('standard') %}

    <div data-title=""
        data-url="#"
        data-services="{{ services }}"
        data-lang="{{ lang }}"
        data-button-style="{{ buttonStyle }}"
        data-orientation="{{ orientation }}"
        data-theme="{{ theme }}"
        class="shariff"></div>
{% endmacro %}

{% block main %}
    {% include '@atom-header' %}

    <div class="news news-single">
        <div class="article"
            itemscope="itemscope"
            itemtype="http://schema.org/Article">
            {% if newsItem %}
                {# TODO: {% if settings.detail.showPrevNext %}
                    <n:simplePrevNext pidList="{newsItem.pid}" news="{newsItem}" as="paginated" sortField="datetime">
                        <f:if condition="{paginated}">
                            <ul class="pager">
                                <f:if condition="{paginated.prev}">
                                    <li class="previous">
                                        <n:link newsItem="{paginated.prev}" settings="{settings}">
                                            <span aria-hidden="true">&larr; </span>{paginated.prev.title}
                                        </n:link>
                                    </li>
                                </f:if>
                                <f:if condition="{paginated.next}">
                                    <li class="next">
                                        <n:link newsItem="{paginated.next}" settings="{settings}" class="next">
                                            {paginated.next.title} <span aria-hidden="true"> &rarr;</span>
                                        </n:link>
                                    </li>
                                </f:if>
                            </ul>
                        </f:if>
                    </n:simplePrevNext>
                {% endif %} #}

                <div class="header">
                    <h3 itemprop="headline">
                        {{ newsItem.title }}
                    </h3>
                </div>
                <div class="footer">
                    <p>
                        <!-- date -->
                        <span class="news-list-date">
                            <time itemprop="datePublished"
                                datetime="{{ date|date('Y-m-d') }}">
                                {{ date|date('d.m.Y') }}
                            </time>
                        </span>

                        {% if newsItem.categories %}
                            <span class="news-list-category">
                                {% for category in newsItem.categories %}
                                    {% if category.shortcut %}
                                        <a href="{{ category.shortcut }}">
                                            {{ category.title }}
                                        </a>
                                    {% else %}
                                        {{ category.title }}
                                    {% endif %}
                                {% endfor %}
                            </span>
                        {% endif %}

                        {% if newsItem.tags %}
                            <!-- Tags -->
                            <span class="news-list-tags" itemprop="keywords">
                                {% for tag in newsItem.tags %}
                                    {{ tag.title }}
                                {% endfor %}
                            </span>
                        {% endif %}

                        {% if newsItem.author %}
                            <!-- author -->
                            <span class="news-list-author"
                                itemprop="author"
                                itemscope="itemscope"
                                itemtype="http://schema.org/Person">
                                Author: <span itemprop="name">{{
                                        newsItem.author
                                    }}</span>
                            </span>
                        {% endif %}
                    </p>
                </div>

                {% if newsItem.teaser %}
                    <!-- teaser -->
                    <div class="teaser-text" itemprop="description">
                        {% include template_from_string(newsItem.teaser) %}
                    </div>
                {% endif %}

                {% if newsItem.contentElements %}
                    <!-- content elements -->
                    {{ render.frames(newsItem.contentElements) }}
                {% endif %}

                {{ detail.mediaContainer(newsItem.media, settings) }}

                <!-- main text -->
                <div class="news-text-wrap" itemprop="articleBody">
                    {% include template_from_string(newsItem.bodytext) %}
                </div>

                {% if settings.backPid %}
                    <!-- Link Back -->
                    <div class="news-backlink-wrap">
                        <a href="#">Back</a>
                    </div>
                {% endif %}

                {% if settings.detail.showSocialShareButtons %}
                    {#
                Care about the privacy of your readers?
                Checkout https://typo3.org/extensions/repository/view/rx_shariff
                and it will be used automatically!
            #}
                    {{ detail.share(settings.share) }}
                {% endif %}

                <!-- related things -->
                <div class="news-related-wrap">
                    {#
                Various options exist to fetch different related information:
                - {newsItem.allRelatedSorted}: all related news, related und related from, sorted by date
                - {newsItem.related}: all related
                - {newsItem.relatedSorted}: all related, sorted by date
                - {newsItem.relatedFrom}: all related from
                - {newsItem.relatedFromSorted}: all related from, sorted by dateFormat
            #}

                    {# TODO: {% if newsItem.allRelatedSorted %}
                        <!-- Related news records -->
                        <div class="news-related news-related-news">
                            <h4>
                                Related news
                            </h4>
                            <ul>
                                {% for related in newsItem.allRelatedSorted %}
                                    <li>
                                        <span class="news-related-news-date"><f:format.date format="{f:translate(key:'dateFormat')}">{related.datetime}</f:format.date></span>
                                        <n:link newsItem="{related}" settings="{settings}" title="{related.title}">
                                            {related.title}
                                        </n:link>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %} #}

                    {# TODO: {% if newsItem.relatedFiles %}
                        <!-- related files -->
                        <div class="news-related news-related-files">
                            <h4>
                                Related files
                            </h4>
                            <ul>
                                {% for relatedFile in newsItem.relatedFiles %}
                                    <li>
                                        <span class="news-related-files-link">
                                            <a href="{relatedFile.originalResource.publicUrl -> f:format.htmlspecialchars()}" target="_blank">
                                                {f:if(condition:relatedFile.originalResource.title, then:relatedFile.originalResource.title, else:relatedFile.originalResource.name)}
                                            </a>
                                        </span>
                                        <span class="news-related-files-size">
                                            {relatedFile.originalResource.size -> f:format.bytes()}
                                        </span>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %} #}

                    {% if newsItem.relatedLinks %}
                        <!-- Related links -->
                        <div class="news-related news-related-links">
                            <h4>
                                Related links
                            </h4>
                            <ul>
                                {% for relatedLink in newsItem.relatedLinks %}
                                    <li>
                                        <a href="{{ relatedLink.uri }}"
                                            title="{{ relatedLink.title }}"
                                            target="{{ relatedLink.title }}">
                                            {% if relatedLink.title %}
                                                {{ relatedLink.title }}
                                            {% else %}
                                                {{ relatedLink.description }}
                                            {% endif %}
                                        </a>
                                        {% if relatedLink.description %}
                                            <span>
                                                {{ relatedLink.description }}
                                            </span>
                                        {% endif %}
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}