Adding image thumbnails.

diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index babb8605d9914c90c09fec3a55b4b158d64f6901..e0ddd31053891bcc331968c290f54a3678f30788 100644 (file)
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -66,6 +66,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
           </div>
         </div>
+        {post.url && isImage(post.url) &&
+          <a href={post.url} target="_blank"><img class="mx-2 float-left img-fluid thumbnail rounded" src={post.url} /></a>
+        }
         <div className="ml-4">
           {post.url 
             ? <div className="mb-0">
@@ -86,7 +89,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 <span>
                   <span class="pointer ml-2 badge badge-light text-muted small" onClick={linkEvent(this, this.handleImageExpandClick)}>-</span>
                   <div>
-                    <img class="img-fluid" src={post.url} />
+                    <a href={post.url} target="_blank"><img class="img-fluid" src={post.url} /></a>
                   </div>
                 </span>
               }

diff --git a/ui/src/css/main.css b/ui/src/css/main.css
index 61acb014c10fb1ccdccc34d9503099b4dd7c58e5..5af8a0f5591dcafc3fc51f04231003030894a3a1 100644 (file)
--- a/ui/src/css/main.css
+++ b/ui/src/css/main.css
@@ -95,3 +95,8 @@ blockquote {
 .new-comments:hover {
   overflow-y: auto;
 }
+
+.thumbnail {
+  max-height: 50px;
+  max-width: 50px;
+}