Ghost/ghost/admin/app/components/settings/form-fields/publication-cover.hbs

62 lines
2.8 KiB
Handlebars

<div data-test-setting="coverImage" ...attributes>
<GhUploader
@extensions={{this.imageExtensions}}
@onComplete={{this.imageUploaded}}
as |uploader|
>
<div>
<label class="gh-setting-title" for="publication-cover">Publication cover</label>
<div class="gh-setting-desc mb3">An optional large background image for your site</div>
{{#each uploader.errors as |error|}}
<div class="gh-setting-error" data-test-error="coverImage">{{or error.context error.message}}</div>
{{/each}}
<div class="gh-setting-action gh-uploadbutton-container flex flex-column items-stretch">
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if this.settings.coverImage}}
<div class="gh-branding-image-container largeimg justify-start">
<input
id="publication-cover"
type="image"
class="blog-cover"
src="{{this.settings.coverImage}}"
{{on "click" uploader.triggerFileDialog}}
data-test-cover-img
>
<button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.update null)}} data-test-delete-image="coverImage">
{{svg-jar "trash" class="w4 h4 fill-white"}}
</button>
</div>
{{else}}
<div class="self-start">
<button id="publication-cover" type="button" class="gh-btn gh-btn-white" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="coverImage">
<span>Upload cover</span>
</button>
{{#if (feature "improvedOnboarding")}}
<button type="button" class="gh-btn gh-btn-white w10" {{on "click" this.toggleUnsplashSelector}} aria-label="Select photo from Unsplash">
<span>{{svg-jar "unsplash" class="nudge-right--2 nudge-bottom--2"}}</span>
</button>
{{/if}}
</div>
{{/if}}
<div class="dn">
<GhFileInput
@multiple={{false}}
@action={{uploader.setFiles}}
@accept={{this.imageMimeTypes}}
@onInsert={{uploader.registerFileInput}}
data-test-file-input="coverImage"
/>
</div>
</div>
</div>
</GhUploader>
{{#if this.showUnsplashSelector}}
<GhUnsplash
@select={{this.setUnsplashImage}}
@close={{this.toggleUnsplashSelector}}
/>
{{/if}}
</div>