#npf posts

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.