larger images and videos

app/static/styles.css

@@ -867,6 +867,55 @@ div.navbar {
   padding-bottom: 32px;
 }
 
+.post_teaser_article_preview {
+  position: relative;
+  max-height: 100px;
+  overflow: hidden;
+  padding-left: 3px;
+  padding-right: 3px;
+}
+.post_teaser_article_preview p {
+  margin: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  /* Limits the text to a specific number of lines */
+  line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
+.post_teaser_image_preview {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.post_teaser_image_preview img {
+  max-width: 100%;
+  padding-right: 4px;
+}
+
+.post_teaser_video_preview {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  position: relative;
+}
+.post_teaser_video_preview img {
+  max-width: 100%;
+  padding-right: 4px;
+}
+.post_teaser_video_preview .fe-video {
+  position: absolute;
+  left: 43%;
+  top: 40%;
+  width: 13%;
+  font-size: 64px;
+  background-color: white;
+  opacity: 0.5;
+}
+
 .post_utilities_bar_wrapper {
   position: absolute;
   bottom: -7px;

app/static/styles.scss

@@ -459,6 +459,55 @@ div.navbar {
   padding-bottom: 32px;
 }
 
+.post_teaser_article_preview {
+  position: relative;
+  max-height: 100px;
+  overflow: hidden;
+  padding-left: 3px;
+  padding-right: 3px;
+
+  p {
+    margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1; /* Limits the text to a specific number of lines */
+    line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+}
+
+.post_teaser_image_preview {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  img {
+    max-width: 100%;
+    padding-right: 4px;
+  }
+}
+
+.post_teaser_video_preview {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  position: relative;
+  img {
+    max-width: 100%;
+    padding-right: 4px;
+  }
+  .fe-video {
+    position: absolute;
+    left: 43%;
+    top: 40%;
+    width: 13%;
+    font-size: 64px;
+    background-color: white;
+    opacity: 0.5;
+  }
+}
+
 .post_utilities_bar_wrapper {
   position: absolute;
   bottom: -7px;

app/templates/post/post_teaser/_article.html

@@ -9,6 +9,11 @@
     </h3>
     <span class="author small">{% if show_post_community -%}<a href="/c/{{ post.community.link() }}" aria-label="{{ _('Go to community %(name)s', name=post.community.name) }}">c/{{ post.community.name }}</a>{% endif -%}
                     by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ arrow.get(post.last_active if sort == 'active' else post.posted_at).humanize(locale=locale) }}</time></span>
+    {% if post.body_html -%}
+        <div class="post_teaser_article_preview">
+            {{ first_paragraph(post.body_html) | safe }}
+        </div>
+    {% endif -%}
     {% include "post/post_teaser/_utilities_bar.html" %}
 </div>
 {% if post.image_id -%}

app/templates/post/post_teaser/_image.html

@@ -12,19 +12,11 @@
     </h3>
     <span class="author small">{% if show_post_community -%}<a href="/c/{{ post.community.link() }}" aria-label="{{ _('Go to community %(name)s', name=post.community.name) }}">c/{{ post.community.name }}</a>{% endif -%}
                     by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ arrow.get(post.last_active if sort == 'active' else post.posted_at).humanize(locale=locale) }}</time></span>
+    {% if post.image_id and not low_bandwidth -%}
+        <div class="post_teaser_image_preview">
+            <a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><img src="{{ post.image.medium_url() }}"
+                    alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
+        </div>
+    {% endif -%}
     {% include "post/post_teaser/_utilities_bar.html" %}
 </div>
-<div class="col col-2 col_thumbnail">
-    {% if post.image_id -%}
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-            {% if low_bandwidth -%}
-                <a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><span class="fe fe-magnify"></span></a>
-            {% else -%}
-                {% if post.image_id -%}
-                    <a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><span class="fe fe-magnify"></span><img src="{{ post.image.thumbnail_url() }}"
-                    alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
-                {% endif -%}
-            {% endif -%}
-        </div>
-    {% endif -%}
-</div>

app/templates/post/post_teaser/_link.html

@@ -17,8 +17,8 @@
                     by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ arrow.get(post.last_active if sort == 'active' else post.posted_at).humanize(locale=locale) }}</time></span>
     {% include "post/post_teaser/_utilities_bar.html" %}
 </div>
