Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Ember Tumblr

Netlify Status Build Status npm version Ember Observer Score Codacy Badge Code Climate


This addon allows you to quickly and effortlessly integrate the Tumblr API into your Ember application.

Note: This project is still in a pre-stable (1.0.0) release. Not all functionality is supported, but the basic text post usage is stable.


ember install ember-tumblr


First, and most importantly, make sure to register a Tumblr application for your account to get an OAuth key:

Once you have that, create an adapter named tumblr-post to set up your blog url and API key.

// adapters/tumblr-post.js
import PostAdapter from 'ember-tumblr/adapters/tumblr-post';

export default PostAdapter.extend({
  blogUrl: '',
  apiKey: 'myTumblrApiKey'

Then, simply create a route for your blog to retrieve the data, and utilize the tumblr-blog component in its template!

// routes/blog.js
import Route from '@ember/routing/route';

export default Route.extend({
  model() { // Retrieve all posts of type "text"
    return this.get('store').findAll('tumblr-post-text');
<!-- templates/blog.hbs -->
{{tumblr-blog posts=model}}

And you're done! Ember-Tumblr can be customized far beyond this to retrieve specific types of posts or override the default templates, but that's all you need to do to get started!

Linking to Individual Posts

If you want Ember-Tumblr to provide links to individual posts (by id), add the postsRoute option when defining tumblr-blog:

<!-- templates/blog.hbs -->

Then, define the route and template for your postsRoute:

// routes/post.js
import Route from '@ember/routing/route';

export default Route.extend({
  model(params/*, transition*/) {
    return this.get('store').queryRecord('tumblr-post-text', {
      id: params.post_id
// routes/post.hbs
{{tumblr-post-text post=model}}

Collapsible Posts

Ember-Tumblr supports collapsible posts, via class styles you can implement. To activate this feature, set collapsible to true (defaults to false).

<!-- templates/blog.hbs -->

This will add a .tumblr-post-collapsed class to all posts by default, and a button at the bottom of the post that allows users to toggle the collapse (removing the class). To implement styles for the collapse, you could add something like this to your project:

<!-- styles/blog.scss -->
.tumblr-post {
  &.tumblr-post-collapsed {
    .tumblr-body {
      max-height: 300px;
      overflow: hidden;

If you want posts to be expanded by default but still be collapsible, just set collapseByDefault to false (defaults to true, only used if collapsible is also true).

<!-- templates/blog.hbs -->

If you are using the tumblr-post component (or any of its derivatives) and want it to be collapsible, you can set the property there, too.

  collapsible=true <!-- allows the post to be collapsed -->
  collapsed=false}} <!-- overrides the default to make it expanded when rendered -->

Sorting Posts

By default, Ember-Tumblr doesn't attempt to do any sorting on your behalf. However, should you want the component to perform sorting operations for you, simply pass in the sortBy properties as an array, exactly as described for Ember.computed.sort.

// controllers/blog.js (or components/blog.js, once routeable components land in Ember)
import Controller from '@ember/controller';

export default Controller.extend({
  sortBy: ['date:asc']
<!-- templates/blog.hbs -->

Ember-Tumblr can handle multiple sort properties, just like the computed macro in Ember (because that's what we use!).

Date Formatting

Ember-Tumblr uses Ember-Moment for displaying formatted dates. This is an optional dependency that you can leverage by setting the formatDates flag to true:

<!-- templates/blog.hbs -->

Refer to that package's documentation for information on setting the default date format in your application config.

Note: You must install ember-moment in your application to use this feature.

Known Bugs

Filtering text posts by tag via the Tumblr API has been broken for quite some time now. View the Tumblr API Google Group for more info.

Workaround: Retrieve all posts (without) type, only the text post API is bugged.

Contributing details how to contribute to this project.

We adhere to the Ember Community Guidelines for our Code of Conduct.

Powered By Netlify


  • git clone
  • cd ember-tumblr
  • yarn install


  • yarn lint:js
  • yarn lint:js --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • yarn test – Runs ember try:each to test your addon against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit


This project is licensed under the MIT License.