Adding missing image thumbnail. Fixes #553

ui/assets/css/main.css

@@ -188,7 +188,7 @@ hr {
   border: unset;
 }
 
-.link-overlay {
+.img-expand-overlay {
   position: absolute;
   top: 0;
   right: 0;
@@ -197,3 +197,24 @@ hr {
   border-bottom-left-radius: 0.25rem !important;
   border-top-right-radius: 0.25rem !important;
 }
+
+.link-overlay:hover {
+  transition: .1s;
+  opacity: 1;
+}
+
+.link-overlay {
+  transition: opacity .1s ease-in-out;
+  position: absolute;
+  opacity: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  background: rgba(0,0,0,.6);
+}
+  
+.placeholder {
+  height: 50px;
+  width: 50px;
+}

ui/src/components/post-listing.tsx

@@ -163,28 +163,35 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         </div>
         {this.hasImage() && !this.state.imageExpanded && (
           <div class="mx-2 mt-1 float-left position-relative">
-            <span
-              title={i18n.t('expand_here')}
-              class="pointer"
-              onClick={linkEvent(this, this.handleImageExpandClick)}
-            >
-              <img
-                className={`img-fluid thumbnail rounded ${(post.nsfw ||
-                  post.community_nsfw) &&
-                  'img-blur'}`}
-                src={imageThumbnailer(this.getImage())}
-              />
-            </span>
             <a
               className="text-body"
               href={this.state.url}
               target="_blank"
               title={this.state.url}
             >
-              <svg class="icon link-overlay">
+              <object
+                className={`img-fluid thumbnail rounded ${(post.nsfw ||
+                  post.community_nsfw) &&
+                  'img-blur'}`}
+                data={imageThumbnailer(this.getImage())}
+              >
+                <svg class="icon rounded placeholder">
+                  <use xlinkHref="#icon-external-link"></use>
+                </svg>
+              </object>
+              <svg class="icon rounded link-overlay hover-link">
                 <use xlinkHref="#icon-external-link"></use>
               </svg>
             </a>
+            <span
+              title={i18n.t('expand_here')}
+              class="pointer"
+              onClick={linkEvent(this, this.handleImageExpandClick)}
+            >
+              <svg class="icon img-expand-overlay">
+                <use xlinkHref="#icon-image"></use>
+              </svg>
+            </span>
           </div>
         )}
         {this.state.url && isVideo(this.state.url) && (
@@ -263,10 +270,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         class="pointer"
                         onClick={linkEvent(this, this.handleImageExpandClick)}
                       >
-                        <img
+                        <object
                           class="img-fluid img-expanded"
-                          src={this.getImage()}
-                        />
+                          data={this.getImage()}
+                        >
+                          <svg class="icon rounded placeholder">
+                            <use xlinkHref="#icon-external-link"></use>
+                          </svg>
+                        </object>
                       </span>
                     </div>
                   </span>

ui/src/components/symbols.tsx

@@ -15,6 +15,12 @@ export class Symbols extends Component<any, any> {
         xmlnsXlink="http://www.w3.org/1999/xlink"
       >
         <defs>
+          <symbol id="icon-image" viewBox="0 0 32 32">
+            <title>image</title>
+            <path d="M29.996 4c0.001 0.001 0.003 0.002 0.004 0.004v23.993c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z"></path>
+            <path d="M26 9c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
+            <path d="M28 26h-24v-4l7-12 8 10h2l7-6z"></path>
+          </symbol>
           <symbol id="icon-external-link" viewBox="0 0 24 24">
             <title>external-link</title>
             <path d="M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>