Un-nest tumblr captions, a plugin by @magnusthemes​ & @neothm​

A.K.A theme-makers coming together to save each other’s days.
As we realised most of us had trouble with the parsing (or lack thereof,) of tumblr’s captions, we came up with a solution to “un-nest” them from their typical blockquotes pilling up inside one another, and therefore coded a light (1.7 KB) plugin able to separate them neatly into their own parts.

Demo | Download the minified code (updated oct. 31)

Or you can play around with it on Codepen.

Usage and options under the cut!

Usage & default values:

//your post selector (’.post’, ‘article’, ...) 

$('article').unnest({

      yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
      
      wrapName: ".tumblr_parent", //the name of the captions’ new wrapper

      newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption

      originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it

      tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username

      tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username

      usernameColon: true //if turned to false, removes the colon at the end of usernames bc :) seriously :) hwy :)

});

With infinite scroll, just use it like any other plugin. Add this line in your callback function:

[...]

function( newElements ) {


      var $newElems = $( newElements ).css({ opacity: 0 });


      $newElems.unnest();
});

Examples:

#1:

$('article').unnest({

      tumblrAvatars: true,


      usernameColon: false


});

#2:

$('article').unnest({

      newCaptionUsername: false,

      tumblrAvatars: false, 


      usernameColon: true 
});

Have lot of fun!