michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-24 03:43:42 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

masonry - thumbnail width and height to reduce page layout shifts from lazy images

Browse source
This commit is contained in:
rimu 2024-01-21 21:13:44 +13:00
parent 14d0344702
commit cce809cd26
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/templates/post/_post_teaser_masonry.html
View file

@ -13,18 +13,18 @@
<div class="masonry_thumb" title="{{ post.title }}"> <div class="masonry_thumb" title="{{ post.title }}">
{% if post.type == POST_TYPE_LINK %} {% if post.type == POST_TYPE_LINK %}
{% if post.image.thumbnail_url() %} {% if post.image.thumbnail_url() %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><img src="{{ post.image.thumbnail_url() }}" <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('View image') }}"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" /></a> alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" width="{{ post.image.thumbnail_width }}" height="{{ post.image.thumbnail_height }}" /></a>
{% elif post.image.source_url %} {% elif post.image.source_url %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><img src="{{ post.image.source_url }}" <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('View image') }}"><img src="{{ post.image.source_url }}"
alt="{{ post.title }}" loading="lazy" /></a> alt="{{ post.title }}" loading="lazy" /></a>
{% else %} {% else %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><img src="{{ post.url }}" <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('View image') }}"><img src="{{ post.url }}"
alt="{{ post.title }}" loading="{{ 'lazy' if low_bandwidth else 'eager' }}" /></a> alt="{{ post.title }}" loading="{{ 'lazy' if low_bandwidth else 'eager' }}" /></a>
{% endif %} {% endif %}
{% elif post.type == POST_TYPE_IMAGE %} {% elif post.type == POST_TYPE_IMAGE %}
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" target="_blank"><img src="{{ post.image.thumbnail_url() }}" <a href="{{ post.image.view_url() }}" rel="nofollow ugc" target="_blank"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" /></a> alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" width="{{ post.image.thumbnail_width }}" height="{{ post.image.thumbnail_height }}" /></a>
{% else %} {% else %}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}"><img src="{{ post.image.thumbnail_url() }}" <a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" /></a> alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" /></a>