michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-23 19:36:56 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

masonry tweaks - only 3 columns and higher res thumbnails

Browse source
This commit is contained in:
rimu 2024-01-25 21:18:44 +13:00
parent 41f6a29e33
commit 31f384377a
5 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/activitypub/util.py
View file

@ -1068,6 +1068,9 @@ def create_post(activity_log: ActivityPubLog, community: Community, request_json
db.session.commit()
if post.image_id:
if post.type == POST_TYPE_IMAGE:
make_image_sizes(post.image_id, 266, 512, 'posts') # the 512 sized image is for masonry view
else:
make_image_sizes(post.image_id, 266, None, 'posts')
notify_about_post(post)

6
app/models.py
View file

@ -97,6 +97,12 @@ class File(db.Model):
else:
return ''
def medium_url(self):
if self.file_path is None:
return self.thumbnail_url()
file_path = self.file_path[4:] if self.file_path.startswith('app/') else self.file_path
return f"https://{current_app.config['SERVER_NAME']}/{file_path}"
def thumbnail_url(self):
if self.thumbnail_path is None:
if self.source_url:

6
app/static/structure.css
View file

@ -626,9 +626,9 @@ fieldset legend {
}
@media (min-width: 992px) {
.post_list_masonry, .post_list_masonry_wide {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;

6
app/static/structure.scss
View file

@ -250,9 +250,9 @@ nav, etc which are used site-wide */
clear: both;
@include breakpoint(tablet) {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;

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

@ -12,8 +12,8 @@
{% endif %}
<div class="masonry_thumb" title="{{ post.title }}">
{% if post.type == POST_TYPE_LINK %}
{% if post.image.thumbnail_url() %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('View image') }}"><img src="{{ post.image.thumbnail_url() }}"
{% if post.image.medium_url() %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('View image') }}"><img src="{{ post.image.medium_url() }}"
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 %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('View image') }}"><img src="{{ post.image.source_url }}"
@ -23,7 +23,7 @@
alt="{{ post.title }}" loading="{{ 'lazy' if low_bandwidth else 'eager' }}" /></a>
{% endif %}
{% 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.medium_url() }}"
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 %}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}"><img src="{{ post.image.thumbnail_url() }}"