#npf posts

[eggdesign]

A lot more progress on my npf friendly blog playlist thing

I'm sure other similar ones are out there (or old ones being updated hopefully) but it's nice to do a little react project for fun again.

[eossa]

Tutorial: Fixing Photosets

A problem I was facing with the base code* by @eggdesign (thank you very much for providing us with the code!) was that sometimes NPF photosets would not behave the way I wanted them to.

After consulting with members of the w3schools discord sever, Alexander kindly provided me with a script solution for wrapping the individual rows (.npf_row) into a container. The demo of the solution can be found here.

I will place the full tutorial after the read more so it will not clog up people's dashboards.

Wrap the following code into <script> tags and add it at the bottom of the base code, I put it after the script that initializes the posts.

const content = document.querySelectorAll(".reblog-content"); let sections = []; // initialize empty array it'll be useful later ! let temp_array = [] // will also be useful

// We will re-create all the div "reblog-content". function removeAndReplace(content_div){ content_div.replaceChildren(); let idx = 0; for(const array_containing_the_arrays_of_child_nodes of sections){ const div = document.createElement("div"); array_containing_the_arrays_of_child_nodes[0].classList.contains("npf_row") ? ++idx : null; for(const child_nodes_array of array_containing_the_arrays_of_child_nodes){ if(!child_nodes_array.classList.contains("npf_row")){ content_div.appendChild(child_nodes_array); } else { div.appendChild(child_nodes_array); } } div.classList.add(`npf_photoset`); div.children.length <= 0 ? null : content_div.appendChild(div); } sections = []; }

function y(){ content.forEach((content) => { const content_children = content.children; for(let i = 0; i < content_children.length; ++i){ const children = content_children[i]; if(!children.classList.contains("npf_row")){ temp_array.length >= 1 ? sections.push(temp_array, [children]) : sections.push([children]); temp_array = [] } else { temp_array.push(children); if(content_children[content_children.length - 1] === children){ sections.push(temp_array); temp_array = [] } } } removeAndReplace(content) }); }

y();

This solved the issue with NPF photosets consisting of multiple rows.

However, there were two issues that were not fixed by this solution: (1) Photosets with just one row and (2) photosets where Tumblr broke the set into a photoset and a single figure remained unaffected by changes made to the wrapper class .npf_photoset.

For the single row sets, the solution is to pick only the row using CSS

.npf_row:only-of-type

and giving this the same style you would give to the .npf_photoset wrapper.

For the second case, the issue can be resolved by using the following CSS (example with border radius):

.npf_photoset:has(+figure) { border-radius: 1rem 1rem 0 0; } .npf_photoset + figure { border-radius: 0 0 1rem 1rem; overflow: hidden; max-width: fit-content; }

Make sure to add the "overflow: hidden;" and "max-width: fit-content;" to your photoset container class so that images that do not fit the whole width of the post are targeted as well.

And that's it! This should solve the issues with the NPF photosets.

---------

* I'm using the reverse compatible base code that also supports legacy style posts.

A big thank you to @mournstera as well for checking out the photosets with me and pointing me towards issues I had not considered!

[eggdesign]

If anyone has any NPF posts that usually get really messed up for them on their themes, please send them to me so I can test them! This would mainly apply to photosets, posts with a lot of different blocks, or with heavy formatting like with rp blogs.

I intend for the code I'm working on to be completely compatible with old and new posts (and maintaining the old photo post styling with the caption underneath the main photo or photoset) and I don't want to miss any scenarios.

[eggdesign]

can you explain how we can get the username to appear under an npf post with the caption? i really don't want to change my theme, but being incompatible with the new format is driving me crazy. i'm looking at your base code and i have no idea how to translate any of that info to an existing theme.

Every theme maker makes themes differently, so I unfortuantely can't give you a one size fits all code to copy and paste.

With that being said, if you send me your theme, I will help!

In fact this is a general PSA. While I am pretty busy at the moment and lacking motivation on my own themes, I have 0 problem with modifying existing themes to be more supportive of NPF posts, especially if it is an older theme (like 3+ years old) or the theme maker is inactive.

Theme makers who do not feel up to updating their themes or aren't sure where to start, feel free to reach out to me as well!

(I will not add my own credits or remove existing credits)

[eggdesign]

hi, i don't mean to bother, but you said you'd be willing to update older themes with support for npf posts? would you do that through asks here? or dms? i've been so desperate to have my favorite older theme fit the new post style for so long now

Whichever you prefer! As long as I have a link to the theme, I can work with that.

I can also try to work with the original theme maker as well if they're still active.