#test-npf

[preveossa]

Testing what happens if I have multiple photosets in one post that are separated with other content that is not an image.

[dev-theme]

Testing what happens if I have multiple photosets in one post that are separated with other content that is not an image.

[sanke-tests]

lorem ipsum

[knuxify]

The Ultimate Test Post v2

Welcome to the ultimate test post, a show of strength, wit and only the finest in NPF parsing engineering. Well, as far as the editor will let me go, anyways. The docs for NPF actually have some stuff that you can't do in Tumblr's editor like skipping indentation levels in lists.

In case you don't know what NPF is: it stands for Neue Post Format, and it's the standard for Tumblr posts. Instead of storing post content as HTML, posts are stored as blocks - which pretty much match the ones you can create in the editor. This absolutely

HUGE VARIETY

of the format makes it very fun to parse.

Blocks cover text, images, videos, audio, polls and anything else you could think of.

Text blocks are by far the most common, though they can have many types:

Bigger, roughly equivalent to a <h2> header;

Biggest, roughly equivalent to <h1>;

Quote, mimicking the old quote type;

Chat, mimicking the old chat type;

Lucille, which shows up in a fancy font;

And a handful of indented types as well:

Indented, which is a block quote;

Bulleted lists,

equivalent to HTML's ;

And numbered lists,

for counting all the things, like HTML's .

All of the above are just text blocks with a different type. Separate from the type is the formatting - so, bold, italics, strikethrough, small and mixtures of them all.

Also, colors! The standard blog UI exposes red, orange, green, blue, yellow, pink and purple. As a fun fact - Tumblr's CSS actually has more colors, and these colors that are exposed have names - they're named after Friends characters! I've found that sometimes the old HTML API will return them; othertimes they return just the color code. Sadly NPF only returns the color codes, so this fun easter egg became forgotten.

Links are also formatting - for example, here's a link to your favorite website. Mentions are formatting as well - @knuxify.

Two fun easter eggs that AREN'T part of formatting are:

You can make the tumblr logo by using "[ tumblr ]" without the spaces between the brackets: [tumblr]

Tumblr's font also includes a Tumblr logo character in the reserved codepoint space:  (that's Unicode codepoint U+E022 for the curious).

These both utilize quirks in Tumblr's fonts.

Also, if you include up to 3 emoji on one line, they will become big, like so:

😀😄😅

Note that this also works with multi-codepoint emoji (oddly enough, it seems broken in the editor!):

👨‍👨‍👦👨‍👨‍👦👨‍👨‍👦

Also, using another type like "quote" will override the big emoji:

😀😄😅

Note that formatting counts one Unicode codepoint as one character; so, make sure emoji like 👨‍👨‍👦 don't break your offsets.

Also, if you're parsing text for display, you may want to escape HTML sequences, or else <style>body { background: blue; }</style> will make your site blue and <script>alert(1)<script> will make a popup appear.

Oh, and once you parse those, make sure that they don't break formatting. Though, after all, a safe website>>>>>>>a bunch of code execution exploits.

A text block represents a paragraph, but it doesn't represent every line break. As a matter of fact, multiple line breaks can be used in a paragraph, and they will all remain as part of one block. Crazy, right?

(I grabbed the first best GIF from the picker, didn't even read the original post. But hey, nice occasion to show off the attribution label, which is also carried in NPF's block data!)

A fun thing about blocks is that you can specify a layout, which contains a list of rows, each of which can contain more than one block. Here's an example:

Images below 300px (so, 299px and below) are displayed at their original size:

However, this is ignored for multi-image rows:

Here's the other block types:

In order: image with "link" attribution, link with header image, link without header image, audio, video, poll.

You can also add embeds:

View this post on Instagram

A post shared by SEAVS (@seavsonline)

...and more that I'm probably forgetting.

Oh, and there's also "read more" functionality:

That's it for the fun formatting tricks. Have fun parsing Tumblr posts, and good luck - you'll really need it.

[fukuotest]

Here are some photosets

Cemara menderai sampai jauh terasa hari akan jadi malam ada beberapa dahan di tingkap merapuh dipukul angin yang terpendam.

Aku sekarang orangnya bisa tahan sudah berapa waktu bukan kanak lagi tapi dulu memang ada suatu bahan yang bukan dasar perhitungan kini.

Mereka akan berkata, kesedihanmu akan pergi.

Terhempas angin selatan yang penuh debu terbawa sampai ufuk timur terjauh.

Dan kau akan terdiam, bertanya dalam hati kapan ini kan berakhir dan terbawa sampai ufuk timur terjauh.

[eggdesign]

Maestro

Make a playlist out of your audio posts

This is a project I've been writing and rewriting on and off for a while now. After starting over completely from scratch last weekend, I think I've gotten far enough to share it.

It's still early, but so far it supports:

NPF and Legacy audio posts

Spotify posts

Keyboard navigation

There's a few more variations of audio post that I need to finish, but feel free to test out what is currently ready!

[orbit-rabbit]

SMISKIS (#001)

dress your blog up with a theme that says in another life, you’d probably be reincarnated into a smiski 💚

live preview ★ free download here — includes theme guide, credits & code

★ core features

single column container

npf + legacy friendly 400px posts

browser tab title, blog title, subtitle and description

1 - 2 sidebars

3 - 6 custom links

customizable font sizes, color scheme and tumblr controls

maximize freewill by dragging the smiskis anywhere

can even replace some of them with your own PNGs

scroll at the bottom of your posts to find a lil guy

★ theme notes

slow connection will cause the theme or some parts of it to look glitched out. just refresh and patiently wait for the smiskis to fix that up on the back-end !

unable to test on other browsers / screen sizes, but is so far suitable for google chrome + safari desktop with the ff. screen resolutions: 1280 x 800, 1440 x 900, 1512 x 982px.

credits to @zacharyfury-blog (smooth scroll), malihu (tooltips), @neothms & @magnusthemes (unnest captions), @glenthemes (npf audio player), and taye adeyemi (interact js).

this first theme of mine took a whole month to finish and i just got the courage to publicly release it 🥹 so likes and reblogs are greatly appreciated, thank you !

[findtags]

A big update

Hey! It's been a while since I've updated here, and honestly this whole thing was in need of a major overhaul. I've completely rewritten findtags and am ready for it to be tested! It has basically everything the previous React version had and some new features.

For now, the old react version is still available at the old url, but you can try out the update here!

Returning (that was previously missing in the old version): 1. Searching by timestamps 2. Page navigation

New Features:

Favorite tags

Return to your most recent search (and the timestamp that you were on)

Search by date

NPF and legacy post support

There are still a few features that I need to finish implementing, but the basic search results should work. If you come across a bug, or you want to request a new feature, please let me know in the support discord server!

[wolfes]

NEW EDITOR 101: A GUIDE FOR GIFMAKERS by v @shangs

Hi friends! I know I said I would do this way back in April/May when this change was announced but I've been massively busy lately so thank you all for being patient with me :)

Based on the results of this poll, I will be trying my level best to help make a guide for gifmakers to best deal with any problems that have been present with the new editor. However, it's worth noting that I have personally not experienced any of these problems myself and I have no record of any problems from other people that I could send to staff and get guidance on, so for some of these issues I will unfortunately be a broken record.

That being said, I have been using the new editor for a few months now and it hasn't been too bad. So don't be discouraged by the new editor if you still love to make gifs and share them. You may need to adapt a bit, but it's doable!

This is meant to be comprehensive and will be explanation and image heavy. Full guide under the cut.

CONTENTS:

What is the new editor?

Steps to take before posting

Making a post

Troubleshooting

01. WHAT IS THE NEW EDITOR?

Some of you may be asking yourselves what the point of the new editor even is and why it's being implemented in the first place when we already had a (mostly) functional editor. My very limited understanding of it as a CS student is app compatibility and flexibility. I'm not totally clear on the details nor am I 100% certain this is the case, but NPF posts (basically, posts made with the "new editor") first started with the mobile app. I'm unsure if the different post types were simply too unwieldy to transfer to the app - having to make a whole bunch of post types when with the new editor you can now have posts with any elements you want without the rigidity of a set post type - or if it was simply not able to be implemented, but the apps have always used NPF. The majority of Tumblr users are coming from the mobile apps. Then it became a case of having the legacy editor for the web users (which were fewer in number) and the new NPF editor for everyone else. That takes resources to keep around and it's pretty inefficient. Naturally the older editor that was used by less people was going to get the axe, especially since you couldn't tell on mobile that there was even a difference between NPF or legacy posts.

So now here we are and the posts are NPF. This means they're in "Neue Post Format." Basically, every post you make is by default a text post, containing "blocks" of other media - as gifmakers we will primarily be dealing with photos.

I understand that it's frustrating to many to see "our gifs are now rendered as text posts" and ask WHY it's happening when photos should logically be rendered as photo posts - but the fact is, there's now no real delineation between a "text post" and a "photo post." The reason NPF posts are now "text posts" is because that's how they are rendered for desktop themes, not because everyone is going to see your post as text and your gifs are going to be compressed into the quality of a potato (though I know some have seen this issue - more on that later.)

02. STEPS TO TAKE BEFORE POSTING

The long and short of it is that you may have to update your theme. More detail here for those who are interested, but check that your theme supports "new editor posts" or "NPF posts" AND that this is true for original posts (you can read more about why in this ask and, although this may be a bit time-consuming, test it out on your blog). I can say with certainty that my second theme Cygnus supports original NPF posts. This is NOT true of my first theme, though.

You can try to add the NPF Fix by @glenthemes to your own theme (beware if you don't know HTML/CSS) or try this tip by @burningblake for original posts.

Feel free to add theme makers with fully NPF-compatible themes in the notes! I have been happily using my own theme so I can't say to what degree others' themes are NPF-friendly.

03. MAKING A POST

If you're sticking around to post on the new editor and you have trouble ordering your gifs around, here's a little guide on how to post.

If I click on "Photo" from web and open up the editor, here's how it looks:

I went ahead and added three full-width gifs and the editor put them in like so:

You'll most likely also have to order your gifs around in the way you want them. You can go ahead and hover over your gifs to see the button to orient them (the four dots in the top left corner) and the button for an image description (the three dots in the bottom right corner). I've attached images of all three below:

If you hold the orientation button, move your gif around until you see the blue line that shows where your gif will end up in the spot that you want it. For example, I wanted to move the second gif below the first one, so I oriented it so that the blue line would show the marker between the two gifs:

Now my gifs are oriented nicely! Of course, this is a simpler layout, but the principles still hold.

If you save your gifs as a draft and reopen them or you just notice a large gap like this in between your gifs when you're in the editor, don't worry.

This will not show up in dash view or on a desktop theme that supports original NPF posts. For example, this is how the gifs' gap (without modification) looked in my desktop theme:

With your gifs ordered, the final step is to add alt text. You can read more about alt text and why you should use it here. (Feel free to ignore the sections about the captions on the legacy editor since it is no longer relevant. It's also unnecessary to clearly mark descriptions if they're not in the caption of your post because they will clearly show up under "ALT" on Tumblr.)

If you click the three dots in the bottom right corner as seen above, and click "update image description:"

You can add the description you like and click "update." Your photos' alt text will show up under the "ALT" bubble on Tumblr. This is generally a good practice to get into to make your content more accessible, so I hope you guys will consider using alt text regularly :)

Also, I've noticed that in the editor, if you go back and edit something it will take some time to show up. You may have to refresh the page or load it again after some time, but your edits should be there. I would not go back and edit posts again if you see your posts haven't shown up. I also advise against editing your posts on mobile because it's easier to make a mistake.

And there you go, you've successfully made a post with the new editor!

04. TROUBLESHOOTING

I'm sure you've all been waiting for this. Unfortunately I am probably going to be extremely unhelpful if the editor hasn't been refined in the last few months for those experiencing issues. I'm going to go in the categories that I listed out in my original poll, but keep in mind that I haven't personally seen any of these issues on my end so I haven't been able to contact staff with any evidence that this happened other than my poll.

Dashboard view quality issues: I haven't noticed this issue. I'm not sure if this has been fixed since the original poll was posted. If you're experiencing this issue, this is not something I know how to fix so I would contact staff with screenshots of the issue.

Desktop theme side padding: As noted before, this is a theme issue. If you change themes to something that is NPF-compatible with original posts, there shouldn't be any more issues here.

Small gifs on mobile: In my experience this was happening regardless of what editor was used; it's a bug that seems to have been fixed since this poll was created. If you're still experiencing it, at the risk of sounding like a broken record, I would advise contacting staff.

New editor doesn't accept gifs of size 9.8MB < x < 10MB: I haven't experienced this issue so I would say the only workaround would be to either trim the size of your gif so that it is under 9.8MB or whatever threshold seems to be the cutoff or contact staff (I am so sorry for constantly having to suggest this 😭 unfortunately there's no trick I can offer because the new editor has been taking all my gifs just fine)

Logistical issues ordering gifsets: I hope this guide has been able to answer the majority of questions and shed some light on some of the more buggy behaviors of the new editor, but if you have any more specific questions you can feel free to shoot me an ask!

HTML issues / colored text: Unfortunately it seems colored text may be deprecated entirely? This could be for accessibility purposes because I believe screen readers would read out every single letter of gradient text in captions which I imagine can get quite frustrating for users of this technology. I recommend just using the normal rich text editor. If you want small text, you can highlight and click the <s> button!

Other: If it seems like something I may be able to answer, please feel free to ask me. Otherwise... hound staff 😭

Here's where you can hound staff, btw. If you're having major issues I would advise you guys to submit support tickets. That way if there are any widespread bugs, staff will hopefully be able to fix them.

I hope this guide was helpful to you guys in dealing with the new editor, and happy giffing <3

[sanke-tests]

[mournstera]

I’m not the nested list anon, but if you just wanna test creating how nested lists would look like on your theme, you can just create a new custom page via the Customizer and input your code in the editor in HTML mode

Hey! It's the npf text post html output of a post that doesn't recognise nested lists, my theme does support (endless) nested lists naturally. I might need to sit down and view some tunblr docs and see what I get from there.

[fukuo]

I've just reached $1000 in revenue after one year of releasing my first premium theme on Tumblr 🤯

It's been a slow journey to achieve this milestone, but I'm incredibly proud of it! Monumen continues to be the most purchased theme by far 🤔

As for Banda Neira, due to its experimental design, it hasn't garnered as much attention (I might need to re-code this at some point!)

I appreciate your interest in purchasing my theme! I never imagined that my attempt at releasing a paid theme would still generate interest among some of you 🤣

Speaking of theme, I am fully aware that my themes need huge improvements to support NPF posts, so please bear with me as I work on it!

I am starting off with my first theme, Nyiur, to get an update on this! I would say it's 90% completed, I just need to do some testing to make sure it's working properly. You can take a look at the progress below. After that, I will be working on Renjana and Empati Tamako.

Please stay tuned! I am going to revamp my themes to be NPF-compatible (hopefully).

Thank you again!

Cheers.

[eossa]

Change Post Type Indicator?

Hello, I have a question, maybe some of you have an answer / solution for it.

With the NPF posts, the default post type is always "text". In a theme, it kind of looks, well, silly if everything has a text indicator, even when the only content is an image or video.

I tried several things with CSS (tragically you cannot nest the :has() selector it seems) and consulted with ChatGPT due to my very limited knowledge of JavaScript. The result is something like in the JS Fiddle below.

While the code works in the JS Fiddle, it does not work in my theme, as can be seen in the example post below:

Thank you in advance for any suggestions, help, solutions to make this thing work! <3

Solved thanks to the amazing @lushwave !!

[rock-hoarder]

oh actually i have an update on my tourette's diagnosis journey, i've been looking for private clinics and after contacting a million "sorry, we only test for ADHD and ASD" (even though they say they test for NPF and tourettes is inherently part of NPF) i found two clinics in the entire country who test for and treat tourette's, one of which is actually reasonably close to where i live!! thinking about the amount of money i'll have to pay for this makes me dizzy but it's definitely the better option here