Allow links in blog description

[mattsonier]

I would like to be able to add links to the blog description. For example: "I work at [link]"

Maybe support markdown for the description or just allow raw HTML for now.

[riccardobevilacqua]

I found a workaround to handle raw HTML at the moment, I'd like to develop a proper solution. This workaround can be applied with Ghost up and running. Steps:

1. Open with your favourite editor index.hbs file located in your theme folder (casper if you use default theme)
2. Edit the following line adding extra curly brackets Old: <h2 class="blog-description">{{@blog.description}}</h2> New: <h2 class="blog-description">{{{@blog.description}}}</h2>
3. In Ghost admin, edit your blog description with raw HTML (careful, use single quotes instead of double quotes to avoid templating issues, they will be turned into double quotes in your rendered index blog page)

[JohnONolan]

^ Not technically a workaround. That's actually exactly how handlebars works. {{{raw}}} vs {{sanitised}} - so your theme can define the formatting of your content (as it should).

In some places that makes sense, eg. it makes sense for a theme to choose whether a user bio supports formatting or not.

In some areas it doesn't make sense - I would argue this is one of them - the blog.description should always be output in the same way. I agree, with support for basic formatting and links.

I would suggest we allow Markdown (and by that nature, HTML) in both user.bio and blog.description. This means the fields should be sanitised on save to handle quotes properly.

On output I suggest we enforce html output to always be possible on {{@blog.description}} - regardless of what the theme author chooses.

On output I suggest we allow the theme author to choose whether or not to output html user bios by using either {{user.bio}} (no html) or {{{user.bio}}} (with html)

[alicoding]

+1 for having it as Markdown support since the bio only support 200 characters and having Markup in there will take almost half of its limit.

[riccardobevilacqua]

I completely agree, @JohnONolan

2013/11/28 JohnONolan notifications@github.com

^ Not technically a workaround. That's actually exactly how handlebars works. {{{raw}}} vs {{sanitised}} - so your theme can define the formatting of your content (as it should).

In some places that makes sense, eg. it makes sense for a theme to choose whether a user bio supports formatting or not.

In some areas it doesn't make sense - I would argue this is one of them - the blog.description should always be output in the same way. I agree, with support for basic formatting and links.

I would suggest we allow Markdown (and by that nature, HTML) in both user.bio and blog.description. This means the fields should be sanitised on save to handle quotes properly.

On output I suggest we enforce html output to always be possible on {{@blog.description}} - regardless of what the theme author chooses.

On output I suggest we allow the theme author to choose whether or not to output html bios by using either {{user.bio}} (no html) or {{{user.bio}}}(with html)

— Reply to this email directly or view it on GitHubhttps://github.com/TryGhost/Ghost/issues/1517#issuecomment-29458541 .

[riccardobevilacqua]

Developing markdown support to blog description. I'll prepare a PR soon.

[alicoding]

@riccardobevilacqua It would be awesome to have it on Author bio as well :D

[ErisDS]

Markdown support for these fields is not straight forward.

For the editor, we store both what the user entered (markdown) and the converted HTML. When outputting to a theme, we then don't have to do a big conversion - we just serve the HTML.

We don't want to have to store 2 copies of each of these fields though - we need to store whatever the user entered so we can show it to them again later, and we need to convert to HTML on the way out to the theme.

Ideally, this is a feature of the model as it applies to specific fields, but it needs to happen on the way out, not the way in, and only when we're sure we're sending the data to theme, not to the admin to be edited. At the moment, this is done via the blogGlobals in ghost.js... which is possibly the only place this could be done right now? Kind of a pain as we're currently trying to move things out of there.

[riccardobevilacqua]

I developed a solution involving these files:

• /core/ghost.js
• /core/server/helpers/index.js

