From b70fa604187e16015c7c6f71f8b48d4f21594f0c Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Wed, 24 Apr 2019 10:26:15 -0700
Subject: [PATCH] Adding image thumbnails.

---
 ui/src/components/post-listing.tsx | 5 ++++-
 ui/src/css/main.css                | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index babb8605d..e0ddd3105 100644
--- 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 61acb014c..5af8a0f55 100644
--- 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;
+}