NPF (mobile) photoset fix by glenthemes
NEW! Version 3.0 is now here!
Photos posted via the Tumblr app turn into text posts (NPF format). If you are using the old unedited (legacy Tumblr blockquote captions) in your theme, you may notice that the images overlap the blockquote border and extend beyond the post width. What this fix can do:
- turns NPF photosets back to photo posts if they were meant to look like one [example]
- removes the blockquote border on photosets
- fixes image stretching and size inconsistency
- custom image spacing, without ruining the post width
Installation & more info below.
⚠️ A few things before we begin:
- if you are already using one of my themes, you do not need to install this fix. just reinstall your theme from my pastebin and it will be there :)
- if you are using my old npf fix, you must remove those old codes before installing this new one
- this does not work with themes with infinite scroll
🛠️ How to install:
Check if there is an existing jQuery library in your code. Try searching for ajax.googleapis.com/ajax/libs/jquery
If you don’t have jQuery, add this line after <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Directly under it, add:
<!--
NPF IMAGES READJUSTMENT | @glenthemes
v2.0 [last updated: 2021-06-03]
-->
<link href="//glen-npf.gitlab.io/v2/npf-override.css" rel="stylesheet">
<script src="//glen-npf.gitlab.io/v2/npf-evenize.js"></script>
<style type="text/css">
:root {
--NPF-Image-Spacing:4px;
--NPF-Bottom-Gap-From-Captions:1em;
}
</style>
Next, search for {block:Posts}
On the next line or so, there should be something like this:
<div class="posts">
At the end of the line, add post-type="{PostType}" so that it looks like:
<div class="posts" post-type="{PostType}">
To edit the spacing, search for :root and you can change these values:
⚠️ Please note:
As of 2021/03/01, this fix now supports both old and modern dashboard captions, and should work as intended. However, if you have (for example) a permalink bar at the top of the posts, you may see that your photoset exists before that bar. To make the permalink bar be at the start of the posts, insert the following code after the npf-evenize.js line:
<script>
$(document).ready(function(){
$(".has-npf").each(function(){
var npf1st = $(this).find(".photo_origin").eq(0);
npf1st.insertAfter(npf1st.parent().find(".DIVNAMEHERE"));
});
});
</script>
Change .DIVNAMEHERE to the div name of your permalink bar.
If nothing changes, feel free to contact me and I can take a look for you!
Thanks for reading! Hope this helps you out, whether if you’re a Tumblr user or a theme-maker. If you run into problems, contact me on discord 💗
426 notes
astarfires reblogged this from glenthemes
n-oetic liked this itwasmagic reblogged this from glenthemes
rloldl liked this
mollystestblog reblogged this from glenthemes 
clavissionary-position liked this 
hhhjjjuuhggjkii liked this dawnofus liked this
thatsbutterbaby liked this
eeriechan liked this
barrenrefs reblogged this from southcodes
wishmelucks-archived liked this
diorsins liked this
mhango liked this
nanamiiinnnn liked this
anthroxlove liked this
riddlebot reblogged this from magnusthemes not-another-bloody liked this
agathacrispies liked this
wisteriagatsuma liked this little-robstener liked this
kurunuma liked this
444thms reblogged this from southcodes bingbong liked this
tipsyauxiliatrixx liked this
robin-buckely reblogged this from wrightedgar
motogp2001 reblogged this from dauns
dauns reblogged this from q8q
floracee liked this
q8q reblogged this from glenthemes - q8q liked this
waitingiii liked this
royalsims-ccfinds reblogged this from glenthemes
variable liked this
sinclair-solutions reblogged this from decodad chrome--horse liked this
smolfrenchtoast liked this elvenking42 liked this
glenthemes posted this
- Show more notes