So I am building a tumblr template, and I am using stylehatch's Photoset-grid plugin. The plugin works, and in the custom html section I can make a fully functional grid.
The problem is, whenever I make a new tumblr post and edit the posts html to include the "data-layout" portion of the div, tumblr erases it. (Tumblr posts can only contain custom classes and id's in div's, apparently)
The markup I need is this:
<div class="photoset-grid" data-layout="132">
But tumblr erases the data-layout part when I save the post, so i get this:
<div class="photoset-grid">
My question is this: Can I use jquery to substitute a div id for a data layout?
So If I write this:
<div class="photoset-grid" id="132">
Can jquery change it to this, before the plugin loads so it works correctly?
<div class="photoset-grid" data-layout="132">
You can't substitute attributes directly, but you can simply get the id attribute value, create the new data attribute, and remove the ID attribute.
$(".photoset-grid").attr("data-layout", function () { return this.id })
.removeAttr("id");