From 941217d9fb223e9c5d22d57b2214d48982594823 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 10 Jan 2022 18:12:11 +0000 Subject: [PATCH] Improved loading for images with failed thumbnails - A placeholder is now shown in the gallery. - The page editors will use the original image url if the display thumbnail is missing. For #3142 --- public/loading_error.png | Bin 0 -> 2096 bytes resources/js/components/image-manager.js | 4 ++++ resources/js/components/markdown-editor.js | 3 ++- resources/js/components/wysiwyg-editor.js | 6 ++++-- .../pages/parts/image-manager-form.blade.php | 2 +- 5 files changed, 11 insertions(+), 4 deletions(-) create mode 100644 public/loading_error.png diff --git a/public/loading_error.png b/public/loading_error.png new file mode 100644 index 0000000000000000000000000000000000000000..4f588fbe1e8fb4cd09f5bf1138897a7ae9a1254c GIT binary patch literal 2096 zcmeAS@N?(olHy`uVBq!ia0y~yVAKI&4mJh`hRWK$QU(UbmP}{o08eLUg@U5|w9K4T z1_q6ZwG*v94hM*|{a@Au1<%(%vLVf6#`kUVX{7Xznau|J-fOWKZq*$ zurZ>vpzzw&gP{T}@(O)^eqDM&k9K-4bnRi+`~G_ts~M$F3;X} zuyVe|p{`9{HGVc(msmUHcdo1Wb8P2>O$UsX)2vMWWfaA@bJuJ!)Se~vQKc~CYRM^a zBe~Ucwp(OB)ylp%dB4G&%i+^@`ek!)>LhUrxoE6d)MAu#B;&g0#tDl)@93|;@YVZC z(1}nc<>O3R7Zi5aeX##w8?9|`_)fL;vBUH3$2C06vAZ1>KeM=hyzjCFW7GKqQ}2BW ze|6xD`pd1;#B7#4Z!mF4BX@BDk4dG0;C_2Ht4+VwSu85kJYlDyqr7?>D37%t8& zbVy}jVBjq9h%9Dc&{GCs#)_r(Wef}q>?NMQuI$ekxrA6$ByXNoU|?X7EOCt}an8@p zP0cG|a4t$sEJ;mKD9gwsfrVQ@hv6WTfDV}LumQ|wILO4p z4Hh6QNwh)?D}rjRn{1v}TD6!*WLvVxCn|=W6FT_mfQ>=ARzyX_IkAI>nv0HcOlxo1 zET&_lkpAurD>wh~o5~S#JntMfdJe=H)-D@(WXm-pBrM*AY~YbD?@o|3c^9$4Amz^11WAK;G6#)f?(9uS+;F2I zK~ig5LxQA+nPNm6=QhO%w$5IKh_;Tk9Mc$^&T>q9m}uS9dN9$sDK#U(yD2r{#*~D_ zh#S)qBt>q_NRSlTrWPR~V5T0?#=K2Ef~}dCYudsFU9M@34Zd8{5))=Or3xf0Zc61y zSlyJ$aAQrv&Wa7O2a6si9BwlGzvz0@`mNK#W6JD$FRtRcb|vEO-&uX1GrPllH!M5u zwWaF(a?L2wgIS$ZGrrFA_ug`heYI}bqN~+*yceZp*IbJ*bzl9rW|@0-&W2mbS0!|x z8{0?in_loCIj3vd=a&i*hvkzGFD|ibI=bMv#m_)1`GZLhlIQ%;nA@MA*z%8uLu~)| zC;z{x*#A(kf4|Q#Zi9gCMyCxftF@z&S`#|MT(%tHIw-WZBcoHaNi|CFqL4O=_ZFo^ zs$m?{GF)A}*9hob?CO{np%}49R1mCDTM1R;f)238L_xSlF|aA!U?W|@<|~2q2!ajh z0Gs9lHX3XXRQa!V{jjFijGudzA~+f&6eB`d9oGoxC>>G=;}8>U6wqer?g;1*ZE|%n zIKp*MNl7NDH9=5NV58H94vx+U#fXN4i>iOwS1LtxOwCY?C^_b}MLs`4IK1xnj1(~r?2xLY?C&-L7U^BwNW@v-V=mJ^kauj6cq9oNQj%g9DV9v%a zt}c-2qM{&WN3^s+dOAZxKn4h{UI8*qH7pQhwD%e`jbI~_&@`%C6w>KZIi7WCKI1{5 zX^Yz5)v$CQ>@Rwh42t{%?v_6dL6Lu9aZW|gIrj~VeE-~^=l^?S)Vbr|SWh3_`?k@v z?#YEZyUY7^lK7Y>2T)QjO4)%L&`S!;llYfrn9A zRHvEYwusJQhS?%I%m>9-PX`=eV?CX4;2X>7f(@1jjTAPR9yC(fV0h3-BgcCK4|k5& z1|FVhrwu&3(n31T%(n$~4j)bv&|y9j#&TMKS5R6|r}>DPfX?9~YAoE$N5xo92W(_y zIh|1Wy{Yx#u40zc4Taa6S`{Dnv2r(;ZRePl_}Gt?oB4Pwmss07K0%%4<99j5+WM`9 zb!-^QTN5fdKm|y1f%!YP4Id2da5g<{e4xj|&3{x@A)> { + event.target.src = baseUrl('loading_error.png'); + }, true); + onSelect(this.selectButton, () => { if (this.callback) { this.callback(this.lastSelected); diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js index a90f74e27..def3db5af 100644 --- a/resources/js/components/markdown-editor.js +++ b/resources/js/components/markdown-editor.js @@ -395,8 +395,9 @@ class MarkdownEditor { actionInsertImage() { const cursorPos = this.cm.getCursor('from'); window.ImageManager.show(image => { + const imageUrl = image.thumbs.display || image.url; let selectedText = this.cm.getSelection(); - let newText = "[![" + (selectedText || image.name) + "](" + image.thumbs.display + ")](" + image.url + ")"; + let newText = "[![" + (selectedText || image.name) + "](" + imageUrl + ")](" + image.url + ")"; this.cm.focus(); this.cm.replaceSelection(newText); this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length); diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index bde73f4bf..7a2b6ceba 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -563,8 +563,9 @@ class WysiwygEditor { } // Replace the actively selected content with the linked image + const imageUrl = image.thumbs.display || image.url; let html = ``; - html += `${image.name}`; + html += `${image.name}`; html += ''; win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html); }, 'gallery'); @@ -723,8 +724,9 @@ class WysiwygEditor { tooltip: 'Insert an image', onclick: function () { window.ImageManager.show(function (image) { + const imageUrl = image.thumbs.display || image.url; let html = ``; - html += `${image.name}`; + html += `${image.name}`; html += ''; editor.execCommand('mceInsertContent', false, html); }, 'gallery'); diff --git a/resources/views/pages/parts/image-manager-form.blade.php b/resources/views/pages/parts/image-manager-form.blade.php index 6d6255226..81041fcac 100644 --- a/resources/views/pages/parts/image-manager-form.blade.php +++ b/resources/views/pages/parts/image-manager-form.blade.php @@ -8,7 +8,7 @@
- {{ $image->name }}