pyfedi/app/templates/post/_post_full.html

<div class="row position-relative post_full">
        <div class="col post_col {% if post.type == POST_TYPE_IMAGE %}post_col post_type_image{% else %}post_type_normal{% endif %}">
            {% include "post/_breadcrumb_nav.html" %}
            <h1 class="mt-2 post_title" {% if post.language_id and post.language.code != 'en' %}lang="{{ post.language.code }}"{% endif %}>{{ post.title }}
                {% 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.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>
            {% elif post.type == POST_TYPE_IMAGE and 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 > 0 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 {{ arrow.get(post.posted_at).humanize(locale=locale) }} by
                {{ render_username(post.author) }}
                {% if post.edited_at -%} edited {{ arrow.get(post.edited_at).humanize(locale=locale) }}{% endif -%}</small>
            </p>
            {% if post.type == POST_TYPE_IMAGE -%}
                <div class="post_image">
                    {% if post.image_id -%}
                        {% if low_bandwidth -%}
                            <a href="{{ post.image.view_url(resize=True) }}" rel="nofollow ugc"><img src="{{ post.image.medium_url() }}"
                                 alt="{{ post.image.alt_text if post.image.alt_text else post.title }}" fetchpriority="high" referrerpolicy="same-origin"
                                 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(resize=True) }}" lowsrc="{{ post.image.medium_url() }}"
                                     sizes="(max-width: 512px) 100vw, 854px" srcset="{{ post.image.medium_url() }} 512w, {{ post.image.view_url(resize=True) }} 1024w"
                                     alt="{{ post.image.alt_text if post.image.alt_text else post.title }}"
                                     fetchpriority="high" referrerpolicy="same-origin" >
                            </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>
            {% elif 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>
                    {% if post.domain.post_warning -%}
                        <span class="fe fe-warning red" title="{{ post.domain.post_warning }}"></span>
                    {% endif -%}</p>
                {% if post.url.endswith('.mp3') -%}
                    <p><audio controls preload="{{ 'none' if low_bandwidth else 'metadata' }}" src="{{ post.url }}"></audio></p>
                {% elif post.url.endswith('.mp4') or post.url.endswith('.webm') -%}
                    <p>
                        <video class="responsive-video" controls preload="{{ 'metadata' if low_bandwidth else 'auto' }}" {{ 'loop' if post.community.loop_videos() }}>
                        {% if post.url.endswith('.mp4') -%}
                            <source src="{{ post.url }}" type="video/mp4" />
                        {% elif post.url.endswith('.webm') -%}
                            <source src="{{ post.url }}" type="video/webm" />
                        {% endif -%}
                        </video></p>
                {% elif post.url.startswith('https://streamable.com') -%}
                    <div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="{{ post.url.replace('streamable.com/', 'streamable.com/e/') }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  width="100%" height="100%" frameborder="0"></iframe></div>
                {% elif post.url.startswith('https://www.redgifs.com/watch/') -%}
                    <div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="{{ post.url.replace('redgifs.com/watch/', 'redgifs.com/ifr/') }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  width="100%" height="100%" frameborder="0"></iframe></div>
                {% endif -%}
                {% if 'youtube.com' in post.url -%}
                    <p><a href="https://piped.video/watch?v={{ post.youtube_embed() }}">{{ _('Watch on piped.video') }} <span class="fe fe-external"></span></a></p>
                    <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() }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  width="100%" height="100%" frameborder="0"></iframe></div>
                {% endif -%}
            {% elif post.type == POST_TYPE_VIDEO -%}
                <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('.mp4') or post.url.endswith('.webm') -%}
                    <p>
                        <video class="responsive-video" controls preload="{{ 'none' if low_bandwidth else 'auto' }}" {{ 'autoplay muted' if autoplay }} {{ 'loop' if post.community.loop_videos() }}>
                        {% if post.url.endswith('.mp4') -%}
                            <source src="{{ post.url }}" type="video/mp4" />
                        {% elif post.url.endswith('.webm') -%}
                            <source src="{{ post.url }}" type="video/webm" />
                        {% endif -%}
                        </video></p>
                {% elif post.url.startswith('https://streamable.com') -%}
                    <div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="{{ post.url.replace('streamable.com/', 'streamable.com/e/') }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  width="100%" height="100%" frameborder="0"></iframe></div>
                {% elif post.url.startswith('https://www.redgifs.com/watch/') -%}
                    <div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="{{ post.url.replace('redgifs.com/watch/', 'redgifs.com/ifr/') }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  width="100%" height="100%" frameborder="0"></iframe></div>
                {% endif -%}
                {% if 'youtube.com' in post.url -%}
                    <p><a href="https://piped.video/watch?v={{ post.youtube_embed() }}">{{ _('Watch on piped.video') }} <span class="fe fe-external"></span></a></p>
                    <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() }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  width="100%" height="100%" frameborder="0"></iframe></div>
                {% endif -%}
                {% if 'videos/watch' in post.url -%}
                    <div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="{{ post.peertube_embed() }}" 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"{% if post.language_id and post.language.code != 'en' %} lang="{{ post.language.code }}"{% endif %}>
                {{ post.body_html|community_links|safe if post.body_html else '' }}
                {% if archive_link -%}
                    <p><a href="{{ archive_link }}" rel="nofollow ucg noindex" target="_blank">{{ _('Archive.ph link') }} <span class="fe fe-external"></span></a></p>
                {% endif -%}
                {% if post.licence_id -%}
                    <p>Licence: {{ post.licence.name }}</p>
                {% endif -%}
            </div>
            {% if post.type == POST_TYPE_POLL -%}
                <div class="post_poll">
                    {% if poll_results and poll_total_votes == 0 -%}
                        <p>{{ _('The poll has finished, yet no votes were cast.') }}</p>
                    {% elif poll_results and poll_total_votes -%}
                        <ul>
                        {% for choice in poll_choices -%}
                            <li>
                                <div class="vote_bar">
                                    <p class="mb-0 mt-3">{{ choice.choice_text }}</p>
                                    <div class="vote_score" style="width: {{ choice.percentage(poll_total_votes) }}%">{{ choice.percentage(poll_total_votes) }}%</div>
                                </div>
                            </li>
                        {% endfor -%}
                        </ul>
                        <p>{{ _('Total votes: %(total_votes)d.', total_votes=poll_total_votes) }}</p>
                        <p>{{ _('Poll closes') }} {{ arrow.get(poll_data.end_poll).humanize(locale=locale) }}.</p>
                    {% elif poll_form -%}
                        {% if current_user.is_authenticated -%}
                            <form action='/poll/{{ post.id }}/vote' method="post">
                        {% else -%}
                            <form action='/auth/login' method="get">
                                <input type="hidden" name="next" value="/post/{{ post.id }}">
                        {% endif -%}
                            <ul>
                            {% for choice in poll_choices -%}
                                {% if poll_data.mode == 'single' -%}
                                    <li><label for="choice_{{ choice.id }}">
                                        <input type="radio" name="poll_choice" id="choice_{{ choice.id }}" required value="{{ choice.id }}"> {{ choice.choice_text }}
                                    </label></li>
                                {% else -%}
                                    <li><label for="choice_{{ choice.id }}">
                                        <input type="checkbox" name="poll_choice[]" id="choice_{{ choice.id }}" value="{{ choice.id }}"> {{ choice.choice_text }}
                                    </label></li>
                                {% endif -%}
                            {% endfor -%}
                            </ul>
                            <input type="submit" class="btn btn-primary" value="Vote">
                        </form>
                    {% endif -%}
                </div>
            {% endif -%}
        </div>

    {% if post.tags.count() > 0 -%}
        <nav role="navigation">
            <h3 class="visually-hidden">{{ _('Hashtags') }}</h3>
            <ul class="post_tags">
                {% for tag in post.tags -%}
                    <li class="post_tag small"><a href="{{ url_for('tag.show_tag', tag=tag.name) }}">#{{ tag.display_as }}</a></li>
                {% endfor -%}
            </ul>
        </nav>
    {% endif -%}

    <div class="post_utilities_bar">
        <div class="voting_buttons_new" aria-live="assertive">
            {% include "post/_post_voting_buttons.html" -%}
        </div>
        {% if post.cross_posts -%}
        <div class="cross_post_button">
            <a href="{{ url_for('post.post_cross_posts', post_id=post.id) }}" aria-label="{{ _('Show cross-posts') }}"
               title="{{ _('Show cross-posts') }}"><span class="fe fe-layers"></span>
            <span aria-label="{{ _('Number of cross-posts:') }}">{{ len(post.cross_posts) }}</span></a>
        </div>
        {% endif -%}
        <div class="notify_toggle">
            {% if current_user.is_authenticated and current_user.verified -%}
                {% include 'post/_post_notification_toggle.html' -%}
            {% endif -%}
        </div>
        <div class="post_options_link">
            <a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a>
        </div>
    </div>
</div>