Click on an image to zoom larger

webapp/titanembeds/static/css/embedstyle.css

@@ -761,6 +761,10 @@ p.mentioned span.chatmessage {
   width: 100%;
 }
 
+.richembed .image img.materialboxed.active {
+  max-width: none;
+}
+
 #chatcontent img.attachment {
   width: 100%;
   max-width: 300px;
@@ -769,6 +773,11 @@ p.mentioned span.chatmessage {
   display: block;
 }
 
+#chatcontent img.attachment.materialboxed.active {
+  max-width: none;
+  max-height: none;
+}
+
 #emoji-picker {
   color: black;
   position: fixed;

webapp/titanembeds/static/js/embed.js

@@ -905,7 +905,7 @@
                 attach = " ";
             }
             if (message.attachments[i].url.endsWith(".png") || message.attachments[i].url.endsWith(".jpg") || message.attachments[i].url.endsWith(".jpeg") || message.attachments[i].url.endsWith(".gif")) {
-                attach += "<img class=\"attachment\" src=\"" + message.attachments[i].url + "\">";
+                attach += "<img class=\"attachment materialboxed\" src=\"" + message.attachments[i].url + "\">";
             } else {
                 attach += message.attachments[i].url;
             }
@@ -1159,6 +1159,7 @@
             target: "_blank"
         });
         $('.tooltipped').tooltip();
+        $('.materialboxed').materialbox();
         process_message_users_cache();
         return last;
     }

webapp/titanembeds/templates/embed.html.j2

@@ -380,7 +380,7 @@
           </div>
           {{#image}}
           <div class="image">
-            <img src="{{image.proxy_url}}">
+            <img src="{{image.proxy_url}}" class="materialboxed">
           </div>
           {{/image}}
           {{#toRenderFooter}}