#npf theme

Hatfield - Responsive Portfolio Tumblr Theme

Preview / Download / Support / Remove Branding

This is a responsive portfolio tumblr theme

Features:

NPF Post Friendly

2, 3 or 4 columns of posts

Sticky Navigation

Responsive Layout: Looks great on phones, tablets, and desktops

Customizable Fonts: Adjust font size and family; supports Adobe Fonts, Google Fonts, and more

Animated Modal Pop-Up: View full posts on the index page

Custom Image Logo: Upload standard and high-resolution logos

High-Resolution Media: Supports high-res images and videos

Social Icons: Supports Email, Phone, Twitter, Instagram, TikTok, Facebook, YouTube, Snapchat, Linktree, GitHub, LinkedIn, PayPal, Pinterest, and more

Dynamic Loading: Load the next set of portfolio projects on the homepage with Ajax

Customization Options:

Rounded corners for photos and videos

Full-screen banner with text and buttons; choose a background image/color or a custom YouTube/Vimeo background

Footer bar with custom text and social media links

Responsive photosets: Choose between Tumblr traditional NPF layout or carousel slider

Background and text color options

Unlimited custom links through Tumblr pages; 10 through options

Easy Google Analytics integration

Featured tags on menu

Option to filter the homepage using a default tag

Remove Branding?

For help with white-labelling your website to remove all branding purchase a Full License.

Commissions

NPF based template

preview + code

This is an alternative to the more extensive base code I'm working on that uses the NPF variable that still uses the legacy theme blocks and variables. This is intended to keep your theme making process familiar and more comfortable for those who do not have a lot of JS experience but still want to utilize the NPF variable.

The JS is pretty minimal (especially compared to the full NPF theme), but it uses the NPF variable to keep formatting more consistent with the legacy post types. While you do not need to edit any JS to use this theme, if you want to, you can use more things from the NPF variable like getting checkmarks for users that have them!

This theme will also take into consideration if photos or other media should not move, like in the case of text separating photosets.

Here is a before and after of a post made with the beta editor:

This base code is very simple compared to my other ones (it is only the posts and pagination), so please edit it as much as you want! I didn't want this to be restricted to a specific style or layout. Given a lot of theme makers have felt limited with their post styles since switching to one post type, I'm hoping this can help bridge that gap.

Add the following code to your theme's document.ready function, as well as into the callback for any ajax loading/infinite scrolling etc.

$(".post_media_photo_anchor").each(function(){ var $fullPhoto = $(this).data("big-photo"); $(this).find("img").attr("src", $fullPhoto); });

What this does is go through each photo anchor, take the data-big-photo attribute, store it as a variable to then quickly use it to replace the src attribute of the actual image (which, by default, is only 500px wide).

You might also need to force the size of the image using CSS, depending on your theme...

img.post_media_photo, .photopost img { display: block; max-width: none !important; width: 100% !important; height: auto !important; }

Can't tell if I hate what I've done or not yet haha

I'm going to change the avatar + description section eventually. But the most important part is that it's working ! Also the ask link redirects to the dashboard version instead of /ask for now.

The npf base theme is technically public (on github) currently, but I'm still working on writing the guide/documentation first. And still extensively testing to make sure the theme won't break anywhere @npfbase is the live preview of the not edited version

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!

Spacing between legacy vs NPF photosets

Some reblog headers not being selected correctly

Possibly try to make quotes more consistent, though this will be difficult given legacy quote type posts not being recognized as quote posts when reblogged with the beta editor.

My new base code adds classes to each modified post! Legacy posts all have the classes of {PostType}-post, and I applied the same naming scheme for the npf posts.

This means you can select photoset posts with the class .photoset-post, or .photo-post for posts with only one main photo. These will apply to both legacy and npf posts.

I also added an .npf-post class to all posts that were changed just in case you want to select those too.