masonry tweaks - only 3 columns and higher res thumbnails

app/activitypub/util.py

@@ -1068,7 +1068,10 @@ def create_post(activity_log: ActivityPubLog, community: Community, request_json
         db.session.commit()
 
         if post.image_id:
-            make_image_sizes(post.image_id, 266, None, 'posts')
+            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)
 

app/models.py

@@ -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:

app/static/structure.css

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

app/static/structure.scss

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

app/templates/post/_post_teaser_masonry.html

@@ -12,8 +12,8 @@
             {% endif %}
             <div class="masonry_thumb" title="{{ post.title }}">
                 {% if post.type == POST_TYPE_LINK %}
-                    {% if 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.thumbnail_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() }}"