About: PHOTOGRAPHY / WORD PRESS

365

I wanted to start a daily photo project for a very long time but somehow the idea of carrying one and a half kilos of camera and lens with me EVERY SINGLE DAY was too much. I’ve also considered buying something like the FUJIFILM X100S just for this but… never did. Then at the beginning of November I changed my phone to the amazing Nokia Lumia 1020 and decided, after only a couple of days, that it was good enough. Now a month later I can confirm – it is more than good enough.

It was also recently that I fell in love with VSCO cam – the best mobile app for photo editing I have ever tried… and I tried them all. So now I had all the tools to make this a fully mobile project? Not quite. Because VSCO cam is not available for Windows Phone I have to transfer the photos to the iPad for editing. It’s still a lot faster than taking them into Photoshop or Lightroom and somehow feels a lot less awkward than doing “real” photo editing on photos taken with a phone. Sure, it’s a strange workflow 1 but it somehow works.

Don’t get me wrong, the resulting quality is not what you would get from a  DSLR: the DOF isn’t there, neither is the dynamic range and quality can go down very fast with poor light. But for most photos you would never guess they come from a phone and I do have it in my pocket all the time.

365a
Photo “One” was what gave me this whole idea.

Now that I decided to do this I needed a platform. I used Facebook for the first week or so because the idea wasn’t that clear in my head yet but after a while I felt like I was just spamming all my friends and compromising on photo quality. So what is there to do but install WordPress 2

The 8 hour WordPress theme.

When taking this to WordPress I knew I wanted it fast (today fast) and maybe expand on it in time. These were my goals:

  • Less interface more photo
  • Focus on latest photo
  • Overview of all photos
  • Friendly with all (modern) devices 3

Hit the ground running

The best way to start a WordPress theme, short of the amazing starter theme that I will build one of these days (as I’ve been saying for years), is HTML5 Blank. I skipped any other (design) step and went straight into developer mode.

Loading huge images in a nice way.

After making the decision that huge photos were the way to go I found that watching them load was not a good experience. I tried progressive jpeg but that wasn’t much better and even some modern browsers have disappointing support for this. Because at some point I decided that I wanted all my photos to have the same format: 16/9 landscape – the solution was just some simple JavaScript magic. I would hide the image at first, place it in a container, calculate the height by getting the window width and applying the 16/9 ratio and put the title right in the middle. After I make sure the image is loaded I would fade it in and fade out the title.

365b

This was remarkably smooth for my first attempt at my first idea but a white, black and and a lot of greys latter I wasn’t able to find a background that would fit all photos so I needed to set the color individually for every post. I did this by adding a custom field in WordPress where I add a hex code for every image. It was all going nice and smooth – in comes Internet Explorer 10.

Being a personal project I can make all the compromises I want to, especially considering I don’t have that much time. Not supporting anything but modern browsers and devices made sense but Internet Explorer 10 is modern (and it’s also on my phone) so I wanted it to work. The problem was the way the browser decides that images are loaded, especially when the images are cached is a little bit different. This was enough trouble that I just went with this jquery plugin rather than try and figure it out myself.

Now that this is done it’s on to the all photos view.

The other main goal I had for a MVP was making a grid view of all photos. The decision to have all photos in the same format was again a huge time saver as I wanted to give this the same “full screen” feel. But “traditional” breaking points for responsive design were failing to help me do what I wanted with the grid view. The solution was again very simple. Set the break points after the content, not the devices.

365c

A little too minimal

The focus on images was certainly there and titling each one as a number (counting up to 365) is something I really like but the whole thing was lacking any context so I decided too and some minimal info: street, city and country. Browsing on desktop chances are you will not see this info (because most of the time this would involve scrolling that few will notice or bother to do) but on the iPad it all fits so perfectly you’d think building a website for tablet is my day job 4.

I think this article needs a link to the thing it’s talking about.

What’s next

I want to try a map view but I’m not sure I have the patience to do it. What I will surely do is group the photos into collections by theme. I’m half way done with this but I think I need to build up more content before this is relevant enough. Keyboard navigation and some kind of slideshow are some of the ideas I have but they’re just ideas for now.

365d
What is really next is taking photos every single day. This is proving to be a lot more work than I anticipated and finding something interesting every day requires a lot of walking around on random streets and always taking the long way to work.


1. With the newly launched VSCO Cam for Android at least I don’t need to wait for  WiFi to edit the photos making my daily commute a lot shorter but seriously increasing the risk of not getting of the metro at the right station.

2. Probably a lot of things but I wanted a self hosted solution and I’m a control freak Web Designer so I always want to build stuff myself.

3. While the website may be very mobile friendly the ~1 Mb photos on every page are not, especially if you are not on WiFi. In time I hope to have the time to fix that too.

4. It totally is by the way.

December 8, 2013 - 2 Comments