Cliptales wordpress theme for cliptales.com


Posted on May 21st, 2015


Couple of weeks back, I got an awesome requirement from my brother(Anand Saha) of building a web application which will be used to personalize the way images are displayed. This is what we came up with http://cliptales.com.

Don’t we have many of them ?

Actually no. The intention was to pull to images from Instagram and sync it with wordpress database. There are plugins available which can do this but they have the below limitations.

  • If the images are being pulled by ajax, they will never be seen by crawlers and so no SEO.
  • If they are being pulled by php/ajax, all image items, comments, likes will be linked to instagram. I wanted to retain the visitors and not redirect them.
  • No search/filter/sorting options.
  • Each image cannot have there independent page. They will always be displayed in a grid in one page.
  • No way to publish to other social networks where your site will be highlighted.
  • Doesn’t provide a rich experience to mobile users.

So I decided to create a cliptales theme from scratch that will have all the options and which will be pretty optimized and responsive.

Cliptales solves all the above issues. It is capable to do an optimized sync within few seconds.

How does the theme sync with Instagram ?

The Instagram is very interesting but at the same time it can make you insane. Instagram doesn’t provide you with all images of a user in one go. It provides you 20 per request and along with that, it gives you a link with which you can fetch the next 20 and so on. This array of image items are looped and filtered by the special tag. We didn’t want to sync all the images. So we decided to add a predefined tag #instasync only to those images which we wanted to display on the site.

At the first sync, this filtered array is inserted in wpdb.

During the subsequent syncs, the instagram images are fetched first and are compared with the existing posts. If there is any change in tags or caption then they get updated. The code here is highly optimized and the sync usually takes less then a sec.

However, we are not downloading the images during the sync but save the urls of the images. We wanted to save the cdn cost. :)

What about the titles ?

Yes, we had this issue. Instagram doesn’t allow you to upload a title. So we decided to add another special tag, #title_{CUSTOM_TITLE}. During the sync process, it extracts the title from this tag and makes this the title of the post.

Doesn’t the theme have a different posttype ?

Yes, the posttype is instapost. We wanted to differentiate the instagram posts with the regular posts. The tags and categories for this is posttype are itags and icategories.

Is the theme customizable ?

What ? You asking me, do the birds fly ? The theme is highly customizable. Every part of the theme can be modified from the admin panel.

What are the tools used ?

Grunt, Bower, Git, PhpStorm, Photoshop

Overall this was an exciting project to work on. The mobile view has a very nice experience. The sidebar doesn’t go below the content like in most responsive website. Instead the main content can can swiped left, to get the sidebar. I am thinking to releasing a free and pro version of this theme. Any thoughts on this ?

 


Eaglehorn

Comments
100% Complete