The main idea behind Viewport was to present the user with a viewport showcasing the bloggers posts in a graphic form. This of course takes no small amount of inspiration from Derek Punsalan’s ‘The Unstandard’ theme which gathered a huge following. Viewport aims to further extend that by using imagery to complement the post content. Of course it’s also good for photographers who want a slick way to show their work.

As with all new sites or themes, it’s best to start off with some sketches of ideas. This one was fairly straight forward, as there aren’t any fancy graphics or complex containers. All we’re doing is focusing on the image related to the post.

That’s all there is to the front page. Simple header displaying pages, subscribe link and search box, a viewing area containing the post title and excerpt placed over the post image, and the navigation arrows.

The home page:

The next step was to investigate which technology could power the viewing area. There are a few Javascript div sliders out there, but my preferred one is Coda Slider by Niall Doherty. Coda Slider allows for left and right navigation and cross-linking if needed whilst providing seamless transitions.

Without going into detail on the workings of Code Slider, it requires that a series of panels are built up – to do that we use the Wordpress Loop.

Firstly the panel is constructed and given the post ID and title. Next the image is found from the post meta data, and displayed. Finally positioned on top of the image are 2 divs, ‘post-title’ and ‘entry’. As their names suggest, these contain the title and link to the post, and the excerpt of the post respectively.

The single post page:

The idea behind the single post page was to retain the post image but in a small more useable form, then to display the content below that. To do that we use 300px for the single post image height.

The rest of the page is a fairly straight-forward layout, with clear controls above the post and the sidebar to the right.

The archives/category page:

The archives and category page is something a little different. We retain the viewing window, but lay the posts out in a 3×2 fashion, 6 per page. Users can then skim through quickly, whilst having the benefit of the posts still being represented by their images.

And that is Viewport in a nutshell. A clean-looking, function theme, designed to spark interest in content by using related imagery. More details and the download can be found at paulicio.us.

Curabitur facilisis consectetuer enim. Pellentesque leo. Nunc enim. Duis volutpat risus in ligula. Suspendisse potenti. Vestibulum posuere bibendum sapien. Cras suscipit justo et ipsum. Curabitur hendrerit vehicula orci. Sed quam. In hac habitasse platea dictumst. Maecenas rhoncus, ante in facilisis auctor, tellus justo luctus orci, nec porta odio dui at neque. Proin libero. Vivamus erat sapien, consectetuer et, tincidunt quis, semper ac, leo.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sollicitudin aliquet risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam a dolor. Cras eu dolor vitae ante vehicula imperdiet. Maecenas bibendum leo sed eros. Cras at leo eget nibh hendrerit lobortis. Sed consectetuer tortor sed neque. Etiam ipsum. Aliquam sagittis.

Duis et tellus. Nullam pharetra fermentum arcu. Proin congue. Sed in sapien. Integer non arcu et felis faucibus blandit. Duis ornare neque vel elit. Etiam non magna. Ut neque lorem, pharetra dapibus, tristique vel, vehicula eu, diam. Morbi laoreet elit a eros. Aliquam et orci. Curabitur nunc dolor, egestas at, congue venenatis, viverra id, ligula. Duis ut erat. Donec turpis dolor, pharetra et, pretium vitae, gravida id, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus ut est sit amet metus molestie blandit. Nullam interdum orci vel neque. Nullam vehicula, est eget adipiscing fringilla, mauris augue molestie ante, sit amet pharetra dui nibh vitae dui. Nulla eu nisi in tellus condimentum ullamcorper. Nulla auctor. Sed ullamcorper, ipsum et euismod gravida, elit orci euismod turpis, ut aliquam quam purus viverra tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent iaculis convallis enim. Suspendisse pulvinar, nisi rutrum vulputate auctor, erat sem porta mauris, a placerat tortor ipsum consectetuer orci. Aliquam commodo consequat lacus. Curabitur ornare mattis nisi. Donec nec nulla. Suspendisse tristique scelerisque arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eleifend gravida erat. Nullam elit libero, hendrerit ac, semper sit amet, viverra in, arcu. Duis sit amet sapien. Suspendisse molestie justo ut augue.

Phasellus ut augue. Morbi dapibus molestie odio. Nullam gravida, odio a semper rutrum, metus odio aliquam dui, sed sodales mi tortor ac tortor. Nulla nec nibh sed metus auctor aliquet. Nulla commodo quam ullamcorper tortor blandit tempor. Etiam suscipit, dui eu placerat rutrum, sem tortor aliquet felis, adipiscing fringilla dolor erat eget turpis. Duis quam elit, luctus nec, interdum in, faucibus nec, risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in arcu. Suspendisse volutpat libero. Pellentesque id turpis vitae turpis ullamcorper imperdiet. Proin viverra. Nulla a elit. Vestibulum tortor turpis, fringilla nec, congue quis, iaculis ac, magna. Maecenas suscipit neque a massa. Fusce neque sapien, rutrum eget, viverra eget, vulputate nec, turpis. Vestibulum non eros. Morbi risus. Vestibulum aliquet, tortor vel egestas vestibulum, eros turpis tempor tortor, vitae dignissim ligula ipsum vel purus.

now by updating to Version 1.1 – discover more.

Property of nin.com