Fixed video card aspect ration change when uploading custom thumbnail

refs https://github.com/TryGhost/Team/issues/1229

- changed the video card image so it uses an aspect-ratio box set to the aspect ratio of the video, with the image using `object-fit: cover` to match the background image behavior in the front-end
This commit is contained in:
Kevin Ansfield 2021-12-10 19:48:16 +00:00
parent 6800a3fdb4
commit 59def266de
3 changed files with 11 additions and 1 deletions

View File

@ -2240,6 +2240,7 @@ button.emoji-picker__category-button.active {
bottom: 0;
height: 80px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
z-index: 999;
}
.kg-video-card .kg-player {
@ -2301,6 +2302,7 @@ button.emoji-picker__category-button.active {
justify-content: center;
align-items: center;
background-image: linear-gradient(180deg,rgba(0,0,0,0.3) 0,transparent 70%,transparent 100%);
z-index: 999;
}
.kg-settings-panel-control-info.video {

View File

@ -35,7 +35,9 @@
>
<div class="relative{{unless (or this.previewThumbnailSrc @payload.customThumbnailSrc @payload.thumbnailSrc) " bg-whitegrey-l2"}}">
{{#if (or this.previewThumbnailSrc @payload.customThumbnailSrc @payload.thumbnailSrc)}}
<img src={{or this.previewThumbnailSrc @payload.customThumbnailSrc @payload.thumbnailSrc}} class="{{kg-style this.kgImgStyle}}">
<div class="aspect-ratio" style={{this.aspectRatioPaddingStyle}}>
<img src={{or this.previewThumbnailSrc @payload.customThumbnailSrc @payload.thumbnailSrc}} class="aspect-ratio--object" style="object-fit: cover">
</div>
<div class="image-overlay">
<button class="kg-large-play-icon">{{svg-jar "play"}}</button>
</div>

View File

@ -5,6 +5,7 @@ import {TrackedObject} from 'tracked-built-ins';
import {action} from '@ember/object';
import {bind} from '@ember/runloop';
import {guidFor} from '@ember/object/internals';
import {htmlSafe} from '@ember/template';
import {isBlank} from '@ember/utils';
import {inject as service} from '@ember/service';
import {set} from '@ember/object';
@ -87,6 +88,11 @@ export default class KoenigCardVideoComponent extends Component {
};
}
get aspectRatioPaddingStyle() {
const {width, height} = this.args.payload || {};
return htmlSafe(`padding-top: calc(${height} / ${width} * 100%)`);
}
constructor() {
super(...arguments);
this.args.registerComponent(this);