Add post cover image

[seanichol]

Is this possible now with the release of Ghost 0.4?

[roycehaynes]

@seanichol - looking at the v0.4 features in detail, it doesn't look like it. I'm on a boat (literally) until thursday, so I'll see what I can do when I get back.

[roycehaynes]

@seanichol - doesn't look like this is possible with Ghost 0.4. My theme supports cover images for a single post but need to figure out a crafty way to do this without Ghost.

[marionzualo]

@roycehaynes I saw a post cover image in your blog. How can I do that? Do I have to manually alter a file to include an image? Thanks for the theme!

[roycehaynes]

@marionzualo - Its not yet supported in the theme. I'm hoping I can implement a fix this weekend. I'll close a ticket out and put out a new release when this is complete.

[meetyan]

@roycehaynes Is it possible to tell us the crafty way to add cover images? Thanks.

[benstr]

+1

[roycehaynes]

I'll push this tonight after work. Sorry guys :(

[taklo]

Is it possible now?

[citrusmorbidus]

Hi, i was trying to find a way to do this and I found a post that helpme. http://howtoghost.net/use-different-cover-pic-different-post-ghost/

I put this js inside the app.js file of the theme:

// Cover image of the header var $postImage = $('.cover-image'); if ( $postImage.length ) { var postImageURL = $postImage.attr('src'); $('.art-header').css('background-image','url(' + postImageURL + ')'); } $postImage.remove();

put this code in the header before the class "art-header" in the post.hbs file of the theme: {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}

Then I have to add an image in the post with the src tag and everything and put the class "image-cover".

post.hbs http://pastebin.com/cAGkLzsh app.js http://pastebin.com/6KN4GfxD

Hope this help, is not fancy but it works.

[taklo]

Thanks!!!

On Wednesday, April 23, 2014, citrusmorbidus notifications@github.com wrote:

Hi, i was trying to find a way to do this and I found a post that helpme. http://howtoghost.net/use-different-cover-pic-different-post-ghost/

I put this js inside the app.js file of the theme:

// Cover image of the header var $postImage = $('.cover-image'); if ( $postImage.length ) { var postImageURL = $postImage.attr('src'); $('.art-header').css('background-image','url(' + postImageURL + ')'); } $postImage.remove();

and this line of code in the post.hbs file of the theme:

Then I have to add an image in the post with the src tag and everything and put the class "image-cover".

Hope this help.

Reply to this email directly or view it on GitHubhttps://github.com/roycehaynes/rollsroyce/issues/2#issuecomment-41122635 .

Sent while catching the Tube

m: 07872 519 929 b: http://taklo.co t: @tak_lo

[kianlavi]

+1 for this Royce! Any updates? Let us know how we can help

[kianlavi]

@citrusmorbidus Wow! This works excellently, thanks so much for the advice. PS You made a typo, the class used for the cover image isn't "image-cover", it's "cover-image". I was scratching my head on that one for a few minutes.

[roycehaynes]

@kianlavi - Did you get it working with the hack? I haven't had much time to post a hack for this. Just FYI, I'm no longer using ghost for my personal site. I ported the theme to a static generator tool I use, which allowed me to place logic for things like the cover image, subtitle etc.

[kianlavi]

@roycehaynes I did in fact get it working. If you follow @citrusmorbidus's instructions, you can add an with class "cover-image" and it'll replace the cover image with whatever image you link.

Royce, is there anyway you can share what you used for your logic anyways? Some of us might be able to port it back to Ghost

[kianlavi]

Also, are you planning on updating it anymore? If not, I can just fork yours and make a new one that we can update

[roycehaynes]

Snippet of code from the static generator. The

tag is what you want to look at.

<article class="art simple">
<header class="art-header{% if article.style == 'white' %} white{% endif %}" style="{% if article.image %}background-image: url({{ SITEURL }}/images/{{ article.image }});{% endif %}" >
<div class="art-header-inner" style="margin-top: 0px; opacity: 1;">
<time class="art-time">{{ article.date | strftime('%B %d, %Y') }}</time>
<h2 class="art-title">{{ article.title }}</h2>
<p class="art-subtitle">{{ article.subtitle }}</p>
</div>
</header>
<div class="art-body">
<div class="art-body-inner">
{{ article.content }}
</div>
</div>
</article>

[roycehaynes]

@kianlavi - Just sent pull requests and I'll be sure to migrate them.

[omfgitsasalmon]

I made it easier for direct integration rather than to change the class, you can directly set it via markdown using the alt.

use this instead.

// Cover image of the header //var $postImage = $('.cover-image'); var $postImage = $('img[alt="cover-image"]'); if ( $postImage.length ) { var postImageURL = $postImage.attr('src'); $('.art-header').css('background-image','url(' + postImageURL + ')'); } $postImage.remove();

e.g. ![cover-image](/content/images/2014/Jul/wallpaper-377167-1.jpg)

This will set the image as a cover image. Of course, you can change the alt="cover-image" to anything you wish via the app.js

[kianlavi]

@omfgitsasalmon You are incredible. Thank you

[omfgitsasalmon]

@citrusmorbidus @kianlavi @roycehaynes

I have forked this theme over at bitbucket and with permission from Royce, I'm posting it here.

http://bitbucket.caffein8.com/bentley

I have since implemented:

1. Cover Photos
2. Subtitles
3. Pagination
4. Featured Articles
5. Cleaner, more "medium-like" typography (WIP)
6. A better looking <code> support

Take a look at my style guide to see demonstration.

Feel free to fork / add issues for things you want / need over at my bitbucket.

Cheers! Alson