Captions in the img tag

[tedkulp]

I really like the idea of having a caption under your image as opposed to just having the title show up when you hover over. I started playing around with a really hacked up version of this, but I liked the results so I'm going with it for now.

See: https://github.com/tedkulp/octopress/commit/6ca8f3845257864e6ae35d16266f1e9ceb1e85fe

The interesting bit is that since the img tag itself is styled with the drop shadow, I had to write a mixin to cancel that out if it had a particular class. The other thing was that I just wrote it as a separate plugin for now, because I wasn't sure of the best way to handle it while still keeping backwards compat. I hate the idea of outputting too much html from a plugin -- so this definitely doesn't follow my own rules.

This can be refactored 1000 ways from here to Sunday, but I figured I'd show my work to see if it was a good jumping off point or not.

EDIT: Sample output: http://tedkulp.com/2011/08/29/standing-desk-switch/

[jordanlev]

Hello, I just started using Octopress and this was my first issue I thought of -- great idea! I do see a problem on that sample blog post you linked to though -- the caption border is the entire width of the column, but the image only takes up part of that space (so there's all this extra empty space between the right edge of the picture and the surrounding white border). You could fix this by putting "float: left;" on the .caption-wrapper div, and then adding a non-semantic clearing div after it (<div style="clear: both;"></div>). Maybe there's a more semantic way to do it, I dunno. (I also am not familiar enough with git to know how to take your commit and modify it as my own commit... sorry).

[jordanlev]

One more thing -- might want to make the "title" tag on the image optional -- some people don't like having the title tag because browsers show it as a tooltip, which isn't necessary if there's a caption beneath (and it is annoying to some people).

PS - I just realized you're the CMS Made Simple guy -- my first CMS love (the system, not you -- although I'm sure you're great)!

[tedkulp]

Yup, that's me. Are you trying to say I'm not lovable, too? ;)

Wow, browser testing fail. My window must've just been the right size, because it looked perfect on my screen. However, when I shrunk the text after reading your comment, I immediately saw it. Found a good solution for it here: http://stackoverflow.com/questions/450903/make-css-div-width-equal-to-contents Did a quick test in Chrome's dev tools and it looks correct, so I'll put it into the real code in a little bit and see how it looks.

As far as pulling a single commit like that, you could use git cherry-pick if you have the remote setup, or you can create a diff and git patch it. Github is nice, because you just toss a .diff on the end of the url and it'll generate it for you. (i.e. https://github.com/tedkulp/octopress/commit/6ca8f3845257864e6ae35d16266f1e9ceb1e85fe.diff)

What I'll do, however, is pop these into their own branch so they're easy to grab until we figure out if this is mainline worthy or not. I'm not sure if the separate plugin is the way to go, but I definitely am digging the functionality.

[imathis]

Hi Guys, thanks for posting this. @tedkulp That looks really nice.

I actually did quite a lot of work adding a <figure>/<figcaption> plugin to Octopress for nice semantic image captions. BUT right now there aren't any markdown processors that have support for HTML5 elements and so they end up wrapping all <figcaption>s in <p> tags. The only way to prevent that (that I can discern) is to wrap them first in a <div> and then Markdown processors ignore them. Obviously that doesn't work so well, since I can't style the <figure> without also styling the unnecessary wrapping <div>. I ended up punting (in a state of fury) and created the img plugin instead.

I'm hoping RDiscount will be updated to support HTML5 soon, and then I'll add back the plugin. Until then, I'm not sure if I want to do image captions like this. I'm still considering it though. You have done some really nice work here.

[tedkulp]

Interesting. I'll be honest that I really don't know a lot about html5 yet. Laziness on my part. That being said, I can see two potential workaround for this issue.

1. Test switching over from RDiscount to Redcarpet. I did some quick looking through the code for the C library it wraps, and it looks like figure is on the list of tags to ignore. I didn't go any further to test that assumption, though. I'm not totally sure how hard it is to switch out Jekyll to use this. It may already do it for all I know. EDIT: It does support Redcarpet already -- just a change in the config file.
2. Take a look at my post_filters plugin (https://github.com/tedkulp/octopress/blob/master/plugins/post_filters.rb). It basically monkey-patches in some hooks directly into Jekyll to allow you to do filtering pre-render, post-render and post-write. You could make it so that the div that's created is filtered back out after the Markdown is rendered to html.

[imathis]

1. I took a look at using Redcarpet and I had the same problem there too. I'll give it a try again though.
2. I've really been wanting filters like these. I'm not much of a rubyist, so some of that code is a bit of a mystery to me. If you could add some documentation, I'd love to use it in Octopress.

[jordanlev]

@tedkulp , A little off-topic here, but I found chapter 3 of "Dive Into HTML 5" to be a great introduction to what the new tags in html5 mean and how to use them: http://diveintohtml5.org/semantics.html

[tedkulp]

I've added the documentation for the post_filters plugin (https://github.com/tedkulp/octopress/blob/master/plugins/post_filters.rb). I'll be the first to admit that it's a bit hackish to monkey-patch some stuff, but I think it's better than relying a forked version of Jekyll (which is what I used to do). I think it's fairly clean, though I'd love to have another rubyist better than me give it a look-see to make sure.

If you do get a chance to mess with Redcarpet, I'd love to hear the results.

[tedkulp]

@jordanlev Cool, thank you. I'll check it out -- I've been putting off getting up to speed on this stuff for too long.

[imathis]

@tedkulp lovely work, I cannot wait to add this to Octopress. It's going to really help me improve the plugins.

[imathis]

@tedkulp, as I look at this more, it seems you've taken care of the post class, but this plugin won't intercept pages. I'd love a version of this which would handle posts and pages.

[tedkulp]

Let me do that now. I think I just have to move a couple of things around to make it work.

[tedkulp]

Ok, I've made it work. I did, however, have to make a bit of a decision. Things like Category pages (or Tag pages in my case) are also basically a subclass of Page and will get run through the filters by this change as well. However, I put in code so that only pure Pages or Posts get filtered and not any of the auto generated things. If you think it makes sense for EVERYTHING to get filtered instead, I can take that bit of code out.

[tedkulp]

Would it make sense at this point to close this and reopen as a pull request? Might make it easier on you.

[imathis]

A pull request for this plugin would be nice (under another topic of course). I'll work on getting the <figure> and <figcaption> stuff after I see what this lets me do.

[tedkulp]

See #135 for the pull request

[TheChymera]

Sorry for necromancing, but do the caption_img solution as seen in this commit 6ca8f3845257864e6ae35d16266f1e9ceb1e85fe or the imgcapsolution as seen in this blog post have a future in octopress, I really like being able to add captions to my images - it is really useful!

[imathis]

@TheChymera The future of Octopress is moving away from having a "blessed" set of plugins, so these features won't be brought into Octopress itself. That sort of flexibility will be better for everyone.

[TheChymera]

@imathis so how will such functionality be managed in the future?