mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-29 23:22:34 +01:00
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
This commit is contained in:
parent
4239d4c54d
commit
941217d9fb
BIN
public/loading_error.png
Normal file
BIN
public/loading_error.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.0 KiB |
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -563,8 +563,9 @@ class WysiwygEditor {
|
||||
}
|
||||
|
||||
// Replace the actively selected content with the linked image
|
||||
const imageUrl = image.thumbs.display || image.url;
|
||||
let html = `<a href="${image.url}" target="_blank">`;
|
||||
html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
|
||||
html += `<img src="${imageUrl}" alt="${image.name}">`;
|
||||
html += '</a>';
|
||||
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 = `<a href="${image.url}" target="_blank">`;
|
||||
html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
|
||||
html += `<img src="${imageUrl}" alt="${image.name}">`;
|
||||
html += '</a>';
|
||||
editor.execCommand('mceInsertContent', false, html);
|
||||
}, 'gallery');
|
||||
|
@ -8,7 +8,7 @@
|
||||
|
||||
<div class="image-manager-viewer">
|
||||
<a href="{{ $image->url }}" target="_blank" rel="noopener" class="block">
|
||||
<img src="{{ $image->thumbs['display'] }}"
|
||||
<img src="{{ $image->thumbs['display'] ?? $image->url }}"
|
||||
alt="{{ $image->name }}"
|
||||
class="anim fadeIn"
|
||||
title="{{ $image->name }}">
|
||||
|
Loading…
Reference in New Issue
Block a user