mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-03 03:55:26 +03:00
9fcf3cce9d
refs https://github.com/TryGhost/Team/issues/459 - re-use bookmark card styling - approximate the data grabbed by metascraper (used when generating bookmark card contents) based on saved post data
77 lines
4.0 KiB
Handlebars
77 lines
4.0 KiB
Handlebars
|
|
<div class="gh-post-preview-social-container">
|
|
<div class="flex flex-column">
|
|
<div class="flex mw-m mb8">
|
|
<div class="flex flex-column pr4">
|
|
<label class="mb2 f8 fw6 darkgrey">Facebook 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 @post.authors}}</span>
|
|
</div>
|
|
<div class="gh-og-preview-footer-right">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-column pl4">
|
|
<label class="mb2 f8 fw6 darkgrey">Twitter 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}}
|
|
</div>
|
|
<div class="gh-twitter-preview-footer-right">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<label class="mb2 f8 fw6 darkgrey">Search Engine Result Preview</label>
|
|
<div class="mw-m seo-preview mb6">
|
|
<div class="seo-preview-title">{{truncate this.serpTitle 70}}</div>
|
|
<div class="seo-preview-link">{{truncate this.serpURL 70}}</div>
|
|
<div class="seo-preview-description">{{truncate this.serpDescription 300}}</div>
|
|
</div>
|
|
|
|
<label class="mb2 f8 fw6 darkgrey">Generic embed preview</label>
|
|
<div class="kg-bookmark-card">
|
|
<div class="kg-bookmark-container">
|
|
<div class="kg-bookmark-content">
|
|
<div class="kg-bookmark-title">{{@post.title}}</div>
|
|
<div class="kg-bookmark-description">{{or @post.metaDescription @post.customExcerpt (truncate @post.excerpt 250)}}</div>
|
|
<div class="kg-bookmark-metadata">
|
|
{{#if this.settings.icon}}
|
|
<div class="kg-bookmark-icon"><img src={{this.settings.icon}}></div>
|
|
{{/if}}
|
|
<div class="kg-bookmark-publisher">{{or this.settings.metaTitle this.settings.title}}</div>
|
|
<div class="kg-bookmark-author">{{@post.primaryAuthor.name}}</div>
|
|
</div>
|
|
</div>
|
|
{{#let (or @post.featureImage @post.primaryAuthor.profileImage) as |image|}}
|
|
{{#if image}}
|
|
<div class="kg-bookmark-thumbnail">
|
|
<img src={{image}}>
|
|
</div>
|
|
{{/if}}
|
|
{{/let}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |