Tumblr photoset permalink

[ralphsmouse]

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>');
    });
});
</script>

{block:Photoset}
<div class="entry">
{block:Photos}
<a href="{Permalink}"><div class="photos" imgsrc="{PhotoURL-250}"></div></a>{/block:Photos}</div>
{/block:Photoset}

[ralphsmouse]

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.

[TheDoc]

No need for JS here at all.

Change your block to:

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

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.

[ralphsmouse]

That did the trick!

-thanks!

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

[TheDoc]

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.

[aliebold]

Hi!

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:
http://themes.mxdvs.co/themes/xxiv/

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:
http://codepen.io/aliebold/pen/LpYEmQ.css

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):
http://thedoritosarchive.tumblr.com/

Thanks for any help!

[Author]

Posts