mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-24 06:35:49 +03:00
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:
parent
6800a3fdb4
commit
59def266de
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user