The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Tumblr photoset permalink

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #148080

    I’ve wanted to figure out how to pull the first image from a photoset on the index page. I’ve finally figured out a way. The only problem is that now the image isn’t clickable on IE, it is on Chrome.

    Here we go…

    <script type="text/javascript">
    $(document).ready(function() {
        $(".entry .photos").first().each(function (i) {
            var src = $(this).attr("imgsrc");
            var a = $('<a/>').attr("href");
            $(this).html('<a><img src="'+ src +'" /></a>');
    <div class="entry">
    <a href="{Permalink}"><div class="photos" imgsrc="{PhotoURL-250}"></div></a>{/block:Photos}</div>

    For a limited time, I have an ugly example photoset on my site.

    It works fine in Chrome. The link renders in IE but it isn’t clickable.

    My big problem is the $(this).html(‘‘); line of the javascript.

    I need help defining that link properly.


    No need for JS here at all.

    Change your block to:

        <div class="entry type-photoset">
            <a href="{Permalink}" class="photo">
                <img alt="" src="{PhotoURL-250}">

    Then in your CSS:

    .type-photoset .photo {
        display: none;
    .type-photoset .photo:first-child {
        display: block;

    This will give you browser support all the way down to IE 7.


    That did the trick!


    For future reference, does anybody know what I was doing wrong with that javascript function?


    It might not have liked the imgsrc="{PhotoURL-250}" since it’s not valid HTML. Also this: <a><img src="'+ src +'" /></a>, an anchor without an href will likely lead to trouble.



    I am hoping to do the same thing, and this info above works like a charm when I paste it into my Tumblr code.

    HOWEVER! I have starting using a new theme and for the life of me, I cannot figure out how to integrate the above into the custom code of my new theme. It has a lot more variables than I am accustomed to.

    I’m using the theme below:

    Here’s the relevant bits I can find. The CSS is pretty intense so I included it all just in case, here’s a codepen link:

    my site is below, you can see how it clips the photosets awkwardly, so I’d like to just have it show the first image (all photosets are the yellow/text images, just a photo are the others):

    Thanks for any help!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.