Adding image thumbnails.

2 files changed, 9 insertions, 1 deletions

diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index babb8605..e0ddd310 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 61acb014..5af8a0f5 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;
+}