-<div class="col col-2 col_thumbnail">
 {% if post.image_id -%}
+<div class="col col-2 col_thumbnail">
         <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
             {% if low_bandwidth -%}
                 <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Follow link') }}"><span class="fe fe-external"></span></a>
@@ -27,9 +27,5 @@
                          alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
             {% endif -%}
         </div>
-    {% else -%}
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-            <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}"><span class="fe fe-link"></span></a>
 </div>
 {% endif -%}
-</div>

app/templates/post/post_teaser/_video.html

@@ -17,21 +17,11 @@
     </h3>
     <span class="author small">{% if show_post_community -%}<a href="/c/{{ post.community.link() }}" aria-label="{{ _('Go to community %(name)s', name=post.community.name) }}">c/{{ post.community.name }}</a>{% endif -%}
                     by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ arrow.get(post.last_active if sort == 'active' else post.posted_at).humanize(locale=locale) }}</time></span>
+    {% if post.image_id and not low_bandwidth -%}
+        <div class="post_teaser_video_preview{{ ' lbw' if low_bandwidth }}">
+            <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, autoplay='true') }}" rel="nofollow ugc" aria-label="{{ _('Read article') }}"><span class="fe fe-video"></span>
+                <img src="{{ post.image.medium_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
+        </div>
+    {% endif -%}
     {% include "post/post_teaser/_utilities_bar.html" %}
 </div>
-<div class="col col-2 col_thumbnail">
-    {% if post.image_id -%}
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-            {% if low_bandwidth -%}
-                <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Follow link') }}"><span class="fe fe-external"></span></a>
-            {% else -%}
-                <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, autoplay='true') }}" rel="nofollow ugc" aria-label="{{ _('Read article') }}"><span class="fe fe-video"></span><img src="{{ post.image.thumbnail_url() }}"
-                         alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
-            {% endif -%}
-        </div>
-    {% else -%}
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-
-        </div>
-    {% endif -%}
-</div>

app/utils.py

@@ -381,6 +381,14 @@ def microblog_content_to_title(html: str) -> str:
     return title.strip()
 
 
+def first_paragraph(html):
+    soup = BeautifulSoup(html, 'html.parser')
+    first_paragraph = soup.find('p')
+    if first_paragraph:
+        return f'<p>{first_paragraph.text}</p>'
+    else:
+        return ''
+
 def community_link_to_href(link: str) -> str:
     pattern = r"!([a-zA-Z0-9_.-]*)@([a-zA-Z0-9_.-]*)\b"
     server = r'<a href=https://' + current_app.config['SERVER_NAME'] + r'/community/lookup/'

pyfedi.py

@@ -13,7 +13,7 @@ from app.constants import POST_TYPE_LINK, POST_TYPE_IMAGE, POST_TYPE_ARTICLE, PO
 from app.models import Site
 from app.utils import getmtime, gibberish, shorten_string, shorten_url, digits, user_access, community_membership, \
     can_create_post, can_upvote, can_downvote, shorten_number, ap_datetime, current_theme, community_link_to_href, \
-    in_sorted_list, role_access
+    in_sorted_list, role_access, first_paragraph
 
 app = create_app()
 cli.register(app)
@@ -52,6 +52,7 @@ with app.app_context():
     app.jinja_env.globals['in_sorted_list'] = in_sorted_list
     app.jinja_env.globals['theme'] = current_theme
     app.jinja_env.globals['file_exists'] = os.path.exists
+    app.jinja_env.globals['first_paragraph'] = first_paragraph
     app.jinja_env.filters['community_links'] = community_link_to_href
     app.jinja_env.filters['shorten'] = shorten_string
     app.jinja_env.filters['shorten_url'] = shorten_url