Instantly share code, notes, and snippets.
-
Save SylarRuby/9851b73c1c6d50b2880097923f0eb9c1 to your computer and use it in GitHub Desktop.
Ghost Post Page with Feature Image At Top
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{!< default}} | |
<!-- Move style into a stylesheet or inside the site header code injection --> | |
<style> | |
.article { | |
padding: 0; | |
} | |
figure.article-image { | |
margin-bottom: 3em; | |
} | |
figure.article-image > img { | |
width: 100%; | |
object-fit: cover; | |
max-height: 565px; | |
} | |
</style> | |
{{!-- The tag above means: insert everything in this file | |
into the {body} tag of the default.hbs template --}} | |
{{#post}} | |
{{!-- Everything inside the #post block pulls data from the post --}} | |
<article class="article {{post_class}}"> | |
{{#if feature_image}} | |
<figure class="article-image"> | |
{{!-- This is a responsive image, it loads different sizes depending on device | |
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} | |
<img | |
srcset="{{img_url feature_image size="s"}} 300w, | |
{{img_url feature_image size="m"}} 600w, | |
{{img_url feature_image size="l"}} 1000w, | |
{{img_url feature_image size="xl"}} 2000w" | |
sizes="(min-width: 1400px) 1400px, 92vw" | |
src="{{img_url feature_image size="xl"}}" | |
alt="{{title}}" | |
/> | |
</figure> | |
{{/if}} | |
<header class="article-header gh-canvas"> | |
{{#if primary_tag}} | |
<section class="article-tag"> | |
<a href="{{primary_tag.url}}">{{primary_tag.name}}</a> | |
</section> | |
{{/if}} | |
<h1 class="article-title">{{title}}</h1> | |
{{#if custom_excerpt}} | |
<p class="article-excerpt">{{custom_excerpt}}</p> | |
{{/if}} | |
<div class="article-byline"> | |
<section class="article-byline-content"> | |
<ul class="author-list"> | |
{{#foreach authors}} | |
<li class="author-list-item"> | |
{{#if profile_image}} | |
<a href="{{url}}" class="author-avatar"> | |
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" /> | |
</a> | |
{{else}} | |
<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a> | |
{{/if}} | |
</li> | |
{{/foreach}} | |
</ul> | |
<div class="article-byline-meta"> | |
<h4 class="author-name">{{authors}}</h4> | |
<div class="byline-meta-content"> | |
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> | |
<span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span> | |
</div> | |
</div> | |
</section> | |
</div> | |
</header> | |
<section class="gh-content gh-canvas"> | |
{{content}} | |
</section> | |
{{!-- | |
<section class="article-comments gh-canvas"> | |
If you want to embed comments, this is a good place to paste your code! | |
</section> | |
--}} | |
</article> | |
{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}} | |
{{#unless @member}} | |
<section class="footer-cta"> | |
<div class="inner"> | |
<h2>Sign up for more like this.</h2> | |
<a class="footer-cta-button" href="#/portal"> | |
<div>Enter your email</div> | |
<span>Subscribe</span> | |
</a> | |
{{!-- ^ This looks like a form element, but it's just a link to Portal, | |
making the form validation and submission much simpler. --}} | |
</div> | |
</section> | |
{{/unless}} | |
{{!-- Read more links, just above the footer --}} | |
<aside class="read-more-wrap"> | |
<div class="read-more inner"> | |
{{!-- The {#get} helper below fetches some of the latest posts here | |
so that people have something else to read when they finish this one. | |
This query gets the latest 3 posts on the site, but adds a filter to | |
exclude the post we're currently on from being included. --}} | |
{{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}} | |
{{#if more_posts}} | |
{{#foreach more_posts}} | |
{{> "post-card"}} | |
{{/foreach}} | |
{{/if}} | |
{{/get}} | |
</div> | |
</aside> | |
{{/post}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment