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 zcmb7_dr%YC9>+Ii10e}@lMCSu2@geBDA1xH6sROcq+nz)tbld{qCBDoiV}K3V0oAa z!gX3>1*~nDQd_7l3RrGOWeE?jD3Dr|T2vH-Yi~uaOpPGQ-RyMk+}r-s{&CKnbN2WB ze9xKR%y-q2#8?}a6AJ(Uo48G)Bmkhn=E1ZiPl`+H4v?FwoR}C%Tuh8WQLuk^jywwh ze2$hL4c}yt*w(DHXp(%fgHZkz$w^rCx=SZZd>YEFmb$*XZwXs%6Q|KOPo^s7+mQo` z{F`IMHVAYV)Fmcr0+Jqd$9*QQwF)pzU7lU(Hl;_OK7L~Nfm&L_zQ!*_>DP9p^q)xq zp^fh4Yfo$+X!7#DpZ1>V`-B7bQ`=vamPzXy&O1Pmdd~^j?LOze8;xB=@u|>W&AH7b zi4nQqG1TteXOznW-IM2f-tgSLA!Lh-kk8)R))C~_;Ph{={N%C1tM#Kt0ec89-+W)3s_@=&W^q2VQq$}GjJO?d&M+M&= znvZ(^R+?W_(42SmRP?NNs)R$|@ojYTOz6GAx*MT1Y^3Md-KQx(^;}!?s8h#(%i@Cz z721F4T7IS-5AW&uP}q3RkC9`&7%_k7oqHcKmiAYSHmtue6PD;+{^oVxV!Dfqg(u_c zPE&DF(Tj;!k8_5fScMx3j{23A7|6C*X2i#e01H3`7*FO$lkEVk6`Qud4*&t4=0Q__ z9(9mBv?`2C5L?aASUk|n@rUaI^2o7Jj1b3+9fE;Da;nc#wAEn zDqgcE>C8CM+sVq?kM9s$U4k5{jINp{JA+rNZ4EeM(HXOM<>lRf#HQtz4mfBspOjt% zEK0&GqHzFZLoh&CKrpo?C-a(|K=vQ}_=gLBXOUDIjz!ECZ>U<25B2PpK zed9^=#wb#lI;-;VzrY;#qBV$ReYgncxE8HN975-kagKA57Il1c4#5L=O?0A;fpacI zaQehWRECe2qmI5^spOCKfobrK>1UVCiINBbEiB%~%!_ZN;*H z@iw$uiSHl^?xO}QWJP}~^=zjuCH-LJ5#v{^o8KdMUN+P%KXqR)48}?5~kFMkm*{n@C7(>&uds*gQFYJ9EszfA)>2)Jw+|^OE_zd}Am(Nah;#rL2zTneC~Xd((t`TSbGbog~CR-L_g(F0*tkbcRG zw@Gu4UV)U!=T<;|pjIUzt;C{0^1>b-F68aGT!?&%im4{c%Tc5EORFzE5Y@44AyPQ7 zxq}oNgsDvaRs!+|wWlR2J|<2Uh}eXOFGo*`?LZ?bW>t{o84pdhsPV=8$ilMeRNxU* zC@s^B-8m~}6Av;oz0Hhvo|%ED&5SmRA*C38W`@RWDe5;{>NCi49U`VS?HZQGOt-T$ zm-YGjnldYrF+*LJm!j9*Vqi8O~gevQBFrTOMh; zxsdbR>6~Un)+rvE-L*9Q#Y6VayvRp)dH(G`g`a9UJA8KOz1~MgUhAcWoEK6(87qs8 z_I+1lkpL$-f~SXOcq0LBaw*OM9Z24xK!%5qSb8MV>a3%dmE^ILDhG2T16dZzVxXxU-vTq#( z8~Rp*YgjL`F`}^QfdHyY|S~yk5U{@Zzz|_g65*cjz;0_kQX6`jo zJ9x*MUsF$JMFdb(jTSS_0aB@0KlctkA2?x+J*=1v0NJbhT?L3TaM+D_s!+_3i8I~C zg(JN7)S|_b&@`ggP|(8UyM26qdbr(m$%Q`Y`KQA3cbQ0~>7R|@|D`BLS8WQ4{%Ydq SEB_>a96+2nQFLY_iv0(S!8H~D literal 0 HcmV?d00001 diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js index c974ab1b0..6d05d3388 100644 --- a/resources/js/components/image-manager.js +++ b/resources/js/components/image-manager.js @@ -74,6 +74,10 @@ class ImageManager { this.listContainer.addEventListener('event-emit-select-image', this.onImageSelectEvent.bind(this)); + this.listContainer.addEventListener('error', event => { + 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 }}