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

<KoenigCard
    @tagName="figure"
    @class={{concat (kg-style "media-card") " " (kg-style "breakout" size="wide") " flex flex-column"}}
    @isSelected={{this.isSelected}}
    @isEditing={{this.isEditing}}
    @selectCard={{action this.selectCard}}
    @deselectCard={{action this.deselectCard}}
    @editCard={{action this.editCard}}
    @toolbar={{this.toolbar}}
    @hasEditMode={{false}}
    @addParagraphAfterCard={{this.addParagraphAfterCard}}
    @moveCursorToPrevSection={{this.moveCursorToPrevSection}}
    @moveCursorToNextSection={{this.moveCursorToNextSection}}
    @editor={{this.editor}}
    @onSelect={{action "didSelect"}}
    @onDeselect={{action "didDeselect"}}
    as |card|
>
    <GhUploader
        @files={{this.files}}
        @accept={{this.imageMimeTypes}}
        @extensions={{this.imageExtensions}}
        @onUploadStart={{action "addImage"}}
        @onUploadSuccess={{action "setImageSrc"}}
        @onUploadFailure={{action "uploadFailed"}}
        @onFailed={{action "handleErrors"}}
        as |uploader|
    >
        <div class="relative{{unless this.images " bg-whitegrey-l2"}}">
            {{#if this.imageRows}}
                <div class="flex flex-column" data-gallery>
                    {{#each this.imageRows as |row index|}}
                        <div class="flex flex-row justify-center" data-row="{{index}}">
                            {{#each row as |image|}}
                                <div
                                    style={{image.style}}
                                    class="relative hide-child {{image.classes}}"
                                    data-image
                                >
                                    <img
                                        src={{or image.previewSrc image.src}}
                                        width={{image.width}}
                                        height={{image.height}}
                                        class="w-100 h-100 db pe-none"
                                    >
                                    {{#unless this.koenigDragDropHandler.isDragging}}
                                        <div class="bg-image-overlay-top child pe-none {{image.overlayClasses}}">
                                            <div class="flex flex-row-reverse">
                                                <button class="bg-white-90 pl3 pr3 br3 pe-auto" {{action "deleteImage" image}}>
                                                    {{svg-jar "koenig/kg-trash" class="fill-darkgrey w4 h4"}}
                                                </button>
                                            </div>
                                        </div>
                                    {{/unless}}
                                </div>
                            {{/each}}
                        </div>
                    {{/each}}
                </div>
            {{/if}}

            {{#if (or uploader.isUploading (is-empty this.imageRows))}}
                <div class="relative miw-100 flex items-center {{if (is-empty this.imageRows) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
                    {{#if this.isDraggedOver}}
                        <span class="db center sans-serif fw7 f7 middarkgrey">
                            Drop 'em like it's hot 🔥
                        </span>
                    {{else if uploader.isUploading}}
                        {{uploader.progressBar}}
                    {{else if (is-empty this.imageRows)}}
                        <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa8 pt6 pb6 kg-image-button" onclick={{action "triggerFileDialog"}}>
                            {{svg-jar "gallery-placeholder" class="kg-placeholder-gallery nudge-bottom--10"}}
                            <span class="mt2 midgrey">Click to select up to 9 images</span>
                        </button>
                    {{/if}}
                </div>
            {{else 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 add up to 9 images
                    </span>
                </div>
            {{/if}}

            {{#if (and this.errorMessage (not this.isDraggedOver))}}
                <div class="absolute absolute--fill flex items-center bg-black-60">
                    <span class="db center sans-serif fw7 f7 pl2 pr2 bg-red white">
                        {{this.errorMessage}}.
                        <button onclick={{action "clearErrorMessage"}} style="text-decoration: underline !important">
                            Dismiss
                        </button>
                    </span>
                </div>
            {{/if}}
        </div>

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

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