{"id":580,"date":"2011-05-13T00:57:38","date_gmt":"2011-05-12T23:57:38","guid":{"rendered":"http:\/\/muttznutz.net\/muttzblog\/?p=580"},"modified":"2011-06-07T00:06:32","modified_gmt":"2011-06-06T23:06:32","slug":"keyword-classes-pt-3-using-the-keywords","status":"publish","type":"post","link":"https:\/\/muttznutz.net\/muttzblog\/post-processing\/keyword-classes-pt-3-using-the-keywords","title":{"rendered":"Keyword classes Pt. 3 – Using the keywords"},"content":{"rendered":"

The first of these articles<\/a> I talked about image metadata, and explained why I decided I needed a way of treating different keywords in different ways. I explained how keywords are now accessible in lots of different software packages.<\/p>\n

The second article<\/a> went through the main constraints I found in setting things up, and how I worked around some of the pitfalls.<\/p>\n

This article explains the different phases through which my website evolved, as new technologies became available.It shows practical examples of how Keyword Classes can be deployed in an image-oriented website.<\/p>\n

Website evolution<\/h3>\n

Before I get too into using the keyword classes, it’s probably worth going through the three stages through which my website evolved.<\/p>\n

I’ll be looking at these pages primarily from the perspective of loading image pages.<\/p>\n

Hand-crafted<\/h4>\n

This involves building web pages individually. You can do this by hand-coding HTML or by using a web tool such as HTML-KIT, or (most commonly) using tools such as Word and FrontPage<\/a>.<\/p>\n

The main disadvantages of this approach are that each page needs to be built separately – and needs to be individually integrated. Links need to be tested. And – most importantly – when you bring a new page into the site, then all of the other pages need to be reloaded. This maintenance overhead makes it unsuitable for all but the most simple of sites – with more than about a dozen pages, then updates become very hard work.<\/p>\n

Keyword classes have little relevance here – there are no automated processes to use the information.<\/p>\n

Static HTML pages<\/h4>\n

The next stage was to use a tool that generates an HTML album – typically with thumbnails and detail pages. That album is generated in its entirety, and is typically produced, and then uploaded, as a complete folder. To make changes, you typically need to regenerate and reload the entire album.<\/p>\n

Typically, image processing software will include an album generator – Photoshop Elements and Paint Shop Pro both supported album software, and Lightroom still offers one of these options.<\/p>\n

The problem with most of these is that they don’t allow customisation from the basic available templates – so you’re limited to being able to change a few colours, or choose how many\u00a0 columns to have on a page.<\/p>\n

One tool stood out in this class, however. JAlbum<\/a> provides a framework, and is written in a standard, openly available programming language (Java) so developers could change the look-and-feel of the albums. These are released as “skins” – and skilled users can personalise the appearance through the CSS<\/a>.<\/p>\n

Those with development skills can – as I did – can delve into the code and change the code to incorporate conditional processing to handle keywords (I had a development background, but had to teach myself Java<\/em>). For my implementation, I integrated JAlbum with a MySQL database with the log of all my dives. There are still a couple of legacy albums<\/a> on my site that were built with JAlbum.<\/p>\n

Again, however, if you wanted to update your site, then you had to regenerate and reload all the HTML pages. A bit of a grind (I’ve now got 4,000 images online)<\/em> but much more feasible than the first option.<\/p>\n

Dynamic HTML pages<\/h4>\n

This method uses a web scripting language. I use php<\/a>, which is a cross-platform tool – so I can develop on a PC, Mac or Linux machine (my web server runs Linux). There are Microsoft alternatives, but they tend to involve integrating several different tools.<\/p>\n

Now the database can be held on the server, and I query it interactively.<\/p>\n

But the most important thing is that the page generation is scripted, so (for example) introducing a new sidebar icon may involve changing only one file – and all of the pages will be updated. I’m guaranteed the same behaviour for all pages. Much less hard work.<\/p>\n

Using the Keywords<\/h3>\n

OK, let’s get on with the serious stuff. How can we use these keywords ?
\nLet’s break down how I’ve got it to work for one of my pages<\/a> :<\/p>\n

\"Example<\/a>

Example web page<\/p><\/div>\n

First – check out the names showing the fish – the positioning is set by the Keyword class – and the [spf] actually creates a link to another site<\/p>\n

\"Use<\/a>

Use keywords for conditional formatting \/ positioning<\/p><\/div>\n

I can set the page title to the value in the Dive Site name – keyed from the “dn” keyword class<\/p>\n

\"Use<\/a>

Use database lookup to set (e.g.) Page title<\/p><\/div>\n

And – in fact – I can set the title for the overall page – something Search Engines are particularly fond of.<\/p>\n

\"The<\/a>

The title is key for Search Engines<\/p><\/div>\n

I can load a whole lot of information about the dive from my database – it would be a real pain to load it all, and virtually impossible to present it :<\/p>\n

\"You<\/a>

You can retrieve lots of data from a database<\/p><\/div>\n

Just to show how things show up “under the bonnet” (View-> Page Source from your browser) you can see that I’m setting the keywords for the Web Page<\/strong> as well as just the image.<\/p>\n

\"HTML<\/a>

HTML source - populating title and page keywords<\/p><\/div>\n

If you’re really into the web design side of things, you can pretend that the selected keywords form part of the image filename. This means using .htaccess redirects on Unix\/Linux, but is a very powerful tool (although its often viewed as a form of voodoo. Here, the image name is actually abu_B050216.jpg, but it appears as yellow-spotted-triggerfish-pseudobalistes.jpg in a folder called abu_B050216<\/p>\n

\"View<\/a>

View Image Info<\/p><\/div>\n

Again, this gives more credibility with the search engines (although not as much as lots of words, unfortunately).<\/p>\n

You can also use the keywords to make your search engine Sitemap more relevant – I’ve automated the production of my sitemap with a php script that uses the same parsing functions as the web page script. You could do the same, perhaps, with RSS feeds (I’ve not worked on that yet !).<\/p>\n

Here’s a snippet (for the same photo) from my sitemap file :
\n <url>
\n<loc>https:\/\/muttznutz.net\/images\/abudabab201011\/slide\/abu_B050216.html<\/loc>
\n<lastmod>2010-11-24<\/lastmod>
\n<image:image>
\n<image:loc>https:\/\/muttznutz.net\/images\/abudabab201011\/abu_B050216\/yellow-spotted-triggerfish-pseudobalistes.jpg<\/image:loc>
\n<image:caption>Photo at Marsa Abu Dabab: Yellow-spotted triggerfish<\/image:caption>
\n<\/image:image>
\n<\/url><\/code><\/p>\n

… I’ve picked up the Dive Site and the name of the fish in the caption field.<\/p>\n

It’s unfortunate that Google doesn’t actually seem to look at the image sitemaps they specified<\/a>, but I guess they’ll get around to it eventually…<\/p>\n","protected":false},"excerpt":{"rendered":"

The third article talks about how my website has evolved through different generations of technology, and shows different ways that I’ve used Keyword Classes to automate and optimise the image pages on my website<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[7,5],"tags":[118,125,117,134,119,84,136,129],"class_list":["post-580","post","type-post","status-publish","format-standard","hentry","category-keyword-classes","category-post-processing","tag-exif","tag-google-sitemaps","tag-iptc-keywords","tag-keyword-classes","tag-photo-metadata","tag-photo-workflow","tag-website-tools","tag-workflow"],"_links":{"self":[{"href":"https:\/\/muttznutz.net\/muttzblog\/wp-json\/wp\/v2\/posts\/580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muttznutz.net\/muttzblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/muttznutz.net\/muttzblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/muttznutz.net\/muttzblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/muttznutz.net\/muttzblog\/wp-json\/wp\/v2\/comments?post=580"}],"version-history":[{"count":23,"href":"https:\/\/muttznutz.net\/muttzblog\/wp-json\/wp\/v2\/posts\/580\/revisions"}],"predecessor-version":[{"id":582,"href":"https:\/\/muttznutz.net\/muttzblog\/wp-json\/wp\/v2\/posts\/580\/revisions\/582"}],"wp:attachment":[{"href":"https:\/\/muttznutz.net\/muttzblog\/wp-json\/wp\/v2\/media?parent=580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/muttznutz.net\/muttzblog\/wp-json\/wp\/v2\/categories?post=580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/muttznutz.net\/muttzblog\/wp-json\/wp\/v2\/tags?post=580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}