pyfedi/app/templates/post/_post_full.html

<div class="row position-relative">
    {% if post.type == POST_TYPE_IMAGE %}
        <div class="col post_col post_type_image">
            <nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
              <ol class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                  <li class="breadcrumb-item">{% if breadcrumb.url %}<a href="{{ breadcrumb.url }}">{% endif %}{{ breadcrumb.text }}{% if breadcrumb.url %}</a>{% endif %}</li>
                {% endfor %}
                <li class="breadcrumb-item"><a href="/c/{{ post.community.link() }}" title="{{ post.community.ap_domain }}">{{ post.community.title }}@{{ post.community.ap_domain }}</a></li>
                <li class="breadcrumb-item active">{{ post.title|shorten(15) }}</li>
              </ol>
            </nav>
            <div class="voting_buttons" aria-live="assertive">
                {% include "post/_post_voting_buttons.html" %}
            </div>
            <h1 class="mt-2 post_title">{{ post.title }}
                {% if current_user.is_authenticated and post.user_id == current_user.id %}
                    {% include 'post/_post_notification_toggle.html' %}
                {% endif %}
                {% if post.nsfw %}<span class="warning_badge nsfw" title="{{ _('Not safe for work') }}">nsfw</span>{% endif %}
                {% if post.nsfl %}<span class="warning_badge nsfl" title="{{ _('Potentially emotionally scarring content') }}">nsfl</span>{% endif %}
            </h1>
            {% if post.cross_posts %}
                <a href="{{ url_for('post.post_cross_posts', post_id=post.id) }}" aria-label="{{ _('Show cross-posts') }}"><span class="fe fe-layers"></span></a>
                <span aria-label="{{ _('Number of cross-posts:') }}">{{ len(post.cross_posts) }}</span>
            {% endif %}
            {% if post.url %}
                <p><a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="Go to image">{{ post.url|shorten_url }}
                    <span class="fe fe-external"></span></a></p>
            {% endif %}
            <p>{% if post.reports and current_user.is_authenticated and post.community.is_moderator(current_user) %}
                    <span class="red fe fe-report" title="{{ _('Reported. Check post for issues.') }}"></span>
                {% endif %}<small>submitted {{ moment(post.posted_at).fromNow() }} by {{ render_username(post.author) }}
                {% if post.edited_at %} edited {{ moment(post.edited_at).fromNow() }}{% endif %}
            </small></p>
            <div class="post_image">
                {% if post.image_id %}
                    {% if low_bandwidth %}
                        <a href="{{ post.image.view_url() }}" rel="nofollow ugc"><img src="{{ post.image.medium_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else post.title }}"
                             width="{{ post.image.width }}" height="{{ post.image.height }}" /></a>
                    {% else %}
                        <a href="{{ post.image.view_url() }}" rel="nofollow ugc"><img src="{{ post.image.view_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else post.title }}"></a>
                    {% endif %}
                {% else %}
                    <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="Go to image"><img src="{{ post.url }}" style="max-width: 100%; height: auto;"  /></a>
                {% endif %}
            </div>
            <div class="post_body mt-2">
                {{ post.body_html|community_links|safe if post.body_html else '' }}
            </div>
        </div>
    {% else %}
        <div class="col post_col post_type_normal">
            <nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
              <ol class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                  <li class="breadcrumb-item">{% if breadcrumb.url %}<a href="{{ breadcrumb.url }}">{% endif %}{{ breadcrumb.text }}{% if breadcrumb.url %}</a>{% endif %}</li>
                {% endfor %}
                <li class="breadcrumb-item"><a href="/c/{{ post.community.link() }}">{{ post.community.title }}@{{ post.community.ap_domain }}</a></li>
                <li class="breadcrumb-item active">{{ post.title|shorten(15) }}</li>
              </ol>
            </nav>
            <div class="voting_buttons" aria-live="assertive">
                {% include "post/_post_voting_buttons.html" %}
            </div>
            <h1 class="mt-2 post_title">{{ post.title }}
                {% if current_user.is_authenticated and post.user_id == current_user.id %}
                    {% include 'post/_post_notification_toggle.html' %}
                {% endif %}
                {% if post.nsfw %}<span class="warning_badge nsfw" title="{{ _('Not safe for work') }}">nsfw</span>{% endif %}
                {% if post.nsfl %}<span class="warning_badge nsfl" title="{{ _('Potentially emotionally scarring content') }}">nsfl</span>{% endif %}
            </h1>
            {% if post.cross_posts %}
                <a href="{{ url_for('post.post_cross_posts', post_id=post.id) }}" aria-label="{{ _('Show cross-posts') }}"><span class="fe fe-layers"></span></a>
                <span aria-label="{{ _('Number of cross-posts:') }}">{{ len(post.cross_posts) }}</span>
            {% endif %}
            {% if post.type == POST_TYPE_LINK and post.image_id and not (post.url and 'youtube.com' in post.url) %}
                <div class="url_thumbnail">
                    <a href="{{ post.url }}" target="_blank" rel="nofollow ugc" class="post_link"><img src="{{ post.image.thumbnail_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else '' }}"
                            width="{{ post.image.thumbnail_width }}" height="{{ post.image.thumbnail_height }}" loading="lazy" /></a>
                </div>
            {% endif %}
            <p>{% if post.reports and current_user.is_authenticated and post.community.is_moderator(current_user) %}
                    <span class="red fe fe-report" title="{{ _('Reported. Check post for issues.') }}"></span>
                {% endif %}<small>submitted {{ moment(post.posted_at).fromNow() }} by
                {{ render_username(post.author) }}
                {% if post.edited_at %} edited {{ moment(post.edited_at).fromNow() }}{% endif %}</small>
            </p>
            {% if post.type == POST_TYPE_LINK %}
                <p><a href="{{ post.url }}" rel="nofollow ugc" target="_blank" class="post_link" aria-label="Go to post url">{{ post.url|shorten_url }}
                <span class="fe fe-external"></span></a></p>
                {% if post.url.endswith('.mp3') %}
                    <p><audio controls preload="{{ 'none' if low_bandwidth else 'metadata' }}" src="{{ post.url }}"></audio></p>
                {% endif %}
                {% if 'youtube.com' in post.url %}
                    <div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="https://www.youtube.com/embed/{{ post.youtube_embed() }}?rel=0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  width="100%" height="100%" frameborder="0"></iframe></div>
                {% endif %}
            {% elif post.type == POST_TYPE_IMAGE %}
                <div class="post_image">
                    <a href="{{ post.image.view_url() }}" target="_blank" class="post_link" rel="nofollow ugc"><img src="{{ post.image.view_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else post.title }}"
                            width="{{ post.image.width }}" height="{{ post.image.height }}" loading="lazy" /></a>
                </div>
            {% else %}
                {% if post.image_id and not (post.url and 'youtube.com' in post.url) %}
                        <a href="{{ post.image.view_url() }}" target="_blank" class="post_link" aria-label="Go to video" rel="nofollow ugc"><img src="{{ post.image.thumbnail_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else post.title }}"
                            width="{{ post.image.thumbnail_width }}" height="{{ post.image.thumbnail_height }}" loading="lazy" /></a>
                {% endif %}
            {% endif %}
            <div class="post_body">
                {{ post.body_html|community_links|safe if post.body_html else '' }}
            </div>
        </div>
    {% endif %}
    <div class="post_utilities_bar">
        <a href="{{ url_for('post.post_options', post_id=post.id) }}" class="post_options_link" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a>
    </div>
</div>