TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 13:54:35 +03:00
Code Issues Projects Releases Wiki Activity

Hid Facebook description when title exceeds single line in all social media previews

Browse Source
This commit is contained in:
Sanne de Vries 2021-03-02 13:24:54 +01:00
parent 8403bf9b49
commit 2ec9383bdd
5 changed files with 71 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ghost/admin/app/components/gh-post-settings-menu.hbs
View File

@ -376,12 +376,15 @@
{{#if this.facebookImage}} {{#if this.facebookImage}}
<div class="gh-social-og-preview-image" style={{background-image-style this.facebookImage}}></div> <div class="gh-social-og-preview-image" style={{background-image-style this.facebookImage}}></div>
{{/if}} {{/if}}
<div class="gh-social-og-preview-content"> <div class="gh-social-og-preview-bookmark">
<div class="gh-social-og-preview-meta"> {{!-- Ensures description is hidden if title exceeds one line --}}
{{this.config.blogDomain}} <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}}</div>
<div class="gh-social-og-preview-desc">{{truncate this.facebookDescription}}</div>
</div> </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> </div>
</div> </div>

15
ghost/admin/app/components/gh-tag-settings-form.hbs
View File

@ -288,7 +288,7 @@
@focus-out={{action "setProperty" "ogTitle" this.scratchTag.ogTitle}} @focus-out={{action "setProperty" "ogTitle" this.scratchTag.ogTitle}}
/> />
<GhErrorMessage @errors={{this.tag.errors}} @property="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> <p>Recommended: <b>100</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogTitle 100}}</p>
</GhFormGroup> </GhFormGroup>
<GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogDescription"> <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogDescription">
@ -324,12 +324,15 @@
{{#if this.facebookImage}} {{#if this.facebookImage}}
<div class="gh-social-og-preview-image" style={{background-image-style this.facebookImage}}></div> <div class="gh-social-og-preview-image" style={{background-image-style this.facebookImage}}></div>
{{/if}} {{/if}}
<div class="gh-social-og-preview-content"> <div class="gh-social-og-preview-bookmark">
<div class="gh-social-og-preview-meta"> {{!-- Ensures description is hidden if title exceeds one line --}}
{{this.config.blogDomain}} <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}}</div>
<div class="gh-social-og-preview-desc">{{truncate this.facebookDescription}}</div>
</div> </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> </div>
<div class="gh-social-og-reactions"> <div class="gh-social-og-reactions">

77
ghost/admin/app/components/modal-post-preview/social.hbs
View File

@ -60,44 +60,47 @@
</div> </div>
</GhUploader> </GhUploader>
<div class="gh-social-og-preview-content"> <div class="gh-social-og-preview-bookmark">
<div class="gh-social-og-preview-meta"> {{!-- Ensures description is hidden if title exceeds one line --}}
{{this.config.blogDomain}} <div class="gh-social-og-preview-content">
<div class="gh-social-og-preview-meta">
{{this.config.blogDomain}}
</div>
{{#if this.editingFacebookTitle}}
<input
type="text"
class="gh-input"
value={{@post.ogTitle}}
maxlength="300"
title="Facebook title"
{{on "blur" this.setFacebookTitle}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "ogTitle")}}
{{autofocus}}
data-prevent-escape-close-modal="true"
/>
{{else}}
<div class="gh-social-og-preview-title editable">
<span class="pointer" {{on "click" this.editFacebookTitle}}>{{truncate this.facebookTitle}}</span>
</div>
{{/if}}
{{#if this.editingFacebookDescription}}
<textarea
class="gh-input"
maxlength="500"
title="Facebook description"
{{on "blur" this.setFacebookDescription}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "ogDescription")}}
{{autofocus}}
data-prevent-escape-close-modal="true"
>{{@post.ogDescription}}</textarea>
{{else}}
<div class="gh-social-og-preview-desc editable">
<span class="pointer" {{on "click" this.editFacebookDescription}}>{{truncate this.facebookDescription}}</span>
</div>
{{/if}}
</div> </div>
{{#if this.editingFacebookTitle}}
<input
type="text"
class="gh-input"
value={{@post.ogTitle}}
maxlength="300"
title="Facebook title"
{{on "blur" this.setFacebookTitle}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "ogTitle")}}
{{autofocus}}
data-prevent-escape-close-modal="true"
/>
{{else}}
<div class="gh-social-og-preview-title editable">
<span class="pointer" {{on "click" this.editFacebookTitle}}>{{truncate this.facebookTitle 88}}</span>
</div>
{{/if}}
{{#if this.editingFacebookDescription}}
<textarea
class="gh-input"
maxlength="500"
title="Facebook description"
{{on "blur" this.setFacebookDescription}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "ogDescription")}}
{{autofocus}}
data-prevent-escape-close-modal="true"
>{{@post.ogDescription}}</textarea>
{{else}}
<div class="gh-social-og-preview-desc editable">
<span class="pointer" {{on "click" this.editFacebookDescription}}>{{truncate this.facebookDescription}}</span>
</div>
{{/if}}
</div> </div>
</div> </div>
<div class="gh-social-og-reactions"> <div class="gh-social-og-reactions">

7
ghost/admin/app/styles/layouts/post-preview.css
View File

@ -291,11 +291,16 @@
border: 1px dashed var(--lightgrey-d1); border: 1px dashed var(--lightgrey-d1);
} }
.gh-social-og-preview-content { .gh-social-og-preview-bookmark {
padding: 10px 12px; padding: 10px 12px;
border-bottom: 1px solid #dddfe2; border-bottom: 1px solid #dddfe2;
} }
.gh-social-og-preview-content {
height: 66px;
overflow: hidden;
}
.gh-social-og-preview-meta { .gh-social-og-preview-meta {
overflow: hidden; overflow: hidden;
color: #606770; color: #606770;

13
ghost/admin/app/templates/settings/general.hbs
View File

@ -324,12 +324,15 @@
{{#if this.settings.ogImage}} {{#if this.settings.ogImage}}
<div class="gh-social-og-preview-image" style={{background-image-style this.settings.ogImage}}></div> <div class="gh-social-og-preview-image" style={{background-image-style this.settings.ogImage}}></div>
{{/if}} {{/if}}
<div class="gh-social-og-preview-content"> <div class="gh-social-og-preview-bookmark">
<div class="gh-social-og-preview-meta"> {{!-- Ensures description is hidden if title exceeds one line --}}
{{this.config.blogDomain}} <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 (or this.settings.ogTitle this.settings.title)}}</div>
<div class="gh-social-og-preview-desc">{{truncate (or this.settings.ogDescription this.settings.description)}}</div>
</div> </div>
<div class="gh-social-og-preview-title">{{truncate (or this.settings.ogTitle this.settings.title) 88}}</div>
<div class="gh-social-og-preview-desc">{{truncate (or this.settings.ogDescription this.settings.description)}}</div>
</div> </div>
</div> </div>
<div class="gh-social-og-reactions"> <div class="gh-social-og-reactions">