How to change .gifv to gif on blogs
A little over a month ago, all gifs on Tumblr pages were automatically converted into .gifv. Thankfully, this extension for Chrome and Firefox was created.
However, more recently, Tumblr started converting all gifs on individual blogs automatically as well, and that extension does not work on them. Even if it did, it’s not a great way to ensure the gifs in your blog show up in the .gif format, because not everyone is going to have the extension installed.
There’s a way you make gifs be gifs again on your blog, too, though.
1. First, add this script before the </body> tag:
<script>
$(window).on('load', function() {
$('a').each(function() {
$(this).attr("href", function(index, old) {
return old.replace("gifv", "gif");
});
});
});
</script>
2. After that, if you’re using PXU Photosets (which most people with customized themes are), find a bit somewhat like this (the options may be different, that is) on your HTML code:
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '4px',
borderRadius: '2px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
var $photoset = $('.photo-slideshow'),
$pxuphoto = $photoset.find('.pxu-photo'),
$pxuimg = $pxuphoto.find('.pxu-img');
$pxuimg.each(function() {
var newsrc = $(this).attr('src').replace('gifv','gif');
$(this).attr('src', newsrc);
});
4. Finally, find the pxu-photo element. Immediately after, you’ll see something like this:
<img src="{PhotoURL-HighRes}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" />
5. Just add class="pxu-img" after the img tag like below, and you’re good to go:
<img class="pxu-img" src="{PhotoURL-HighRes}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" />
That’s it! I know it seems a little bit too much, but it works at least. Perhaps someone will come up with something easier soon, but for now it’s a solution.
Also, please note that I’m not very fluent on JavaScript/jQuery, so this may not be the best way to write. Sorry about that.
