TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Updated image card to store original width/height in payload

Browse Source 
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 af648b8fb9
commit 37de63e8cd
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,6 +79,8 @@ export default Component.extend(ShortcutsMixin, {
let selectParams = { let selectParams = {
src: photo.urls.regular.replace(/&w=1080/, '&w=2000'), src: photo.urls.regular.replace(/&w=1080/, '&w=2000'),
width: photo.width,
height: photo.height,
alt: photo.description || '', 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>` 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
ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js
View File

@ -6,7 +6,6 @@ import {
} from 'ghost-admin/components/gh-image-uploader'; } from 'ghost-admin/components/gh-image-uploader';
import {action, computed, set, setProperties} from '@ember/object'; import {action, computed, set, setProperties} from '@ember/object';
import {utils as ghostHelperUtils} from '@tryghost/helpers'; import {utils as ghostHelperUtils} from '@tryghost/helpers';
import {htmlSafe} from '@ember/string';
import {isEmpty} from '@ember/utils'; import {isEmpty} from '@ember/utils';
import {run} from '@ember/runloop'; import {run} from '@ember/runloop';
import {inject as service} from '@ember/service'; import {inject as service} from '@ember/service';
@ -164,6 +163,12 @@ export default Component.extend({
// create undo snapshot when image finishes uploading // create undo snapshot when image finishes uploading
this.editor.run(() => { this.editor.run(() => {
this._updatePayloadAttr('src', image.url); 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) { setPreviewSrc(files) {
let file = files[0]; let file = files[0];
if (file) { if (file) {
let reader = new FileReader(); let url = URL.createObjectURL(file);
this.set('previewSrc', url);
reader.onload = (e) => { let imageElem = new Image();
this.set('previewSrc', htmlSafe(e.target.result)); 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;
}; };
imageElem.src = url;
reader.readAsDataURL(file);
} }
}, },
resetSrcs() { resetSrcs() {
this.set('previewSrc', null); this.set('previewSrc', null);
this._imageWidth = null;
this._imageHeight = null;
// create undo snapshot when clearing // create undo snapshot when clearing
this.editor.run(() => { this.editor.run(() => {
this._updatePayloadAttr('src', null); 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 {payload, saveCard} = this;
let searchTerm; let searchTerm;
setProperties(payload, {src, caption, alt, searchTerm}); setProperties(payload, {src, width, height, caption, alt, searchTerm});
this.send('closeImageSelector'); this.send('closeImageSelector');