mirror of
https://codeberg.org/rimu/pyfedi
synced 2025-01-23 19:36:56 -08:00
smaller images on mobile, using srcset
This commit is contained in:
rimu
parent
3b6ea486ce
commit
f4931b474c
1 changed files with 95 additions and 89 deletions
|
|
@ -1,207 +1,213 @@
|
|||
<div class="row position-relative">
|
||||
{% if post.type == POST_TYPE_IMAGE %}
|
||||
{% 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 %}
|
||||
{% 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" %}
|
||||
{% include "post/_post_voting_buttons.html" -%}
|
||||
</div>
|
||||
<h1 class="mt-2 post_title">{{ post.title }}
|
||||
{% if current_user.is_authenticated %}
|
||||
{% 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 %}
|
||||
{% if current_user.is_authenticated -%}
|
||||
{% 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.url %}
|
||||
{% 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 > 0 and current_user.is_authenticated and post.community.is_moderator(current_user) %}
|
||||
{% 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 {{ moment(post.posted_at).fromNow() }} by {{ render_username(post.author) }}
|
||||
{% if post.edited_at %} edited {{ moment(post.edited_at).fromNow() }}{% endif %}
|
||||
{% 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(resize=True) }}" rel="nofollow ugc"><img src="{{ post.image.medium_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else post.title }}"
|
||||
{% 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) }}" alt="{{ post.image.alt_text if post.image.alt_text else post.title }}"></a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% 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 %}
|
||||
{% endif -%}
|
||||
</div>
|
||||
<div class="post_body mt-2">
|
||||
{{ post.body_html|community_links|safe if post.body_html else '' }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% 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 %}
|
||||
{% 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" %}
|
||||
{% include "post/_post_voting_buttons.html" -%}
|
||||
</div>
|
||||
<h1 class="mt-2 post_title">{{ post.title }}
|
||||
{% if current_user.is_authenticated %}
|
||||
{% 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 %}
|
||||
{% if current_user.is_authenticated -%}
|
||||
{% 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.type == POST_TYPE_LINK and post.image_id and not (post.url and 'youtube.com' in post.url) %}
|
||||
{% 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 > 0 and current_user.is_authenticated and post.community.is_moderator(current_user) %}
|
||||
{% 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 {{ moment(post.posted_at).fromNow() }} by
|
||||
{% 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>
|
||||
{% if post.edited_at -%} edited {{ moment(post.edited_at).fromNow() }}{% endif -%}</small>
|
||||
</p>
|
||||
{% if post.type == POST_TYPE_LINK %}
|
||||
{% 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') %}
|
||||
{% 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') %}
|
||||
{% 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') %}
|
||||
{% if post.url.endswith('.mp4') -%}
|
||||
<source src="{{ post.url }}" type="video/mp4" />
|
||||
{% elif post.url.endswith('.webm') %}
|
||||
{% elif post.url.endswith('.webm') -%}
|
||||
<source src="{{ post.url }}" type="video/webm" />
|
||||
{% endif %}
|
||||
{% endif -%}
|
||||
</video></p>
|
||||
{% elif post.url.startswith('https://streamable.com') %}
|
||||
{% 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/') %}
|
||||
{% 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 %}
|
||||
{% 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() }}?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_VIDEO %}
|
||||
{% 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') %}
|
||||
{% 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') %}
|
||||
{% if post.url.endswith('.mp4') -%}
|
||||
<source src="{{ post.url }}" type="video/mp4" />
|
||||
{% elif post.url.endswith('.webm') %}
|
||||
{% elif post.url.endswith('.webm') -%}
|
||||
<source src="{{ post.url }}" type="video/webm" />
|
||||
{% endif %}
|
||||
{% endif -%}
|
||||
</video></p>
|
||||
{% elif post.url.startswith('https://streamable.com') %}
|
||||
{% 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/') %}
|
||||
{% 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 %}
|
||||
{% 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() }}?rel=0" 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 %}
|
||||
{% 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 %}
|
||||
{% 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) %}
|
||||
{% 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 %}
|
||||
{% endif -%}
|
||||
{% endif -%}
|
||||
<div class="post_body">
|
||||
{{ post.body_html|community_links|safe if post.body_html else '' }}
|
||||
</div>
|
||||
{% if post.type == POST_TYPE_POLL %}
|
||||
{% if post.type == POST_TYPE_POLL -%}
|
||||
<div class="post_poll">
|
||||
{% if poll_results and poll_total_votes == 0 %}
|
||||
{% 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 %}
|
||||
{% elif poll_results and poll_total_votes -%}
|
||||
<ul>
|
||||
{% for choice in poll_choices %}
|
||||
{% 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 %}
|
||||
{% endfor -%}
|
||||
</ul>
|
||||
<p>{{ _('Total votes: %(total_votes)d.', total_votes=poll_total_votes) }}</p>
|
||||
<p>{{ _('Poll closes') }} {{ moment(poll_data.end_poll).fromNow(refresh=True) }}.</p>
|
||||
{% elif poll_form %}
|
||||
{% if current_user.is_authenticated %}
|
||||
{% elif poll_form -%}
|
||||
{% if current_user.is_authenticated -%}
|
||||
<form action='/poll/{{ post.id }}/vote' method="post">
|
||||
{% else %}
|
||||
{% else -%}
|
||||
<form action='/auth/login' method="get">
|
||||
<input type="hidden" name="next" value="/post/{{ post.id }}">
|
||||
{% endif %}
|
||||
{% endif -%}
|
||||
<ul>
|
||||
{% for choice in poll_choices %}
|
||||
{% if poll_data.mode == 'single' %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
{% endif -%}
|
||||
{% endfor -%}
|
||||
</ul>
|
||||
<input type="submit" class="btn btn-primary" value="Vote">
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endif -%}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif -%}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif -%}
|
||||
|
||||
<div class="post_utilities_bar">
|
||||
{% if post.tags.count() > 0 %}
|
||||
{% if post.tags.count() > 0 -%}
|
||||
<nav role="navigation">
|
||||
<h3 class="visually-hidden">{{ _('Hashtags') }}</h3>
|
||||
<ul class="post_tags">
|
||||
{% for tag in 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 %}
|
||||
{% endfor -%}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% if post.cross_posts %}
|
||||
{% endif -%}
|
||||
{% 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 %}
|
||||
{% endif -%}
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue