Protip: Want to get help faster? Chat with Ghost users and developers in real-time on our Slack team.

The Ghost Blogging Support Forum

Suggestion - Image & Video captioning

Hwee Posted at 06:40 on 10 October 2013 1

Hi Team,

Can we see if we can implement a captioning system? Currently we have the image alt description, I found one solution that might help.

See http://steforce.oin.name/read/automatic_captions.html

Include in page master:

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/my_secret_script.js"></script>

Generate script:

$(document).ready(function() {
// Every image referenced from a Markdown document
$(".markdown img").each(function() {
// Let's put a caption if there is one
if($(this).attr("alt"))
$(this).wrap('<figure class="image"></figure>')
.after('<figcaption>'+$(this).attr("alt")+'</figcaption>');
});
});

What do you think?

Legobot Posted at 07:39 on 10 October 2013 2

I quite like that! Seconded.

Matt Posted at 09:40 on 10 October 2013 3

This sounds very much like plugin territory. Once the plugin documentation is released, it should be an easy job to implement.

– Matt

Hwee Posted at 12:35 on 13 October 2013 4

Cheers for the response + clarification Matt :)

rgruyters Posted at 13:53 on 14 November 2013 5

Too bad that Markdown doesn't have the ability to add captions. Hope that in future release of Ghost this will be included.

Starburst1977 Posted at 08:41 on 11 April 2014 6

Looks nice and goes in the right direction. But I would need figcaption's to contain links to, sometimes. To attribute photo credits, for example.

Penderworth Posted at 19:45 on 05 May 2014 8

How did you implement this, Starburst1977? I just tried on my site (http://penderworth.com) and couldn't get it to work with those scripts in default.hbs.

Starburst1977 Posted at 20:30 on 05 May 2014 9

@penderworth Not sure, but your image HTML looks broken. It's alt tag is missing the alt="random text", instead has some broken code. Probably because you tried to enter HTML characters or something into the alt tag. You can only use plain text.

HoddzDJ Posted at 15:37 on 13 May 2014 10

Hey all,

I would love to be able to get this on my blog, however I can't seem to figure out where to put what.

Any help would be greatly appreciated!!

Regards, Ben Hodder.

Tired of managing servers? Save yourself time and money with Ghost(Pro)

Find out more