2019-08-27 15:51:31 +02:00
|
|
|
|
<h4 class="midlightgrey f-small fw5 ttu">Basic settings</h4>
|
|
|
|
|
<div class="pa5 pt4 br4 shadow-1 bg-grouped-table mt2 flex flex-column flex-row-ns items-start justify-between gh-tag-basic-settings-form">
|
|
|
|
|
<div class="order-1 flex flex-column items-start mr5 w-100 w-50-m w-two-thirds-l">
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="name">
|
2020-01-10 15:14:55 +01:00
|
|
|
|
<label for="tag-name">Name</label>
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhTextInput
|
|
|
|
|
@id="tag-name"
|
|
|
|
|
@name="name"
|
|
|
|
|
@value={{this.scratchTag.name}}
|
|
|
|
|
@tabindex="1"
|
|
|
|
|
@focus-out={{action "setProperty" "name" this.scratchTag.name}}
|
|
|
|
|
/>
|
2020-01-10 15:14:55 +01:00
|
|
|
|
<p class="description">
|
|
|
|
|
Start with # to create internal tags
|
|
|
|
|
<a href="https://ghost.org/docs/concepts/tags/#internal-tag" target="_blank" rel="noreferrer">Learn more</a>
|
|
|
|
|
</p>
|
|
|
|
|
<GhErrorMessage @errors={{this.tag.errors}} @property="name" />
|
2020-01-16 16:14:03 +01:00
|
|
|
|
</GhFormGroup>
|
2015-10-15 14:03:26 +02:00
|
|
|
|
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="slug">
|
2020-01-10 15:14:55 +01:00
|
|
|
|
<label for="tag-slug">Slug</label>
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhTextInput
|
|
|
|
|
@value={{this.scratchTag.slug}}
|
|
|
|
|
@id="tag-slug"
|
|
|
|
|
@name="slug"
|
|
|
|
|
@tabindex="2"
|
|
|
|
|
@focus-out={{action "setProperty" "slug" this.scratchTag.slug}}
|
|
|
|
|
/>
|
|
|
|
|
<GhUrlPreview @prefix="tag" @slug={{this.scratchTag.slug}} @tagName="p" @classNames="description" />
|
2020-01-10 15:14:55 +01:00
|
|
|
|
<GhErrorMessage @errors={{this.activeTag.errors}} @property="slug" />
|
2020-01-16 16:14:03 +01:00
|
|
|
|
</GhFormGroup>
|
2015-10-15 14:03:26 +02:00
|
|
|
|
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="description">
|
2020-01-10 15:14:55 +01:00
|
|
|
|
<label for="tag-description">Description</label>
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhTextarea
|
|
|
|
|
@id="tag-description"
|
|
|
|
|
@name="description"
|
|
|
|
|
@class="gh-tag-details-textarea"
|
|
|
|
|
@tabindex="3"
|
|
|
|
|
@value={{this.scratchTag.description}}
|
|
|
|
|
@focus-out={{action "setProperty" "description" this.scratchTag.description}}
|
|
|
|
|
/>
|
2020-01-10 15:14:55 +01:00
|
|
|
|
<GhErrorMessage @errors={{this.tag.errors}} @property="description" />
|
|
|
|
|
<p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.description 500}}</p>
|
2020-01-16 16:14:03 +01:00
|
|
|
|
</GhFormGroup>
|
2015-10-15 14:03:26 +02:00
|
|
|
|
</div>
|
2019-08-27 15:51:31 +02:00
|
|
|
|
<div class="order-0 mb6 mb0-ns order-2-ns w-100 w-50-m w-third-l">
|
|
|
|
|
<label for="tag-image">Tag image</label>
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhImageUploaderWithPreview
|
|
|
|
|
@image={{this.tag.featureImage}}
|
|
|
|
|
@text="Upload tag image"
|
|
|
|
|
@class="gh-tag-image-uploader"
|
|
|
|
|
@allowUnsplash={{true}}
|
|
|
|
|
@update={{action "setCoverImage"}}
|
|
|
|
|
@remove={{action "clearCoverImage"}}
|
|
|
|
|
/>
|
2015-10-15 14:03:26 +02:00
|
|
|
|
</div>
|
2019-08-27 15:51:31 +02:00
|
|
|
|
</div>
|
2015-10-15 14:03:26 +02:00
|
|
|
|
|
2019-08-27 15:51:31 +02:00
|
|
|
|
<h4 class="midlightgrey f-small fw5 ttu mt15">Meta data</h4>
|
|
|
|
|
<div class="pa5 pt4 br4 shadow-1 bg-grouped-table mt2 flex flex-column flex-row-ns items-start justify-between">
|
|
|
|
|
<div class="flex flex-column items-start mr5 w-100 w-50-m w-two-thirds-l">
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
|
2020-01-10 15:14:55 +01:00
|
|
|
|
<label for="meta-title">Meta Title</label>
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhTextInput
|
|
|
|
|
@id="meta-title"
|
|
|
|
|
@name="metaTitle"
|
|
|
|
|
@placeholder={{this.scratchTag.name}}
|
|
|
|
|
@tabindex="4"
|
|
|
|
|
@value={{this.scratchTag.metaTitle}}
|
|
|
|
|
@focus-out={{action "setProperty" "metaTitle" this.scratchTag.metaTitle}}
|
|
|
|
|
/>
|
2020-01-10 15:14:55 +01:00
|
|
|
|
<GhErrorMessage @errors={{this.tag.errors}} @property="metaTitle" />
|
|
|
|
|
<p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.metaTitle 70}}</p>
|
2020-01-16 16:14:03 +01:00
|
|
|
|
</GhFormGroup>
|
2015-10-15 14:03:26 +02:00
|
|
|
|
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaDescription">
|
2020-01-10 15:14:55 +01:00
|
|
|
|
<label for="meta-description">Meta Description</label>
|
2020-01-16 16:14:03 +01:00
|
|
|
|
<GhTextarea
|
|
|
|
|
@id="meta-description"
|
|
|
|
|
@name="metaDescription"
|
|
|
|
|
@class="gh-tag-details-textarea"
|
|
|
|
|
@placeholder={{this.scratchTag.description}}
|
|
|
|
|
@tabindex="5"
|
|
|
|
|
@value={{this.scratchTag.metaDescription}}
|
|
|
|
|
@focus-out={{action "setProperty" "metaDescription" this.scratchTag.metaDescription}}
|
|
|
|
|
/>
|
2020-01-10 15:14:55 +01:00
|
|
|
|
<GhErrorMessage @errors={{this.tag.errors}} @property="metaDescription" />
|
|
|
|
|
<p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.metaDescription 156}}</p>
|
2020-01-16 16:14:03 +01:00
|
|
|
|
</GhFormGroup>
|
2019-08-27 15:51:31 +02:00
|
|
|
|
</div>
|
|
|
|
|
<div class="w-100 w-50-m w-third-l">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label>Search Engine Result Preview</label>
|
|
|
|
|
<div class="seo-preview">
|
2019-12-13 15:20:29 +01:00
|
|
|
|
<div class="seo-preview-title">{{this.seoTitle}}</div>
|
|
|
|
|
<div class="seo-preview-link">{{this.seoURL}}</div>
|
|
|
|
|
<div class="seo-preview-description">{{this.seoDescription}}</div>
|
2015-10-15 14:03:26 +02:00
|
|
|
|
</div>
|
2019-08-27 15:51:31 +02:00
|
|
|
|
</div>
|
2015-10-15 14:03:26 +02:00
|
|
|
|
</div>
|
2019-08-27 15:51:31 +02:00
|
|
|
|
</div>
|