Render {Caption} within {block:Photos} on Tumblr

Question

There seems to be a bit of a problem with tumblr in that you can't render {Caption} tags if it's within a {block:Photos} tag. The problem is that the way my theme works calls for it to be done in that way.

{block:Photoset}
    <div class="object photo">
        {block:Photos}
            <a href="{PhotoURL-HighRes}" class="fancybox" rel="{PostID}" title="{Caption}"><img src="{PhotoURL-HighRes}" /></a>
        {/block:Photos}
    </div>
{/block:Photoset}

The reason for this is that I'm using FancyBox to add a caption to each of the photos in the set which you have to do by adding a title to the title attribute.

Any suggestions?

Answer 1

The example in their docs does exactly that, a {Caption} inside {block:Photos}. In that block, {Caption} refers to the single photo's caption.

I'm guessing that you want the photoset's caption, not the single photo's. In your case that caption is likely empty, so you're not seeing anything.

I don't think it can be done via template, so here's a quick fix using jQuery:

$('.photoset[data-caption]').each(function () {//select photosets that have a caption
  var caption = $(this).data('caption');//get stored caption
  $(this).find('.fancybox')//find link that needs the caption
    .attr( 'title', caption );//add caption to link
});

And here's the template:

{block:Photoset}
  <div class="object photoset" {block:Caption}data-caption="{PlaintextCaption}"{/block:Caption}> <!-- Note the > after the block caption -->
    {block:Photos}
      <a href="{PhotoURL-HighRes}" class="fancybox" rel="{PostID}"><img src="{PhotoURL-HighRes}" /></a>
    {/block:Photos}
  </div>
{/block:Photoset}