A site which aggregates images, links, videos and text from Twitter in to a blog with a magazine style layout. This is a proof-of-concept site and could easily be used to create sites on any topic, using Twitter as a tool to quickly curate content.
Content Aggregation
The site polls a single Twitter feed, which I use to manually re-tweet photos, links or videos that I think are relevant. When new Tweets are found, the site performs several layers of scraping to retrieve images, titles, introductions and other content from the Tweet.
The aim is to produce a variety of layouts to make an interesting looking home page. This sizes and aspect ratios of the images retrieved is carefully considered to decide what size photo to use. Titles and descriptions are compared to make sure they aren’t too similar. Previous Tweets are inspected to make sure large photos don’t appear too frequently.
While the site does its best to choose the right layout and photos to use, there is also an admin area where I can manually choose a different photo, or amend the layout and content of each Tweet if I want to. This makes a site which is rich in good, relevant content and can be managed as much or as little as I see fit.
A Beautiful Theme
The design of the site is based upon Shaken Grid WordPress Theme. Although this site isn’t actually powered by WordPress, I have taken the theme and modified it to work with the content collected from Tweets.
The theme employs responsive design concepts, making use of the viewport meta tag to target sections of css to specific size displays to make the site look great on iPhones, iPads and other smaller screen devices.
Masonry Layout
The aim of the design is to create tiles of varying sized content which all fit together neatly. This isn’t possible to do with css alone, so the Isotope Javascript plugin is used. Isotope looks at the size of each of the tiles and adjusts their positions to fit them together, filling the gaps wherever possible. This creates a very organic layout which adjusts to the various content display types.
Inspired by Flipboard
The idea for the site came from the excellent Flipboard App for iOS. Flipboard pulls content from various news feeds and social networks and displays them in a magazine format with an emphasis on good looking content over everything else.
