npfPhotosets() pluginPermalink for this post

Tumblr is changing its posts’ format to NPF, or Neue Post Format, and now we are able to create(only through mobile as of 06/11/2018) photoset rows inside text posts and captions. These photosets come with their own divs and lightboxes, but are not styled by default like photosets posted through a proper photo post. To support this new feature, I’ve created a pure Javascript plugin which wraps all rows of images(be it images side by side or single ones) that are close to each other and styles them. This plugin supports IE10 and above.

Given the correct structure, npfPhotosets() can also be used to Legacy format photosets. Full documentation and use case can be accessed through GitHub as well through the plugin’s repository.

What does npfPhotosets() do?

npfPhotosets() will search all possible candidates to compose a photoset; then, it will filter those that are rows with more than one image or are a single image but close to another row. These filtered elements will have a div created to wrap them, so they can be easily styled through CSS as well as their wrapper.

The images and rows inside these created divs will be styled mimicking Tumblr’s default photoset: there will be different image widths for rows with more than one image; rows will have their heights assigned according to the image with the shortest height in the row; and margins will be equal between all images inside the photoset.

This plugin also includes styling to guarantee you can set borders around each photoset image container in your CSS, though currently you won’t be as fortunate setting padding values.

How to use this plugin

Simply insert the following before the end of your <body> tag:

<script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script><link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
<script>
npfPhotosets("postSelector", {
   includeCommonPhotosets: true,
   photosetMargins:""
});
</script>

As you can see, the fuction is already hosted externally. If you’d like to call the function again for newly inserted posts, for example, you can define an object variable containing all options and just reuse its name when calling the function, instead of copy-pasting your options, like so:

<script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script><link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
<script>
var npfOptions = {
   includeCommonPhotosets: true,
   photosetMargins:""
}

npfPhotosets("postSelector", npfOptions);
</script>

Then you’d just be calling npfPhotosets("postSelector", npfOptions); whenever you need to.

In case your theme isn’t styled for NPF and you’d rather not turn on “Use new post types”, this plugin will still work because the essential markup needed exists regardless, and there are features in this code to guarantee the correct markup is selected.

Plugin options

  1. "postSelector" is where the selector used for your posts goes, between quotes as suggested. It can be a mere HTML selector(like “article”), a class(“.posts”), or even an array-like list.
  2. includeCommonPhotosets  should have either a true or false value. If true, this will allow photosets made with the Legacy post format to be styled through this plugin. For this to work correctly, you must make sure your photosets share the same class names used for NPF photosets’ elements, as well as adding to the photoset container the data-layout attribute with the {PhotosetLayout} value.
  3. photosetMargins is where the value of the margins between photos inside the photosets should be inserted. The value is measured in pixels. If you want it to have no margins, insert a 0; in case you leave it empty(like two quotation marks with nothing in-between “”), it will automatically use an adaptable percentage based value for the margins. You should always keep the quotation marks, even in the no margins case.

And much more available at the plugin’s repository, such as gallery indicators, ways to turn off automatic lightbox generation and instructions on using it with Legacy photosets.

Updates

[20/11/2018] Fixed issue when running the script again on new page load; thanks to @kushgirl-420 for pointing it out.

[30/12/2018] Fixed issue when there were no previous siblings to the photoset elements, leading to no photoset formation.

[07/01/2019] Version 1.1.0; fixed a few bugs and also included the includeSingleRowImagesInPhotosets option.

[26/05/2019] Version 2.0.0; fixed several bugs regarding infinite scroll use and now requires a post selector, ideal for running the script on newly inserted elements. codes moved to GitHub.

[25/09/2019] Version 2.2.0; fixed another batch of potential infinite scroll problems, as well as became usable to Legacy photosets and can implement Tumblr’s built-in lightbox. the includeSingleRowImagesInPhotosets option has been removed and now happens by default.

[17/02/2021] Version 2.2.7; fixed bugs and now it has way less mandatory options, hopefully making it easier to use! I didn’t mention it previously but it uses CSS flexbox now, so no IE9 support anymore.

This plugin will likely be updated in case new options arise or Tumblr’s generated structure changes.

Please report any issues using this plugin! Considering it’s my first plugin ever and in Javascript(a language I’m still a newbie in for relying too much on JQuery), feedback is appreciated.

199 notesReblog
Tagged withtumblr themesneue post formatnpfresourcesthe prototype and the final version of this plugin was coded mostly listening to the sun always shines on tv so shout out to a-hai tried hard to make it IE8 compatible(hence the lack of getElementsByClassName) but i tested it and it didn't work and... it be like thatcodematurgy code
View notes for this post
  1. bluememed reblogged this from codematurgy
  2. wovenstarlight reblogged this from codematurgy
  3. humangods reblogged this from evansyhelp
  4. evansyhelp reblogged this from codematurgy
  5. heartbslsaved reblogged this from codematurgy
  6. tunons reblogged this from codematurgy
  7. codematurgy reblogged this from codematurgy
  8. the49ththeme reblogged this from codematurgy
  9. webdesigh reblogged this from codematurgy
  10. mercurythms reblogged this from codematurgy