Minimal Tumblr theme for content focused on high-res photos and video.
CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Photocentric Tumblr Theme

Streamlined design aimed at showcasing photo and video content without clutter.


  • Responsive-enabled for better support on tablet and mobile devices.
  • SEO-friendly page headers and meta descriptions.
  • Search functionality
  • Prominent pagination
  • Post reblog notes hidden from view by default, can be shown in a popup widget.


  • A Tumblr account, obviously


  • Customize your Tumblr blog
  • Under Custom theme, click Edit HTML
  • Copy and paste the contents of file photocentric.tumblr
  • To enable this custom layout on mobile, create a page and set:
    • Page URL: /iphone-theme
    • Page Type: Custom Layout
    • Custom HTML: copy and paste the same template source code


  • Embedded videos are in aspect ratio 16:9. If your VHS transfers are 4:3, perform a find and replace on the source code to change embed-responsive-16by9 to embed-responsive-4by3
    • however there is a workaround for Instagram embeds that use a custom ratio
  • For the most part this layout degrades gracefully without JavaScript enabled. Viewing of notes will not work due to reliance on Bootstrap's Popover.


  • allow customization colours for background, header, and text through Tumblr's default theme selector. Gradients and LESS pre-compile colour calculations make this support more difficult than it should be.
  • regression test every Tumblr block type in most modern browsers and devices. I mainly focused on Webkit for desktop and iPhone.
  • fully realize a process to auto-build .tumblr file, injecting LESS compile into


If you wish to fork this project, from the project root:

  • Install npm
  • Install gulp
    • npm install --global gulp
  • Install gulp dependencies for this project:
    • npm update
  • From the project root, run gulp to precompile photocentric.less into photocentric.css
    • For new .less resources, add them to the files property in package.json
    • Running gulp will keep a watch for modifications to these LESS files and auto-compile the resulting CSS
  • Copy and paste this CSS into the <head> of photocentric.tumblr