dioticodes

[dioticodes]

Hiii, sorry if this is a bother but ive been trying to replace the paginations on the theme im using with infinite scroll. i think i need some extra help with this. i tried to follow ur instructions but i keep messing up the rest of the theme TT. Somewhere near the end parts the code that i had copied and adjusted wouldnt seem to close even with closing tags. The theme im using is camillia by seyche. ty in advance!!

Try this: https://pastebin.com/JDAjSvkk

I would recommend using a single column only, as it functions a bit weirdly the more columns there are and I'm a bit busy so can't look into it further.

[dioticodes]

@jsinfaerun

Try this!

I've added infinite scroll as a theme option which allows you to toggle it on/off. I've also ensured that several pre-existing scripts in the theme get re-run whenever you scroll down and load new posts.

If you'd like a more in-depth explanation of the changes, shoot me a DM as Tumblr doesn't let you post codeblocks anymore. :(

Also, feel free to message me if you're still having issues!

Hi there! I'm so sorry to bother you, and I'm not exactly sure if I should be asking this here, but I saw your post on masonry and infinite scroll! I've been off tumblr since 2018 and just returned to make a silly blog to put all my baldurs gate screenshots, but I've just realized infinite scroll doesn't work anymore, and I can't for the life of me figure out how to get it working again. When I try using the directions you gave in your post on a theme from the official tumblr theme page, it just seems to fuck up the entire thing---I don't know what I'm doing wrong haha. If you have any advice that would be greatly appreciated.

Heya, what theme are you using? If you're not sure or don't have a link to the theme, upload it to pastebin (or any other text hosting site of your choice) and I'll take a look at it.

[dioticodes]

Hi there! I'm so sorry to bother you, and I'm not exactly sure if I should be asking this here, but I saw your post on masonry and infinite scroll! I've been off tumblr since 2018 and just returned to make a silly blog to put all my baldurs gate screenshots, but I've just realized infinite scroll doesn't work anymore, and I can't for the life of me figure out how to get it working again. When I try using the directions you gave in your post on a theme from the official tumblr theme page, it just seems to fuck up the entire thing---I don't know what I'm doing wrong haha. If you have any advice that would be greatly appreciated.

Heya, what theme are you using? If you're not sure or don't have a link to the theme, upload it to pastebin (or any other text hosting site of your choice) and I'll take a look at it.

[dioticodes]

me: gonna bang out a quick tumblr theme while work is slow

also me:

[dioticodes]

Heya, not really a question, but just wanted to say thanks for the tweak to Syndex! It's still messy with some text posts, but much better than stock with the new thumbnails. Really appreciate your help with this! 🙏🏼

no probs, glad you found it useful! what issues are you having? if they're small-ish, i can take a look into it though no promises, that theme is ancient at this point lol

[dioticodes]

I get that we should be using https nowadays and I'm happy to update to that, but when I first tried replacing the http links manually within my Tumblr theme code editing page, it still wouldn't let me save the new theme, instead repeating the message dialogue box I'd got before I replaced all the http's - saying can't save, the links need to be https. So in its glitchiness it didn't seem to register I had in fact updated all the links to https.

So basically you can't save your updated theme unless you copy paste the theme code elsewhere, replace all the "http://" with "https://" if you haven't already, then copy paste back into the Tumblr theme editing page code. Had to search online for that Word/Docs fix.

I'm sure a lot of you might have already figured this out by now, but if you didn't this is a PSA lol

[dioticodes]

how to add masonry and infinite scroll to a tumblr theme

Hi, welcome. If you’re here, it’s because you want to add either Masonry, Infinite Scroll or both to your custom Tumblr theme.

Heads up, this guide requires some familiarity with HTML, CSS and Javascript as you will be editing your current theme and since all themes are different, I can't give step-by-step instructions on how to edit your exact theme.

Also, this post is best viewed on my desktop theme. Blame Tumblr for not supporting Markdown properly.

OVERVIEW

Alright, so what are we even adding? Basically, Masonry is used to display your posts in a nicely laid out grid, even if they're all different sizes. You tell it what your posts are, what you want them to fit into and it'll come up with a nice grid layout for you. Infinite Scroll is used to... infinitely scroll through posts with having to go to another page. It’s the endless scrolling of your Twitter/Instagram/whatever feed.

Now maybe you’ve already got one or the other in your theme and you’re looking to add the other one. Sounds pretty simple, yeah? It kind of is. The trouble is that Masonry and Infinite Scroll interact with each other. When you’re using Infinite Scroll, whenever you scroll down and load more posts, Masonry needs to check whether your post layout is still okay and correct it if it isn't.

PLUGINS

For the sake of this guide not getting too confusing and because they integrate so easily together, we’ll ONLY be using David DeSandro's Masonry and Infinite Scroll Javascript plugins. If you’ve got different versions of these plugins, remove them now as they may cause issues.

First, we need to add the plugins to your theme’s head:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script><script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>

HTML

To get Masonry working, we need to know what your posts are and the container that they're in. Give your posts a class (e.g. .post) and your container an id (e.g. #posts). We can also specify additional options, such as column width and spacing between the posts. We want the layout to be responsive, so by following the example code Masonry provides, we'll create post-sizer and gutter-sizer.

To add Infinite Scroll, we need to know what the posts are (same as Masonry) and where to get the new content from - this will be the next page of posts on your blog. Tumblr lets us get that easily using pagination variables. Make sure you give the next page a class (e.g. .pagination__next), since this is where we'll be loading new posts from.

Your HTML might look something like this:

<div id="posts"> <div id="post-sizer"></div> <div id="gutter-sizer"></div> {block:Posts} <div class="post" id="{PostID}"> <div class="post-content"> {block:Text} {/block:Text} </div> </div> {/block:Posts} </div> <p id="footer"> {block:PreviousPage} <a href="{PreviousPage}">« Previous</a> {/block:PreviousPage} {block:NextPage} <a href="{NextPage}" class="pagination__next">Next »</a> {/block:NextPage} <a href="/archive">Archive</a> </p>

CSS

For the styling, we want the layout to be responsive so we'll set post-sizer and gutter-sizer to have a % width. For the rest of the styling, we'll use some of Masonry's example code again.

Your CSS might look something like this:

* { box-sizing: border-box; } #posts { width: 800px; } #posts:after { content: ''; display: block; clear: both; } #post-sizer, .post { width: 32.66%; } #gutter-sizer { width: 1%; } .post { background-color: lightgrey; margin-bottom: 10px; } .post-content { width: 100%; padding: 10px; float: left; }

JAVASCRIPT

In your theme's head, we can create a new script and set up Masonry inside it like this:

<script> window.onload = function() { var elem = document.getElementById('posts'); var msnry = new Masonry(elem, { itemSelector: '.post', percentPosition: true, columnWidth: '#post-sizer', gutter: '#gutter-sizer' }); } </script>

Then to actually get Masonry to generate a layout, we need to call it like this:

msnry.layout();

Usually, that's all you really need for Masonry but for Tumblr posts, any media embeds might take a bit of time to load. For example, Instagram embeds get taller when they're fully loaded (or at least they used to) and this can screw up the layout of your posts. To deal with this, you can add an observer that checks for any changes with media embeds and calculates a new layout if needed:

const embedObserver = new MutationObserver((m, o) => { msnry.layout(); }); embedObserver.observe(document, { childList: true, subtree: true });

Then finally, we need to set up Infinite Scroll. Remember, we're using the same posts that Masonry is changing. Since this plugin is made by the same guy who wrote Masonry, we can integrate it easily using outlayer:

let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', outlayer: msnry });

Every time it loads a new page, it'll update the URL in your address bar. If you want to turn that off, you can add a new line to the previous codeblock, setting history to false:

let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', history: false, outlayer: msnry });

And that should be it! The whole script should be something like this:

<script> window.onload = function() { // INITIALISE MASONRY var elem = document.getElementById('posts'); var msnry = new Masonry(elem, { itemSelector: '.post', percentPosition: true, columnWidth: '#post-sizer', gutter: '#gutter-sizer' }); // CALL MASONRY LAYOUT msnry.layout(); // CALL MASONRY LAYOUT ON EMBED LOAD const embedObserver = new MutationObserver((m, o) => { msnry.layout(); }); embedObserver.observe(document, { childList: true, subtree: true }); // INITIALISE INFINITE SCROLL let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', history: false, outlayer: msnry }); } </script>

FINALLY...

Do keep in mind that your theme code will be different to this, so it's not a case of just copying and pasting everything directly. Remember to remove any old Masonry or Infinite Scroll plugins you already have. Your class and id names will probably be different and you may need to add certain HTML elements if you're missing them. You'll almost certainly need to tweak the styling too.

Feel free to shoot me a message if you need help or want to heckle me about the guide being outdated.

[dioticodes]

mini spotify player tutorial

Whilst spotify has options for large and compact players when you share songs on other platforms, tumblr sometimes defaults it to the large player on blog themes, which can be visually unpleasant. I wrote a quick fix that always shows the mini player if it’s a song ＾▽＾/° (I’ve left playlists & albums untouched, because minimizing the player would make them look like a single song.)

Paste the following before </style>in your theme:

iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{ height:80px!important; }

That should work. But in case it doesn’t, you can also paste this before </body> in your theme:

<script> var spotsongs = document.querySelectorAll("iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']"); Array.prototype.forEach.call(spotsongs,function(minitrack){ minitrack.setAttribute("height","80"); }); </script>

credit isn’t required, but I’d appreciate a share to this link in case anyone else finds the large player annoying ✧_✧

if you run into any problems let me know 🤙

[dioticodes]

hi!! not sure if your blog is still active, but on the off chance you are, is there a way to center text in a text post?? i can't find any recent code that works!! thank u :)

hiya! unfortunately for everyone, i am still alive and kicking. not 100% sure if you mean in the posts itself or just in themes, so i’ll just cover both

#1 centering in posts

afaik, you can still center text in the posts themselves but it will only be shown as centered in desktop themes.

to do it:

start making a text post

click the cogwheel / settings icon in the top right corner

change the Text Editor to HTML

add style="text-align:center" to any opening paragraph tag (these look like <p>)

save the post

the text post should contain something like this:

<p>test</p> <p style="text-align:center">test</p> <p style="text-align:right">test</p>

on the dashboard, it’ll show like this:

on a desktop theme, it’ll (maybe) show like this:

however, do keep in mind that the theme may override whatever styling you’ve added to your post. tbh i wouldn’t recommend putting styling into your post bc even if you can control your own theme, you can’t control other peoples’ themes (when they reblog your post)

#2 centering in themes

if you’re developing a theme and you want all text posts to be centered, just add text-align:center to the styling of the text post. you can either do it inline or within the document styling (so in the <style> tags in your <head>).

inline:

{block:Text}    <div class="text" style="text-align:center">        {block:Title}<h1>{Title}</h1>{/block:Title}        <div class="caption">{Body}</div>    </div> {/block:Text}

within the <style> tags (recommended):

.text { text-align:center }

[...]

{block:Text}    <div class="text">        {block:Title}<h1>{Title}</h1>{/block:Title}        <div class="caption">{Body}</div>    </div> {/block:Text}

if you’ve never seen a line of html/css in your life and/or you don’t understand any of ^that, feel free to message me and i can either talk you through it or edit it for you

i would also be wary of centering text posts like this because it can make long paragraphs really awkward to read if everything is centered. once again, you can control the length of the text posts you make, but you can’t control what other people post.

[dioticodes]

heads up that the if block for tumblr theme image variables requires "Image" at the end, so for {image:Image Name}, the if block is actually {block:IfImageNameImage}

ig it makes sense to differentiate it from the text-based variables but it's unclear in the documentation that it works like this and i'm mad i spent like half an hour trying to figure it out

[dioticodes]

@batfaced​

(reblogging op cause tumblr will break my kneecaps if i drop links as a comment)

it’s hard to tell what changes you’ve made without looking at the code inside the html editor, but i imagine all you really need to do is add more <img> tags below where you put the first one

i tracked down the theme you were using and edited it slightly. here’s a preview:

i also added a handful of options. you’ll notice they’re all in capital letters.

you can add up to 5 images (you don’t need to add all of them tho). lmk if you want to add more

there’s an option to change the shape of the image (square/circle/rounded square)

by default, it does a bit of magic to crop and size the images (it’ll use the center of the image as an anchor point). there’s an option to turn that off, though if you do, make sure you use a square image otherwise it’ll get stretched

anyways, you can get it on pastebin here or give a shout if you want any changes

i need help

i put a corner image in my blog via html and i would like to put more but i cant figure out how does anyone know

[dioticodes]

hello ^_^ super sorry if this is too long, you're the first tumblr code blog i've found thats been active within the last year & im a little desperate. my sideblog has a theme that HATES me so bad (effector theme by pixel union)

on my test sideblog, gunpikachu, the lightbox(? i think that's what its called) works as intended. when you click on the photo, it enlarges, while not taking you off the page. on the actual sideblog, dreamcast-webcomic, it forces you to click on a magnifying glass that takes you to a separate page with the image, and it doesn't even open in a new tab! it does this regardless of whether or not the original post was made in npf. some posts are from 2 years ago, others are from 5 months ago, neither have working lightboxes. reblogged photosets have the lightbox, along with this one post made in npf.. i don't know why this one specifically works. new photosets i post on the blog have the lightbox working fine, it's only affecting posts that were created before i changed the theme. i know 0 things about coding, all ive found is that on posts with the lightbox, it has an event named "post_media_photo_anchor" in it, and this phrase is located nowhere within the theme itself. if you have any idea how to fix this nightmare, i would be 4ever grateful. thank you for reading my plea for help, hope you have a good one!

Heya! I took a look at your blogs and it seems like the posts are different types (main blog has a text/npf post, sideblog has a photoset post). Your theme displays text posts with the lightbox and photoset posts with the magnifying glass, it's intentional behaviour. The post you linked to shows up how you want it to because it's not actually a photoset, it's a text post!

If you ever want to check the post type yourself, right click anywhere inside a post and open the developer tools by clicking "Inspect" (or whatever your browser calls it). Look for the line that starts with "<article id". You'll notice right that right after the id, it'll have the class (e.g. "class="post type-text"). In this case, it's telling us that the post is a text post.

I suspect your recent posts are displaying how you want them to because the newer ones are text posts and the older ones are photoset posts. Have you been posting stuff using the mobile app? All posts made in the app are in Neue Post Format (NPF) and all NPF posts are text posts.

The "post_media_photo_anchor" is referring to the original small image that shows up in the post. I haven't dug into the HTML deep enough to know what exactly it does, but I wouldn't worry about it. It's a lightbox thing, probably.

As for a solution:

You could only post stuff as text posts (or with the mobile app)

You could edit the HTML and change how the theme displays how photoset posts

I did also notice that the theme you're using has an toggle option called "Custom Photosets", which changes how photosets are displayed. One version is with the magnifying glass but the other version makes it show up like a slideshow. It depends on how you want your photosets to display but this might be the best solution.

Hope that cleared things up for you, feel free to let me know if you’ve got any other questions. 🙂

[dioticodes]

hi I saw your fix on npf posts but I can't for the life of me figure out how to get it to work. if you look at the front page of my blog you can see that most photo posts are fine but the formatting of those with text are all messed up, was hoping that you could take a look and perhaps help me out! I know little to nothing about code and haven't been able to figure it out at all. Thanks in advance!

Heya! Do you mean the text with that line to the left?

like this

That's called a blockquote, it's the intended appearance for any kind of text that's been reblogged. It's not caused by npf posts.

If you want to change the appearance of the blockquote:

Go to your blog front page -> Edit Appearance -> Edit HTML

Type CTRL+F to bring up the search (or click the cog/settings icon -> Find & Replace)

Search for "blockquote" and find the following bit of code:

blockquote {border-left:1px solid #ffffff; padding-left:5px;}

Change it to this:

blockquote {border-left:1px solid #ffffff; padding-left:5px; margin-left:1em;}

Change "1em" to whatever you want. The bigger you make the number, the more the line+text will be shifted right. "em" is a type of measurement and refers to the size, relative to the text. If you want it in pixels, you can change it to "px" (e.g. 16px).

Hit "Update Preview" to preview your changes and "Save" to save them.

Feel free to shoot me another message if that's not what you meant, or if you'd like further clarification! 😄

[dioticodes]

.spoilerTags(); is a tag-filtering plugin for your tumblr theme based on the existing tag filtering system for the dashboard. You can set your own tags to filter, and if a post contains those tags, it will cover it up with a warning message, which readers can dismiss by clicking a button if they still wish to proceed.

Features:

filter anything from spoilers to content warnings!

custom warning message

option to include or exclude ‘#’ before tags

custom tags separator

custom ‘show anyway’ text

option to shrink posts until click expand

adjustable colors

♡ Install it here

[dioticodes]

i have this issue with the text files showing instead of pictures with this npf format...i tried your tips on how to solve it in my theme but it didnt work out...what am i doing wrong?

heya! i took a look at your theme and it seems like the solution i posted is for a different issue to yours!

(skip to the end for the code)

your issue with text files showing instead of pictures is actually intentional and seems to be how the theme was designed. the way the posts are displayed depends on their post type (text posts, video posts, chat posts, etc.). for text posts, it will display either the title of the post or simply “Text Post” (if the post doesn’t have a title) inside a coloured circle.

npf posts don’t have types, so when someone posts a photo using tumblr’s mobile app, it’s treated as a text post. this becomes more obvious when comparing reblogs of photo/npf posts: 

i tweaked the theme a little bit so that npf posts with photos in them now display a little more like normal photo posts. to be more specific:

any text post that starts with an image will have a thumbnail of that image.

the image used for the thumbnail will be whatever the first image in the post is.

if the post doesn’t contain an image, it won’t have a thumbnail.

if the post has a title or any text above the image, it won’t have a thumbnail.

if the post has any text below the image, it will have a thumbnail.

a thumbnail will only be shown if the image is in the original post.

all of this only applies to text posts

here’s an example of what it looks like:

i’ve added in two theme options:

SHOW THUMBNAILS ON TEXT POSTS - enabled by default. if you’re having issues, turn it off to completely disable any edits i’ve done

LOAD HQ THUMBNAILS - disabled by default. turn it on to use the original image resolution. can make load times considerably slower, depending on how large the original image is

you can get the code here.

let me know if you need help with anything or want me to change something else!

[dioticodes]

i think most themes with dashboard style reblogs use this plugin. it does use javascript but the plugin does most of the heavy lifting, so all you really need to do is change a few of the default values and make sure your posts are wrapped by something (they use <article> in the example). i don’t think it’s possible to unnest blockquotes using solely html and css.

also, i know this happened MONTHS ago but i’ve been seeing these out-of-order posts recently, so i’m wondering if it’s still happening. i’ve tried replicating the issue, but the posts have always shown up properly. may i ask how you were able to do it?

am i the only one experiencing this glitch with nested blockquotes on desktop?

the blockquote contents get shifted upward and don’t display in the correct format. i tested out my running theory and proved that it’s caused by reblogging on mobile

it doesn’t matter what blog theme i use; if uses nested blockquotes, it shows up like this

[dioticodes]

useful tips for tumblr theme creators (part 4)

UX design

user experience (UX) design refers to the experience of person using your product and in this case, your theme.

as a theme creator, you have two types of users: the blog owner/theme user (the person installing your theme on their blog) and the end user (the person viewing your theme on someone’s blog). it’s important to consider both of them when designing your theme.

for the blog owner/theme user:

give your theme options clear, concise and intuitive names.

too many options can be overwhelming!! especially if they’re colour options (which they usually are)! it’s kind of a balance between choice and simplicity. as an example, this theme only has 3 colour options, which were mainly used for background colour, post background colour and post text colour.

set appropriate default values. this is especially important if you’ve got a lot of colour options - don’t have all your options as pretty much a single colour. make it obvious which colour option corresponds to which element.

as a side-note, tumblr’s theme editor shows toggle options (meta if tags) as the opposite of their default value. there’s nothing a theme creator can do about it, but it can be confusing if you’re not aware of it so it’s good to know.

treat the blog owner/theme user like a monkey. what if they delete all the text in your “Font Size” option? if you’ve written your css like this:

element {   font: {text:Font Size} ‘Arial’, sans-serif; }

...it's going to break the font-family and probably revert to Times New Roman or something. instead, limit the control they have over your code by isolating the property they can control, like this:

element {   font-family: ‘Arial’, sans-serif;   font-size: {text:Font Size}; }

in a contradictory twist, treat the blog owner/theme user like a princess. not all customisation has to be selected manually by the blog owner.

if you’ve provided 5 custom link options but they’ve left the last one empty, how does your theme handle that? does it have a clickable link that redirects to the blog home? does it have the link title but is unclickable?

note that you can use {block:If...} and {block:IfNot...} to check whether something exists. this works for text options!

<meta name=“text:Link 1 Title” content=“Archive” /> <meta name=“text:Link 1 URL” content=“/archive” /> ... {block:IfLink1URL}   <a href="{text:Link 1 URL}">{text:Link 1 Title}</a> {/block:IfLink1URL}

in the code above, the <a> tag will only be rendered if the blog owner/theme user has entered something into the “Link 1 URL” option. of course, this means that the “Link 1 Title” option could be left empty...

for the end-user:

we’ve covered some of these in the previous parts. is your design responsive? is it accessible?

how fast does it load for a user with an internet connection? does your theme use a lot of large image assets that will take the user a long time to receive?  

you might want to consider using progressive images, which are blurry at first but progressively become clearer, as the data is received.

you can test out load speeds using chrome’s inspector (Networks tab), which lets you throttle your connection speed. alternatively, you can run your blog through GTXMetrix.

is it laggy? do you have a script running that makes browser performance slow?

how bandwidth intensive is your theme? most desktop users will be using unlimited bandwidth plans, but there’s a chance that they’re on a limited plan and while most browsers have automatic caching which can help, it’s good to keep in mind. keeping your image assets small in size is useful for both conserving bandwidth and improving load speeds.