mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Updated social media previews in tag settings
This commit is contained in:
Sanne de Vries
parent
478084e274
commit
b0354c7f7e
2 changed files with 214 additions and 162 deletions
|
|
@ -94,56 +94,62 @@
|
|||
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.metadataOpen}}
|
||||
<div class="gh-main-section columns-2">
|
||||
<div class="gh-main-section-block">
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
|
||||
<label for="meta-title">Meta title</label>
|
||||
<GhTextInput
|
||||
@id="meta-title"
|
||||
@name="metaTitle"
|
||||
@placeholder={{this.scratchTag.name}}
|
||||
@tabindex="4"
|
||||
@value={{this.scratchTag.metaTitle}}
|
||||
@focus-out={{action "setProperty" "metaTitle" this.scratchTag.metaTitle}}
|
||||
/>
|
||||
<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>
|
||||
</GhFormGroup>
|
||||
<div class="gh-setting-content-extended">
|
||||
<div class="gh-seo-settings">
|
||||
<div class="gh-seo-settings-left flex-basis-1-2-m flex-basis-2-3-l">
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
|
||||
<label for="meta-title">Meta title</label>
|
||||
<GhTextInput
|
||||
@id="meta-title"
|
||||
@name="metaTitle"
|
||||
@placeholder={{this.scratchTag.name}}
|
||||
@tabindex="4"
|
||||
@value={{this.scratchTag.metaTitle}}
|
||||
@focus-out={{action "setProperty" "metaTitle" this.scratchTag.metaTitle}}
|
||||
/>
|
||||
<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>
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaDescription">
|
||||
<label for="meta-description">Meta description</label>
|
||||
<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}}
|
||||
/>
|
||||
<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>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="canonicalUrl">
|
||||
<label for="canonical-url">Canonical URL</label>
|
||||
<GhTextInput
|
||||
@id="canonical-url"
|
||||
@name="canonicalUrl"
|
||||
@tabindex="4"
|
||||
@value={{this.scratchTag.canonicalUrl}}
|
||||
@focus-out={{action "validateCanonicalUrl"}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.tag.errors}} @property="canonicalUrl" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="gh-main-section-block">
|
||||
<div class="form-group">
|
||||
<label>Search Engine Result Preview</label>
|
||||
<div class="seo-preview">
|
||||
<div class="seo-preview-title">{{this.seoTitle}}</div>
|
||||
<div class="seo-preview-link">{{this.seoURL}}</div>
|
||||
<div class="seo-preview-description">{{this.seoDescription}}</div>
|
||||
</div>
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaDescription">
|
||||
<label for="meta-description">Meta description</label>
|
||||
<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}}
|
||||
/>
|
||||
<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>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="canonicalUrl">
|
||||
<label for="canonical-url">Canonical URL</label>
|
||||
<GhTextInput
|
||||
@id="canonical-url"
|
||||
@name="canonicalUrl"
|
||||
@tabindex="4"
|
||||
@value={{this.scratchTag.canonicalUrl}}
|
||||
@focus-out={{action "validateCanonicalUrl"}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.tag.errors}} @property="canonicalUrl" />
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="flex-basis-1-2-m flex-basis-1-3-l">
|
||||
<label>Search Engine Result Preview</label>
|
||||
<div class="gh-seo-container">
|
||||
<div class="gh-seo-preview">
|
||||
<div class="flex mb6">
|
||||
{{svg-jar "google"}}
|
||||
<div class="gh-seo-search-bar">{{svg-jar "google-search"}}</div>
|
||||
</div>
|
||||
<div class="gh-seo-preview-link">{{this.seoURL}}</div>
|
||||
<div class="gh-seo-preview-title">{{this.seoTitle}}</div>
|
||||
<div class="gh-seo-preview-desc">{{this.seoDescription}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -162,63 +168,79 @@
|
|||
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.twitterMetadataOpen}}
|
||||
<div class="gh-main-section columns-2">
|
||||
<div class="gh-main-section-block">
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterImage">
|
||||
<label for="twitter-image">Twitter image</label>
|
||||
<GhImageUploaderWithPreview
|
||||
@image={{this.tag.twitterImage}}
|
||||
@text="Add Twitter image"
|
||||
@class="gh-tag-image-uploader"
|
||||
@allowUnsplash={{true}}
|
||||
@update={{action "setTwitterImage"}}
|
||||
@remove={{action "clearTwitterImage"}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterTitle">
|
||||
<label for="twitter-title">Twitter title</label>
|
||||
<GhTextInput
|
||||
@id="twitter-title"
|
||||
@name="twitterTitle"
|
||||
@placeholder={{this.scratchTag.name}}
|
||||
@tabindex="4"
|
||||
@value={{this.scratchTag.twitterTitle}}
|
||||
@focus-out={{action "setProperty" "twitterTitle" this.scratchTag.twitterTitle}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.tag.errors}} @property="twitterTitle" />
|
||||
<p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.twitterTitle 70}}</p>
|
||||
</GhFormGroup>
|
||||
<div class="gh-setting-content-extended">
|
||||
<div class="gh-twitter-settings">
|
||||
<div class="gh-twitter-settings-left flex-basis-1-2-m flex-basis-2-3-l">
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterImage">
|
||||
<label for="twitter-image">Twitter image</label>
|
||||
<GhImageUploaderWithPreview
|
||||
@image={{this.tag.twitterImage}}
|
||||
@text="Add Twitter image"
|
||||
@class="gh-tag-image-uploader"
|
||||
@allowUnsplash={{true}}
|
||||
@update={{action "setTwitterImage"}}
|
||||
@remove={{action "clearTwitterImage"}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterTitle">
|
||||
<label for="twitter-title">Twitter title</label>
|
||||
<GhTextInput
|
||||
@id="twitter-title"
|
||||
@name="twitterTitle"
|
||||
@placeholder={{this.scratchTag.name}}
|
||||
@tabindex="4"
|
||||
@value={{this.scratchTag.twitterTitle}}
|
||||
@focus-out={{action "setProperty" "twitterTitle" this.scratchTag.twitterTitle}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.tag.errors}} @property="twitterTitle" />
|
||||
<p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.twitterTitle 70}}</p>
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterDesctiption">
|
||||
<label for="twitter-description">Twitter description</label>
|
||||
<GhTextarea
|
||||
@id="twitter-description"
|
||||
@name="twitterDescription"
|
||||
@class="gh-tag-details-textarea"
|
||||
@placeholder={{this.scratchTag.description}}
|
||||
@tabindex="5"
|
||||
@value={{this.scratchTag.twitterDescription}}
|
||||
@focus-out={{action "setProperty" "twitterDescription" this.scratchTag.twitterDescription}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.tag.errors}} @property="twitterDescription" />
|
||||
<p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.twitterDescription 156}}</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="gh-main-section-block">
|
||||
<div class="form-group">
|
||||
<label>Preview</label>
|
||||
<div class="gh-twitter-preview">
|
||||
{{#if this.twitterImage}}
|
||||
<div class="gh-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>
|
||||
{{/if}}
|
||||
<div class="gh-twitter-preview-content">
|
||||
<div class="gh-twitter-preview-title">{{this.twitterTitle}}</div>
|
||||
<div class="gh-twitter-preview-description">{{truncate this.twitterDescription 155}}</div>
|
||||
<div class="gh-twitter-preview-footer">
|
||||
<div class="gh-twitter-preview-footer-left">
|
||||
{{this.config.blogDomain}}
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterDesctiption">
|
||||
<label for="twitter-description">Twitter description</label>
|
||||
<GhTextarea
|
||||
@id="twitter-description"
|
||||
@name="twitterDescription"
|
||||
@class="gh-tag-details-textarea"
|
||||
@placeholder={{this.scratchTag.description}}
|
||||
@tabindex="5"
|
||||
@value={{this.scratchTag.twitterDescription}}
|
||||
@focus-out={{action "setProperty" "twitterDescription" this.scratchTag.twitterDescription}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.tag.errors}} @property="twitterDescription" />
|
||||
<p>Recommended: <b>125</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.twitterDescription 125}}</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="flex-basis-1-2-m flex-basis-1-3-l">
|
||||
<label>Twitter preview</label>
|
||||
<div class="gh-twitter-container">
|
||||
<div class="flex ma4">
|
||||
<span>{{svg-jar "social-twitter" class="social-icon"}}</span>
|
||||
<div class="w-100">
|
||||
<span class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</span>
|
||||
<span class="gh-social-og-time">12 hrs</span>
|
||||
<div class="flex flex-column mt2 mb3">
|
||||
<span class="gh-social-og-desc w-100 mb2" />
|
||||
<span class="gh-social-og-desc w-60" />
|
||||
</div>
|
||||
<div class="gh-twitter-preview-footer-right">
|
||||
<div class="gh-social-twitter-post-preview">
|
||||
{{#if this.twitterImage}}
|
||||
<div class="gh-social-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>
|
||||
{{/if}}
|
||||
<div class="gh-social-twitter-preview-content">
|
||||
<div class="gh-social-twitter-preview-title">{{this.twitterTitle}}</div>
|
||||
<div class="gh-social-twitter-preview-desc">{{truncate this.twitterDescription}}</div>
|
||||
<div class="gh-social-twitter-preview-meta">
|
||||
{{svg-jar "twitter-link"}}
|
||||
{{this.config.blogDomain}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-social-twitter-reactions">
|
||||
<div class="flex items-center">{{svg-jar "twitter-comment"}}2</div>
|
||||
<div class="flex items-center">{{svg-jar "twitter-retweet"}}11</div>
|
||||
<div class="flex items-center">{{svg-jar "twitter-like"}}32</div>
|
||||
<div class="flex items-center">{{svg-jar "twitter-share"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -241,66 +263,80 @@
|
|||
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.facebookMetadataOpen}}
|
||||
<div class="gh-main-section columns-2">
|
||||
<div class="gh-main-section-block">
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogImage">
|
||||
<label for="og-image">Facebook image</label>
|
||||
<GhImageUploaderWithPreview
|
||||
@image={{this.tag.ogImage}}
|
||||
@text="Add Facebook image"
|
||||
@class="gh-tag-image-uploader"
|
||||
@allowUnsplash={{true}}
|
||||
@update={{action "setOgImage"}}
|
||||
@remove={{action "clearOgImage"}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
|
||||
<label for="og-title">Facebook title</label>
|
||||
<GhTextInput
|
||||
@id="og-title"
|
||||
@name="ogTitle"
|
||||
@placeholder={{this.scratchTag.name}}
|
||||
@tabindex="4"
|
||||
@value={{this.scratchTag.ogTitle}}
|
||||
@focus-out={{action "setProperty" "ogTitle" this.scratchTag.ogTitle}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.tag.errors}} @property="ogTitle" />
|
||||
<p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogTitle 70}}</p>
|
||||
</GhFormGroup>
|
||||
<div class="gh-setting-content-extended">
|
||||
<div class="gh-og-settings">
|
||||
<div class="gh-og-settings-left flex-basis-1-2-m flex-basis-2-3-l">
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogImage">
|
||||
<label for="og-image">Facebook image</label>
|
||||
<GhImageUploaderWithPreview
|
||||
@image={{this.tag.ogImage}}
|
||||
@text="Add Facebook image"
|
||||
@class="gh-tag-image-uploader"
|
||||
@allowUnsplash={{true}}
|
||||
@update={{action "setOgImage"}}
|
||||
@remove={{action "clearOgImage"}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
|
||||
<label for="og-title">Facebook title</label>
|
||||
<GhTextInput
|
||||
@id="og-title"
|
||||
@name="ogTitle"
|
||||
@placeholder={{this.scratchTag.name}}
|
||||
@tabindex="4"
|
||||
@value={{this.scratchTag.ogTitle}}
|
||||
@focus-out={{action "setProperty" "ogTitle" this.scratchTag.ogTitle}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.tag.errors}} @property="ogTitle" />
|
||||
<p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogTitle 70}}</p>
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogDescription">
|
||||
<label for="og-description">Facebook description</label>
|
||||
<GhTextarea
|
||||
@id="og-description"
|
||||
@name="ogDescription"
|
||||
@class="gh-tag-details-textarea"
|
||||
@placeholder={{this.scratchTag.description}}
|
||||
@tabindex="5"
|
||||
@value={{this.scratchTag.ogDescription}}
|
||||
@focus-out={{action "setProperty" "ogDescription" this.scratchTag.ogDescription}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.tag.errors}} @property="ogDescription" />
|
||||
<p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogDescription 156}}</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="gh-main-section-block">
|
||||
<div class="form-group">
|
||||
<label>Preview</label>
|
||||
<div class="gh-og-preview">
|
||||
{{#if this.facebookImage}}
|
||||
<div class="gh-og-preview-image" style={{background-image-style this.facebookImage}}></div>
|
||||
{{/if}}
|
||||
<div class="gh-og-preview-content">
|
||||
<div class="gh-og-preview-title">{{truncate this.facebookTitle 88}}</div>
|
||||
<div class="gh-og-preview-description">{{truncate this.facebookDescription 300}}</div>
|
||||
<div class="gh-og-preview-footer">
|
||||
<div class="gh-og-preview-footer-left">
|
||||
{{this.config.blogDomain}} <span class="gh-og-preview-footer-left-divider">|</span> by <span class="gh-og-preview-footer-author">{{author-names this.post.authors}}</span>
|
||||
</div>
|
||||
<div class="gh-og-preview-footer-right">
|
||||
</div>
|
||||
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogDescription">
|
||||
<label for="og-description">Facebook description</label>
|
||||
<GhTextarea
|
||||
@id="og-description"
|
||||
@name="ogDescription"
|
||||
@class="gh-tag-details-textarea"
|
||||
@placeholder={{this.scratchTag.description}}
|
||||
@tabindex="5"
|
||||
@value={{this.scratchTag.ogDescription}}
|
||||
@focus-out={{action "setProperty" "ogDescription" this.scratchTag.ogDescription}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.tag.errors}} @property="ogDescription" />
|
||||
<p>Recommended: <b>65</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogDescription 65}}</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<div class="flex-basis-1-2-m flex-basis-1-3-l">
|
||||
<label>Facebook preview</label>
|
||||
<div class="gh-og-container">
|
||||
<div class="flex ma3 mb2">
|
||||
<span>{{svg-jar "social-facebook" class="social-icon"}}</span>
|
||||
<div>
|
||||
<div class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</div>
|
||||
<div class="gh-social-og-time">12 hrs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column ma3 mt2">
|
||||
<span class="gh-social-og-desc w-100 mb2" />
|
||||
<span class="gh-social-og-desc w-60" />
|
||||
</div>
|
||||
<div class="gh-social-og-preview">
|
||||
{{#if this.facebookImage}}
|
||||
<div class="gh-social-og-preview-image" style={{background-image-style this.facebookImage}}></div>
|
||||
{{/if}}
|
||||
<div class="gh-social-og-preview-content">
|
||||
<div class="gh-social-og-preview-meta">
|
||||
{{this.config.blogDomain}}
|
||||
</div>
|
||||
<div class="gh-social-og-preview-title">{{truncate this.facebookTitle 88}}</div>
|
||||
<div class="gh-social-og-preview-desc">{{truncate this.facebookDescription}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-social-og-reactions">
|
||||
<span class="gh-social-og-likes">{{svg-jar "facebook-like" class="z-999"}}{{svg-jar "facebook-heart" class="nl1"}}182</span>
|
||||
<span class="gh-social-og-comments">7 comments</span>
|
||||
<span class="gh-social-og-comments ml2">2 shares</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -530,18 +530,26 @@
|
|||
.gh-seo-settings .form-group {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gh-seo-settings-left,
|
||||
.gh-seo-container {
|
||||
max-width: 591px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1360px) {
|
||||
.gh-seo-settings-left {
|
||||
margin-right: 2.4rem;
|
||||
}
|
||||
|
||||
.gh-seo-container {
|
||||
max-width: 1091px;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-seo-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1091px;
|
||||
margin-bottom: 2.4rem;
|
||||
padding: 20px 30px 16px;
|
||||
border: 1px solid var(--whitegrey);
|
||||
|
|
@ -567,6 +575,10 @@
|
|||
.gh-twitter-settings .form-group {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gh-twitter-settings-left {
|
||||
max-width: 591px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1360px) {
|
||||
|
|
@ -601,6 +613,10 @@
|
|||
.gh-og-settings .form-group {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gh-og-settings-left {
|
||||
max-width: 591px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1360px) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue