CODEWITHSUNDEEP
javascriptimageorientationtumblr
Robin Papa
Robin Papa

Reputation: 180

Javascript/Tumblr: add CSS class on condition (has to be JS because Tumblr)

I'm very sorry but after a few hours of trying I just have to ask the experts :)

I've got the following code in my Tumblr theme: 

   {block:Photo}
   <li class="post photo"> 
   // Retrieving photo url here using {PhotoURL-500}.
   {/block:Photo}

This retrieves all photo posts and displays them on a page.

Now I want to give the li a class, depending on the image orientation. I've retrieved this by using:

<script type="text/javascript">

var width = {PhotoWidth-500}; // this is a Tumblr variable that gets the width
var height = {PhotoHeight-500}; // this is a Tumblr variable that gets the height

if (width > height) {
// Here I get stuck, I want to append class="horizontal" to the li above.
}
else {
// append class="vertical"
}
</script>

I do have to call the javascript inside the {block:Photo} though, as otherwise I cannot determine each photo's individual height and width. And as a reminder; I'd love to do this in PHP and just echo it, but Tumblr does not allow that. And I'm a JS noob...

Help would be much appreciated! Thanks in advance!

Upvotes: 0

Views: 320

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075059

On any modern browser, you can use querySelectorAll to get a NodeList of elements matching a selector, e.g.

var list = querySelectorAll(".post.photo");

...and then loop through them appending to their className property. E.g.:

var list = querySelectorAll(".post.photo"),
    index,
    node;

for (index = 0; index < list.length; ++index) {
    node = list[index];
    if (some_condition) {
        node.className += " theNewClassToAdd";
    }
}

If you need to support older browsers, getElementsByClassName has been around for a long time (but I believe it only supports querying by a single class, so you'd have to post-process to make sure both classes existed).

Or for broadest support, leverage the work of others by using a decent library like jQuery, YUI, Closure, or any of several others.

Upvotes: 1

Related Questions