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

<KoenigCard
    @tagName="figure"
    @class={{concat (kg-style (if (eq this.imageSelector.type "placeholder") "media-card-placeholder" "media-card")) " " (kg-style "breakout" size=this.payload.cardWidth) " flex flex-column"}}
    @showSelectedOutline={{not-eq this.imageSelector.type "placeholder"}}
    @isSelected={{this.isSelected}}
    @isEditing={{this.isEditing}}
    @selectCard={{action this.selectCard}}
    @deselectCard={{action this.deselectCard}}
    @editCard={{action this.editCard}}
    @saveAsSnippet={{if this.payload.src this.saveAsSnippet}}
    @toolbar={{this.toolbar}}
    @hasEditMode={{false}}
    @onDeselect={{action "onDeselect"}}
    @addParagraphAfterCard={{this.addParagraphAfterCard}}
    @moveCursorToPrevSection={{this.moveCursorToPrevSection}}
    @moveCursorToNextSection={{this.moveCursorToNextSection}}
    @editor={{this.editor}}
    as |card|
>
    {{#if (eq this.imageSelector.type "placeholder")}}
        {{!-- image selector placeholder (eg, gif browser) --}}
        {{component this.imageSelector.component
            searchTerm=this.payload.searchTerm
            select=(action "selectFromImageSelector")
            close=(action "closeImageSelector")}}
    {{else}}
        {{!-- standard image upload placeholder --}}
        <GhUploader
            @files={{this.files}}
            @accept={{this.imageMimeTypes}}
            @extensions={{this.imageExtensions}}
            @onStart={{action "setPreviewSrc"}}
            @onComplete={{action "updateSrc"}}
            @onFailed={{action "resetSrcs"}}
            as |uploader|
        >
            <div class="relative{{unless (or this.previewSrc this.payload.src) " bg-whitegrey-l2"}}">
                {{#if (or this.previewSrc this.payload.src)}}
                    <img src={{or this.previewSrc this.payload.src}} class="{{kg-style this.kgImgStyle sidebar=this.ui.hasSideNav}}" alt={{this.payload.alt}}>
                    {{#if this.isDraggedOver}}
                        <div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
                            <span class="db center sans-serif fw7 f7 white">
                                Drop to replace image
                            </span>
                        </div>
                    {{/if}}
                {{/if}}

                {{#if (or uploader.errors uploader.isUploading (not this.payload.src))}}
                    <div class="relative miw-100 flex items-center {{if this.previewSrc "absolute absolute--fill bg-white-50" "kg-media-placeholder ba b--whitegrey"}}">
                        {{#if uploader.errors}}
                            <span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
                                {{get uploader.errors "0.message"}}
                            </span>
                        {{/if}}

                        {{#if this.isDraggedOver}}
                            <span class="db center sans-serif fw7 f7 middarkgrey">
                                Drop it like it's hot 🔥
                            </span>
                        {{else if uploader.isUploading}}
                            {{uploader.progressBar}}
                        {{else if (not this.previewSrc this.payload.src)}}
                            <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa16 pt14 pb14 kg-image-button" onclick={{action "triggerFileDialog"}} type="button">
                                {{svg-jar this.placeholder class="kg-placeholder-image"}}
                                <span class="mt2 midgrey">Click to select an image</span>
                            </button>
                        {{/if}}
                    </div>
                {{/if}}
            </div>

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

        {{#if (or this.isSelected (clean-basic-html this.payload.caption))}}
            {{#if this.isEditingAlt}}
                <card.AltInput
                    @alt={{this.payload.alt}}
                    @update={{this.updateAlt}}
                    @placeholder="Type alt text for image (optional)" />
            {{else}}
                <card.CaptionInput
                    @caption={{this.payload.caption}}
                    @update={{this.updateCaption}}
                    @placeholder="Type caption for image (optional)" />
            {{/if}}

            {{#if this.isSelected}}
                <button
                    title="Toggle between editing alt text and caption"
                    class="absolute right-0 bottom-0 ma2 pl1 pr1 ba br3 f8 sans-serif fw4 lh-title tracked-2 {{if this.isEditingAlt "bg-green b--green white" "bg-white b--midlightgrey midlightgrey"}}" type="button" {{on "click" this.toggleAltEditing passive=true}}
                >
                    Alt
                </button>
            {{/if}}
        {{/if}}
    {{/if}}

    {{#if (eq this.imageSelector.type "modal")}}
        {{component this.imageSelector.component
            searchTerm=this.payload.searchTerm
            select=(action "selectFromImageSelector")
            close=(action "closeImageSelector")}}
    {{/if}}
</KoenigCard>

{{#if this.isEditingLink}}
    <KoenigLinkInput
        @source="direct"
        @href={{this.payload.href}}
        @linkRect={{this.linkRect}}
        @update={{action "updateHref"}}
        @cancel={{action "cancelEditLink"}}
    />
{{/if}}