Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-before-after.hbs

<KoenigCard
    @env={{@env}}
    @tagName="figure"
    @class={{concat (kg-style "breakout" size=@payload.cardWidth) " flex flex-column"}}
    @headerOffset={{@headerOffset}}
    @toolbar={{this.toolbar}}
    @payload={{@payload}}
    @isSelected={{@isSelected}}
    @isEditing={{@isEditing}}
    @selectCard={{@selectCard}}
    @deselectCard={{@deselectCard}}
    @editCard={{@editCard}}
    @hasEditMode={{true}}
    @saveCard={{@saveCard}}
    @saveAsSnippet={{@saveAsSnippet}}
    @onLeaveEdit={{this.leaveEditMode}}
    @addParagraphAfterCard={{@addParagraphAfterCard}}
    @moveCursorToPrevSection={{@moveCursorToPrevSection}}
    @moveCursorToNextSection={{@moveCursorToNextSection}}
    @editor={{@editor}}
    {{did-insert this.registerElement}}
    as |card|
>
    <GhUploader
        @files={{this.files}}
        @accept={{this.imageMimeTypes}}
        @extensions={{this.imageExtensions}}
        @onUploadStart={{this.uploadStart}}
        @onUploadSuccess={{this.uploadSuccess}}
        @onUploadFailure={{this.uploadFailed}}
        @onFailed={{this.handleErrors}}
        as |uploader|
    >
    <div class="kg-before-after-card relative margin-auto" style="width: {{this.imageWidth}}px">
            {{#if this.isPopulated}}
                <div
                    class="overflow-hidden absolute top-0 left-0"
                    style="height: 100%; {{this.overlayStyle}}"
                >
                    <img
                        class="kg-before-after-card-before-image"
                        src={{@payload.beforeImage.src}}
                        width={{this.imageWidth}}
                        style="height: 100%; object-fit: cover;"
                    />
                </div>
                <div>
                    <img
                        class="kg-before-after-card-after-image"
                        src={{@payload.afterImage.src}}
                        width={{this.imageWidth}}
                    />
                </div>
                <input
                    type="range"
                    title="Starting position"
                    min="0"
                    max="100"
                    value="{{@payload.startingPosition}}"
                    {{on "input" this.setStartingPosition}}
                    {{on "scroll" this.preventDefault}}
                    {{on "mousedown" this.stopPropagation}}
                    {{on "change" this.removeFocus}}
                />
                <span class="kg-before-after-card-slider-handle" style="left: calc({{@payload.startingPosition}}% - 18px);"></span>
            {{else}}
                <div class="overflow-hidden" style="width:49%; height: 100%; display: inline-block;">
                    {{#if @payload.beforeImage}}
                        <img
                            class="kg-before-after-card-before-image"
                            src={{@payload.beforeImage.src}}
                            width={{this.imageWidth}}
                            style="height: 100%; object-fit: cover;"
                        />
                    {{else}}
                        <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa16 pt14 pb14 kg-image-button" {{on "click" this.selectBeforeImage}}>
                            {{svg-jar this.placeholder class="kg-placeholder-image"}}
                            <h2> Before </h2>
                            <span class="mt2 midgrey">Click to select an image</span>
                        </button>
                    {{/if}}
                </div>
                <div class="overflow-hidden" style="width:49%; display: inline-block;">
                    {{#if @payload.afterImage}}
                        <img
                            class="kg-before-after-card-after-image"
                            src={{@payload.afterImage.src}}
                            width={{this.imageWidth}}
                        />
                    {{else}}
                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa16 pt14 pb14 kg-image-button" {{on "click" this.selectAfterImage}}>
                            {{svg-jar this.placeholder class="kg-placeholder-image"}}
                            <h2> After </h2>
                            <span class="mt2 midgrey">Click to select an image</span>
                        </button>
                    {{/if}}
                </div>
                <input
                    type="range"
                    title="Starting position"
                    min="0"
                    max="100"
                    disabled="disabled"
                    value="{{@payload.startingPosition}}"
                />
                <span class="kg-before-after-card-slider-handle" style="left: calc({{@payload.startingPosition}}% - 18px);"></span>
            {{/if}}
            {{#if @payload.beforeImage}}
                <button class="absolute top-0 left-0 kg-before-after-card-replace-image">
                    <span class="mt2 midgrey" {{on "click" this.selectBeforeImage}}>Replace before image</span>
                </button>
            {{/if}}
            {{#if @payload.afterImage}}
                <button class="absolute top-0 right-0 kg-before-after-card-replace-image">
                    <span class="mt2 midgrey" {{on "click" this.selectAfterImage}}>Replace after image</span>
                </button>
            {{/if}}
        </div>

        <div style="display:none">
            <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} />
        </div>
    </GhUploader>

    {{#if (or @isSelected (clean-basic-html @payload.caption))}}
        <card.CaptionInput
            @caption={{@payload.caption}}
            @update={{this.setCaption}}
            @placeholder="Type caption for before/after (optional)"
        />
    {{/if}}
</KoenigCard>