(Source here: https://github.com/riccardobevilacqua/Ghost/commit/dbc75348a574437f87fe0f395293c4f7f575c3b2)

In ghost.js I added markdown support for blog description. In index.js:

• I added a descriptionHtml helper, it can be used in Casper replacing {{@blog.description}} with {{descriptionHtml}} (still sanitised, not raw)
• I had to modify meta_description in order to remove html tags.

This solution might not be final, but I guess it's headed in the right direction. What do you think?

EDIT1 Commit moved to proper branch and updated link in this post

EDIT2 Grunt validate, commit: https://github.com/riccardobevilacqua/Ghost/commit/1d23a1b5ebcd9c158e6d9bda058bdbde733ca0d8

[riccardobevilacqua]

I replaced descriptionHtml with html helper, more generic (commit: fe3482677afe75e7680c3a30b2bd0ea5a7cc664c). In index.hbs, now you can use {{html @blog.description}} instead of {{descriptionHtml}} .

[riccardobevilacqua]

Due to issue #1630 I refactored my code (commit to new branch here: d5a3fd1710b006ee7afc71905eafb558ae4f2e4b).

I simply added a markdown helper to allow markdown parsing in hbs, e.g. {{markdown @blog.description}}. No blog core configurations were harmed in the making of this commit.

Would it be good for a pull request, @ErisDS?

[airandfingers]

Looks like your PR was never merged in; @ricardobeat, did you ever find a way to link to URLs in your blog description?

[tbergeron]

Still no html or markdown support for the description field?

[JohnONolan]

Blog description is intended as a simple piece of descriptive text - not a rich text area. Despite this, there are still ways of achieving the desired result (outlined above) - as well as the potential for apps to implement modified behaviour in future.

[ErisDS]

For anyone else reading this and trying to follow along - if you want to use HTML in your blog description field you can, but you need to update your theme to use triple-{'s so that the HTML does not get escaped:

{{{@blog.description}}} rather than {{@blog.description}}

[IanMitchell]

While I agree that the majority of Markdown would be out of place here, I think that links are appropriate. The blog description is a perfect launching point for static pages and offsite profiles. For instance:

Hi, I'm Ian. Read more [About Me](static page) or visit my [GitHub Profile](link).

The above seems like a natural fit for a blog description, while also being inline with the ideal of it being a 'simple piece of descriptive text'. Excessive formatting shouldn't be allowed, but minimal support for things such as links allows it to serve a purpose. Where else would you naturally link a static About page? Themes such as Casper don't have an obvious alternative at the moment.

In the future apps might be able to do this better, but at present it's a pain point. I think a better workaround than editing the theme's code would be to allow Markdown, or a subset of it, until a better solution is implemented.

[tbergeron]

Glad to see I'm not the only one having gripes about tweaking the templates to add links.

• Templates will get overwritten whenever I upgrade (I use Casper theme)
• IMO content goes in the database, and a blog description is content
• It's something even big platforms like Twitter does (not markdown support but link support right in profile description, etc)

Please think again about it, I really believe this would be the right way of implementing it but that's my two cents though.

[JohnONolan]

I have no issue with autolinking URLs - it's allowing markdown or html that's a bit more complex

[IanMitchell]

What about a custom Markdown filter that only allows linking? Since the bio is relatively small, I can't imagine running a Markdown link filter on each index pageview would result in much of an impact. It gives the user a bit more control than autolinking does, while still adhering to the ideals of not being rich text. It also wouldn't require modification of the table structure, which would be nice.

That said, I don't know how hard this would be to code. I'm not sure if it would be easy to plug a single Markdown filter in with how the codebase is structured.

[hannawallach]

The links that result from {{{@blog.description}}} work fine on my computer (Linux w/ Chrome & Firefox, also tested on Windows w/ IE) but they do not work on my cell phone (Android w/ Chrome). Any idea why this might be the case? (Likely related: the bouncing arrow icon does not appear either.)

[hannawallach]

Oh and the site in question is here.

[novaugust]

Hi @hannawallach, this issue's regarding something a bit different from what your issue is. Additionally, we use github for more development oriented issues, as opposed to environment troubleshooting You may want to seek help over on the Ghost forum (as a quick note, we serve the same html regardless of form factor / device. you just have some z-index problems that are putting an element over your link, making it unclickable)

[hannawallach]

Hi Matt, thanks for your quick reply! I guess I wasn't clear: My point was that if I simply do as suggested above (i.e., changing {{@blog.description}} to {{{@blog.description}}} in index.hbs) then even when using the default Casper theme, I run into these z-index issues. If this (i.e., changing {{@blog.description}} to {{{@blog.description}}} in index.hbs) is the best way to include links in the blog description (as indicated by this thread) then it would be great if I didn't encounter these z-index issues with the default theme (which, I think, is a developer issue?) or if there was something in this thread (i.e., one of the first things that shows up on Google when searching for adding links to the blog description) indicating how one can address them.

[novaugust]

Ah, in that case, that's an issue with casper, which is over at tryghost/casper, and is absolutely something that belongs on github :D Actually to be fair, if you changed your @blog.description to use the triple curlies, it's not the default theme anymore, and so still not an issue with casper.

Still, as a quick hack (I'm not much of a CSS designer), you can add this to your screen.css

.main-header-content .page-description {
  z-index: 1;
  position: relative;
}

[ChristopherA]

I tried substituting {{{bio}}} for {{bio}} in my theme, which didn't work, resulting in just plain text for the html in my bio. Then tried using {{{user.bio}}} for {{bio}} results in no text shown at all (blank).