My website, before I turned it into a blog, consisted mainly of a small portfolio. I hardly ever updated my portfolio except that I added a few pictures now and then in the photography section. Even though I was technically capable of designing and coding a minor addition or update could sometimes mean major work. This is one of the reasons I switched to the WordPress blog software; to facilitate easy additions. What WordPress doesn’t facilitate however is the easy uploading and managing of (multiple) files, see my post “Uploading and file management in WordPress.”

Because of the serveral reasons mentioned in my previous post I tried a few standalone galleries that handle the uploading and managing of photos much better. I tried two galleries that are both written in PHP (just like WordPress) and offer plugins to integrate with WordPress.

First I tried Gallery2 with the WPG2 plugin for WordPress but this resulted in some problems. On top of that I couldn’t get the Gallery to integrate in the look of my WordPress theme and after fiddling with the files for hours I simply gave up. I moved to the nice looking minimalistic Zenphoto with the ZenPress plugin for WordPress. File uploading is very easy, you just upload everything to a folder with the appropriate name and it automatically creates a photo folder with that same name. You can adjust titles and other information instantly thanks to Ajax. The ZenPress plugin adds a button to your visual editor to add photos but the interface is rather awkward. First you have to select a category and then you have to insert your pictures one by one, where you can chose from a range of options such as size and alignment for each of them. Unfortunately there is no way to insert a whole album into your blog with one click. You can set defaults for inserting your pictures but even with this option if you want to insert thumbnails for all the pictures in an album this means that you have to follow (at least) three steps:

1. Click ZenPress button
2. Select album
3. Select picture

Imagine if you have twenty pictures in an album. Of course you can link one picture to your album but then your visitor leaves your blog and goes to your album. What I want is to integrate the albums into my blog.

Another problem I encountered is that I am limited to a certain amount of webspace and bandwidth by my host. I have a basic account which means I can upload a total of 500 Mb and have 10gig a month of data traffic. When uploading pictures you easily reach the 500 Mb (a high res picture is almost 2 Mb). My main reason for using my own webspace for my pictures was that I wanted all my things in the same place. Of course I could buy more webspace, doubling my webspace to 1gig (and bandwidth to 20gig) would mean an additional 30 euros, but my whole photo archive is over 25 gig! It also wouldn’t solve my problem of integrating a gallery with WordPress. I had to search for a solution that might include hosting my pictures somewhere else. Then I rediscovered Flickr (Pro), which is even cheaper than doubling my webspace. A long time ago I used to have a Flickr account but I never used it because I used my own webspace so I deleted my account. But Flickr has grown (and so has my archive!) and expanded and don’t even get me started on the features they offer! Continue reading for my Flickr adventures and how to make a WordPress Flickr photoblog.

I have been wanting to bring my photo gallery back online but I really have been struggling with it. WordPress’ uploading system doesn’t facilitate easy and quick uploading of multiple files or folders. You can upload one file at a time through the interface which will be uploaded to the uploads folder in the content folder on your webserver. The file is stored in a subfolder with the name of the current month in a folder with the name of the current year. For example: wp-content/uploads/2007/04/filename.jpg

Uploaded files are managed by date instead of name or content further underlining the chronological descending order built into blogs (and blog software). In the interface you can only upload files when you are writing a post and after uploading the file is linked with this post. If you upload several files, one by one as multiple file uploading is not possible, you can browse through them using the “Browse” tab. If you want to use the file again for a different post you have to browse through all your uploaded files under the “Browse all” tab. The files are sorted in chronological descending order and not by post or filetype making it hard to find the right file. Also all the picture files are displayed as a thumbnail picture (which makes it hard to see the difference if there are two pictures that are quite similar) and the text is displayed by it’s title.

The upload form is separated from the writing form and the interface makes it seem that adding anything besides text is optional. It also indicates that adding more than a few images (or other files) to your blog post or reusing old files is not common. I think this points back to the days when blogs were text only but nowadays we want to add photos, videos, podcasts and more. To make this possible plugins have been developed that allow you to dissolve some of the restrictions of WordPress. Plugins have been developed to make it easier to integrate a photo gallery in WordPress. This series will deal with a few of these galleries and plugins and it will show you how to turn your WordPress blog into a photoblog using Flickr.

I installed the Now Reading plugin written by Rob Miller to display the books I am currently reading in my sidebar. The reason I chose this plugin is because it allows you to create a database of your books and offers reviewing possibilities. Installing and configuring the plugin was easy but after adding my first book the layout of my sidebar was messed up (see picture on the left). The border of the box had disappeared and the design did not quite match the rest of the page. My first guess was that it had something to do with the hierarchy and inheritance aspect of style sheets because CSS determines how the plugin is displayed. Once the page is loaded the PHP code of the plugin is “executed” into HTML (more on this later) which is sided by the style sheet which rules the style/layout.

