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 to 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.
The same thing as above but reduced to two (technically one) steps now.
A) If you’re using PXU Photosets
1. Find a piece of code similar to this one:
$photoset.pxuPhotoset({
lightbox: true,
gutter: '4px',
borderRadius: '2px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
2. Add this immediately after afterwards:
$('img').each(function() {
var newsrc = $(this).attr('src').replace('gifv','gif');
$(this).attr('src', newsrc);
});
$('a').each(function() {
var newhref = $(this).attr('href').replace('gifv','gif');
$(this).attr('href', newhref);
});
B) If you’re not using PXU Photosets
1. Add this before the </body> tag:
<script>
$(document).ready(function() {
$('img').each(function() {
var newsrc = $(this).attr('src').replace('gifv','gif');
$(this).attr('src', newsrc);
});
$('a').each(function() {
var newhref = $(this).attr('href').replace('gifv','gif');
$(this).attr('href', newhref);
});
});
</script>
I saw some people complaining it was too much work before so I hope this helps. My ask box is open if any help is needed.
