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.
Permalink
Failed to load latest commit information.
examples/all-the-blocks
.gitignore
LICENSE
README.md
gulpfile.js
package.json
photocentric.css
photocentric.less
photocentric.tumblr

README.md

Photocentric Tumblr Theme

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

Features:

  • 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.

Requirements

  • A Tumblr account, obviously

Instructions

  • 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

Limitations

  • 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.

TODO

  • 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

Build

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

License

MIT

Credits