I took a look at the PHP code from sidebar.php located in the templates folder (now-reading/templates/sidebar.php) and noticed the following:

Read More…

I recently redesigned my blog because I was not completely satisfied with the old look. I thought it was a bit too dark and a bit too messy. Instead of starting from the scratch and building my own theme I adjusted the Coffee Spot theme I was using. There is one main reason why I did not attempt to build my own theme from the scratch: I am not a coder.

I am not a PHP coder
I can read code and interpret most of the code so most of the time I can adjust the code to my needs but I cannot write it so that it suits my needs. I am sure I could learn it if I had the time but unfortunately time is not always on my side.

I am not a CSS coder
Some people argue CSS is not code while others argue that markup languages are in fact code (more on this later). I side myself with those who see CSS as code and I see and experience CSS as an executed markup code. The effects of the coding are not visible until it is interpreted and executed by a browser. I have never really learned CSS but because I know HTML it is fairly easy to interpret and adjust. In the early days of making websites content and markup were interwoven in HTML. With the advent of CSS those two were separated making it easier and quicker to adjust the look of a website. For example font type and size were no longer directly coded into HTML but defined in a separate Cascading Style Sheet. The fact that the style sheet is cascading means that it is highly hierarchic. This hierarchy is the main thing I struggled with while changing the design of my site.

One of the powers of style sheets is that there is a hierarchy of relationships. These relationships are defined by the concepts of cascade, inheritance, and specificity within the language of CSS.¹

I am not completely done with the redesign of my site yet but I am amazed that pretty much everything was accomplished just by changing things in the style sheet. No need to adjust the PHP except for adding one single line in the footer to show my tagcloud which was previously nested in a widget (more on PHP in widgets later). I am quite eager to dive into CSS to fine tune my site. Before and after the makeover:

The main problem I am focusing on now is the fact that my Now Reading plugin doesn’t display my books correctly. I am pretty sure this has to do with the hierarchy and inheritance aspect of style sheets.

1. Holzschlag, Molly. Cascading style sheets : the designer’s edge . San Francisco Calif.: SYBEX. p. 43 [↩]

I first came into “contact” with Justin Shattuck’s when I commented on his post about WordPress Plugin Development. He seemed to be asking the same questions as I was regarding the configuring and using of WordPress plugins. I am planning on dealing with some of these issues in my MA thesis Blog Software and the Act of Blogging.

When I visited his site again this morning I noticed a post titled “Write About My Site, Make A Buck.” I am not desperately in need of five dollars but I just thought it is a funny request. I kind of see the point in offering people a few dollars for their effort too: people might be inclined to take the request more seriously and instead of saying “Your site rocks” in the comments write a decent thought through post about it.

I graduated in Interaction Design at the Utrecht School of Arts before I went to the University of Amsterdam to study New Media. Usability is a big issue in Interaction Design and I’ve read all the usability gurus such as Donald Norman, Lon Barfield and Ben Shneiderman. One of the main things that I immediately noticed about Justin’s site is a lack of contrast. One of the main rules is that “text should use contrast not color” where black text on a white background is the best option. They lack of contrast caused by greyish blue text on a dark grey/black background could be greatly improved (even my young eyes could need a bit more contrast).

Lon Barfield (and I) would applaud the changing colors when selecting a different tab in the navigation. What is recommend though is giving the selected tab a different color too so that the user knows where (s)he is. Another thing I mentioned in the navigation is that above the main navigation tabs there are three more links. The JustinShattuck.com link leads to the index page thus having the same function as the Home tab.  The Contact Justin and My Vitals links seem like they should fall under the About tab. Or maybe put My Vitals under About and make a new Contact tab. Just my two cents!

In general it is a nice and clean site to look at with an easy navigation. What I liked most about Justin’s request is that it makes me think about my own site and it’s usability. I have noticed before that I strongly dislike my hovers (mouse overs) and the way links are displayed. I should change it when I have some time (altough that seems to be a bit of a problem lately).

After I added all my papers and pictures again I decided to make a backup. For some odd reason something went wrong during the backup. Don’t ask my how, why or when. Suddenly my site didn’t show up at all. Nothing. After resetting reading permissions on my server things seemed to be working again but with a default WordPress theme. How odd is that? I changed back to the nice CoffeeSpot theme and reactivated my plug-ins. So now I am crossing my fingers.

I am actually kind of scared of making another backup but I am going to be brave and try again. I am planning on adding some new plugins and features such as the Ultimate Tag Warrior.