tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Updated image card to store original width/height in payload 

no issue

- extract width/height from selected local image when uploading and store in the payload with `src` once upload finishes
- capture width/height from Unsplash and store in the payload after selecting an image
This commit is contained in:
Kevin Ansfield 2020-06-15 13:16:10 +01:00
parent d13a38c1e3
commit 388053dfd4
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/gh-unsplash.js
View File

@ -79,6 +79,8 @@ export default Component.extend(ShortcutsMixin, {
let selectParams = {
src: photo.urls.regular.replace(/&w=1080/, '&w=2000'),
width: photo.width,
height: photo.height,
alt: photo.description || '',
caption: `Photo by <a href="${photo.user.links.html}?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">${photo.user.name}</a> / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a>`
};

28
lib/koenig-editor/addon/components/koenig-card-image.js
View File

@ -6,7 +6,6 @@ import {
} from 'ghost-admin/components/gh-image-uploader';
import {action, computed, set, setProperties} from '@ember/object';
import {utils as ghostHelperUtils} from '@tryghost/helpers';
import {htmlSafe} from '@ember/string';
import {isEmpty} from '@ember/utils';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
@ -164,6 +163,12 @@ export default Component.extend({
// create undo snapshot when image finishes uploading
this.editor.run(() => {
this._updatePayloadAttr('src', image.url);
if (this._imageWidth && this._imageHeight) {
this._updatePayloadAttr('width', this._imageWidth);
this._updatePayloadAttr('height', this._imageHeight);
}
this._imageWidth = null;
this._imageHeight = null;
});
},
@ -180,30 +185,37 @@ export default Component.extend({
setPreviewSrc(files) {
let file = files[0];
if (file) {
let reader = new FileReader();
let url = URL.createObjectURL(file);
this.set('previewSrc', url);
reader.onload = (e) => {
this.set('previewSrc', htmlSafe(e.target.result));
let imageElem = new Image();
imageElem.onload = () => {
// store width/height for use later to avoid saving an image card with no `src`
this._imageWidth = imageElem.naturalWidth;
this._imageHeight = imageElem.naturalHeight;
};
reader.readAsDataURL(file);
imageElem.src = url;
}
},
resetSrcs() {
this.set('previewSrc', null);
this._imageWidth = null;
this._imageHeight = null;
// create undo snapshot when clearing
this.editor.run(() => {
this._updatePayloadAttr('src', null);
this._updatePayloadAttr('width', null);
this._updatePayloadAttr('height', null);
});
},
selectFromImageSelector({src, caption, alt}) {
selectFromImageSelector({src, width, height, caption, alt}) {
let {payload, saveCard} = this;
let searchTerm;
setProperties(payload, {src, caption, alt, searchTerm});
setProperties(payload, {src, width, height, caption, alt, searchTerm});
this.send('closeImageSelector');