For a while now I have used Flickr to host all my photographs and I like the service that they provide with their relatively good value ‘Pro’ package. However for a while I have wanted to own my own data and therefore I wanted to move to a solution where I could host my own images which were more under my control. Therefore I decided to go about constructing a PhotoBlog theme using WordPress whilst maintaining some of the Flickr features we have come to know and love. Here is how I went about building my WordPress PhotoBlog theme.
The first thing to do was to think of a domain name that could be used in order to house the blog. I thought for a while about this as it is an important stage as it will be with you for a while. Looking at what I wanted and what was available meant I was limited although I finally settled on photomark.me. I quite like the .me top level domain (as you can tell from this blog) as it works well for anything relevant to a person in my opinion. Once I have purchased the domain I added it to my cPanel account and then installed the latest version of WordPress.
The next major decision which I faced was to decide on the different sizes of photos that I wanted to create for each photograph that I uploaded. This was something that I have always liked with Flickr in that when you upload a photo it creates a range of different sized photographs which you can use. I wanted to use this in this blog too. With WordPress already producing a Thumbnail, Medium and Large image alongside the image you upload it does a lot of this for you but I wanted to add a few more image sizes. Thankfully you can declare extra image sixes using the add_image_size() function in your themes functions.php file.
The next thing was that I wanted a way to display links to all the available image sizes next to each of the photos. A quick search around and I found Justin Tadlock’s solution of Linking to All Image Sizes in WordPress. This was great as it includes the images sizes you have added as well as the standard WordPress image sizes.
The next part was the design. I wanted to use a similar design to this blog to keep the same feel, but I wanted it a little more ‘arty’ Therefore I used some paint splurges here and there on the page titles and added an extra column to display detailed meta information about each post. I also wanted to make use of the WordPress attachment pages to display individual images on. The idea being that a featured image would display on the archive pages, then on the single post page the WordPress gallery feature would display a list of thumbnails and clicking on these would take you to a page which displayed that images larger with the links to the other sized images.
Lets take a look at the different page templates that where designed and how they were produced etc. We will start with the index.php template.
Index.php Template File
The image below show what the template looks like when displayed on screen. As you can see I wanted to include quite a bit of information about the post from this page including a sample image from the gallery.
By including both photos and video in the blog it allowed me to take advantage of the new WordPress 3.1 post formats feature. By adding the appropriate post format to a post, whether it be gallery, image or video this allowed me to use the template tag has_post_format() to check which post format a specific post had and then style the post accordingly. WordPress also assigns a class including the post format when using the post_class() tag.
The WordPress featured image function [the_post_thumbnail()] was used in order to display a selected image from the images uploaded to the post. This image can be called at any size by passing a specific WordPress size to the_post_thumbnail() or by passing one of the sizes defined when we used add_image_size() to declare our custom image sizes.
Single.php Template File
The purpose of this file was fairly straight forward. It needed to display the gallery, which just used the normal WordPress built in gallery functions and display the content of the post as well as providing standard commenting functionality.
Image.php Template File
This was the first time that I have really utilized the use of the this WordPress template file. It is used to display the individual image in your posts gallery. Therefore when clicking on an image thumbnail in the post gallery you are taken to a page template to display the image. The great thing is that you can style and design this as you wish. The design I have chosen is below:
The final thing that I wanted to do was to create shortlinks for each post using the new domain that I bought. I did this using Yourls as well as the associated plugin that goes with it. Find out how I did this in this earlier post that I wrote about setting up and integrating Yourls with your WordPress website.
Most other stuff on the site is standard WordPress theme stuff which is pretty straight forward. I am pleased with the outcome although I just wish I was more of a designer to make it look really cool. Still I suppose we all have our skills! I would love to know your thoughts so please leave a comment below.
Vist the new site at http://photomark.me
Leave a Reply