Ant Smith

Articles

My Website Framework - Part 4: Richer Pages

The first version of my website framework adopted the philosophy that if a thing was worth publishing it was worth tending, caring for - whilst keeping the barrier to publication low; I didn't want to feel I could hardly be bothered to publish a piece because of the messing about that was needed. Simple yet rich pages that could show a piece off at its best.

Publication is simple - put a text file in the right place and a new page appears in the website. Adding up to 5 other files makes the page progressively richer (additional, author, notes; image; video; audio; and keywords).

I got to thinking though, that no matter how rich and compelling each piece on the site may be they are floating around with millions of other similar things. "Google, how many poems are there?" Actually, this is one of those questions your can't google - but there are 6.9 billion poems. Take my word for it.

Nobody will ever find yours.

(nor mine)

And do you know, artists are the more remembered for their oeuvre than any given piece. And not just remembered, but recognised and valued in their lives, if they be so lucky. More important than making individiual masterpieces, one must build a canon that tells a supra-story through and around the individual works.

Or at least, this has become my belief.

So version 2 of the framework lets us do that. Using richer content than just the 6 basic components allows us to draw in aspects of our lives, our experiences, in order to tell these grander tales.

Right, that's it for the philosophy, the rest is geeky detail. If you're reading this out of politeness you can leave now if you like. No harm. No foul.

Although, you would miss the beautiful footwork as I dribble Version 1 to Version 2 in a way that some famous dribbling footballer, whom I can't think of of course, might have enthralled you upon your settee if website design were ball games for men.

Version 2 Enhancements

First off, in Version 1 the concept of 'rich pages' only applied to 'item' type pages (poems, stories, articles...) and not to 'photo' type pages (galleries, collections, photographs).

I was never going to create all forms of rich content for every simgle photograph - so this was reasonable.

But, looking at collections of photos I could see there are some very compelling stories to tell. Take a look at the example page I'll be using in this article: Sing For Your Supper.

So now photographic collection pages are very similar to the 'item' pages; and they can be made just as simply with the 6 basic rich content types.

The various sub-directories (authornotes etc...) are created in the directory of the gallery in which the collection resides. Photo collection pages automatically start with the collection of photos. The page then continues just as an 'item' page does.

So now the website contains more rich pages.

The next step is to make a selection of these richer still.

Rich pages are good because everything gets placed and styled on the page automatically. But having just 1 rich item of each type is limiting.

However when we add more items, we find we need greater flexibility in where they are positioned. In fact even with the basic rich items, their automatic position on the page is sometimes, well annoying.

So Version 2 allows multiple items of each type, but requires the author to manually indicate where these things should appear on the page.

Ie. making the automatically rich pages even richer requires manual intervention.

This is achieved by placing 'macros' into the text files that fulfill each section of the page. You can read all about macros in my previous website framework article (part 3).

Making Version 2 Richer Pages is a matter of uploading content with appropriate names into appropriate locations and then adding 'macro instructions' into the text files.


Where to put the richer content

This is simple in principle. Each of the places where the basic rich items live can now have a sub-directory, with the same name as the base item. These sub-directories are then filled with the additional content, and they are later referenced by the macro instructions added to the various text files.

Here's a picture of what the website directory structure looks like, and where consequently all of the additional content turns up on the page:

The disk and page structures

So you can see that sing-for-your-supper(1) has an automatically included sing-for-your-supper.txt author note(2) AND a sing-for-your-supper sub-directory with 7 additional text files in it. These are the additional notes(A) that we will place on the page later.

BUT, you can also see a sub-directory called 'albums'(B).

This is a further extension for photo collection pages (item pages don't need this extra sub-directory).

Version 2 has introduced the concept of 'albums' within collections. In this example I have created an album for each of the venues that Sing For Your Supper has used (well, the ones where I have done some photography). You'll see that the photo collection directory(6) now has one sub-directory for each album, and the collection images are inside these albums.

Each of these albums then has its own description, in a text file (same name as the album) in the special 'albums' sub-directory of the sing-for-your-supper additional notes directory(B).

To the left of the directory tree you can see the basic rich items that I have used for the page. To the right, you can see all of the supplemental richer items that have been manually placed on the page.


Adding richer content to the page

Additional Notes

In this example I have created 7 additional notes containing recollections from 7 different people. Unlike the basic 'authornotes' file these do not automatically appear on the right hand side. In fact they don't automatically appear at all! I have chosen to use them in an 'accordion' at the bottom of the main section. To achieve that I put the following text into the base sing-for-your-supper.txt(1) file:

###accordion

Here's a selection of recollections from some of S4YS' regular performers

photography,performance-gigs,sing-for-your-supper,01-archie-shutter

photography,performance-gigs,sing-for-your-supper,02-hilary-bennett

photography,performance-gigs,sing-for-your-supper,03-panama-dave

photography,performance-gigs,sing-for-your-supper,04-dan-hunt

photography,performance-gigs,sing-for-your-supper,05-pat-clarke

photography,performance-gigs,sing-for-your-supper,06-beadyman

photography,performance-gigs,sing-for-your-supper,07-christine

###

At this point you don't need to worry about the directory structure you used to upload all of the content.

Each line states:

  • The site section where the referenced file can be found.

  • The gallery within that section where the referenced file can be found.

  • The collection of the gallery where the referenced file can be found.

  • The file itself.

If you are adding a file to an accordion from an 'item' type section of the site (rather than, as here, from a 'photo' type section) you specify the item instead of the gallery and the collection.

Playlists

There are two playlist players in Version 2 - one for an audio playlist and one for a video playlist (can you image Version 3 yet? I'll make a note later...)

The files they use are all in the sing-for-your-supper sub-directory of the media directory.

Each mp3 amd mp4 can have an associated text file (in the same place and of the same filename) which allows you to provide a title (where the filename isn't good enough to compose the title because of the need for special characters like apostrophes).

For audio files you can add a full description, or a transcript, inside this text file. That description can be made to display in an 'about the audio' box on the screen; see the section on levering HTML, below.

The video playlist player doesn't have this 'about' feature because you can't be reading about the video while you're watching the video; not sensibly anyway.

Audio tracks also have an associated image - these are jpg files of the same filename as the audio mp3 and in the same location.

Video tracks, again, don't need these. You can stick a file called 'poster.jpg' into the sing-for-your-supper media sub-directory. This will be displayed in the video 'screen' before any video has been played, so you're not looking at a blank 'screen'. I haven't actually bothered with that here though!

Both of these players are on the right-hand-side of the (desktop) view of the page - because I have added them to the basic sing-for-your-supper.txt author note(2). Here's the instructions I added into that note:

###audio-player

photography,performance-gigs,sing-for-your-supper,s4ys

photography,performance-gigs,sing-for-your-supper,s4ys-birthday

photography,performance-gigs,sing-for-your-supper,s4ys-qh

photography,performance-gigs,sing-for-your-supper,archie-maggie-mambo

photography,performance-gigs,sing-for-your-supper,panama-dave

photography,performance-gigs,sing-for-your-supper,africa

###

</div></aside>

<aside><h2 class="panel-h2">About the audio</h2>

<div id="lyric-a1" class="lyric hide-overflow">

</div></aside>

<aside><h2 class="panel-h2">Videos</h2>

<div>

Here's a couple of videos from 2012. A slideshow of photographs I took at Sing for Your Supper nights, and a performance from the old Queen's Head (before it was gentrified).

Also, videos 'from the contributors'. Note especially, Hilary is performing at The Balham Bowls - which was an awesome room; a real pleasure to perform in.

###video-player

photography,performance-gigs,sing-for-your-supper,s4ys-2012

photography,performance-gigs,sing-for-your-supper,s4ys-at-the-queens-head-2012

photography,performance-gigs,sing-for-your-supper,r-chee-s4ys-24-04-2009

photography,performance-gigs,sing-for-your-supper,hilary-bennett

photography,performance-gigs,sing-for-your-supper,panama-dave-hand-on-heart

photography,performance-gigs,sing-for-your-supper,pat-clarke-at-the-magic-garden

###

You'll see that items in the playlists are identified in exactly the same way as we identified addiotnal text files for the accordion we used.

I'll explain the other gubbins I've used here later, in the section about levering HTML

About this Collection

Werbeniuk haveing breakfast (photo by Christine)

Photo Collection pages end with the 'About This Collection' section. Each of the text files in the 'albums' sub-directory(B) creates a sub-section here. Typically there will be one sub-section text file(B) to describe each of the collections's albums(E). You may add additional text files to create further sections - as I have on the Sing For Your Supper page in order to present the hosts - note how I have named the files to ensure the hosts are presented first.

The second example here (from my Werbeniuk page), shows how the page also provides individual photo descriptions.

I don't have a lot of photos with accompanying text. Version 1 believed that Rich Content belonged to the item pages but that photographs could speak for themselves.

That's fair enough from the perspective of the individual works, but if you visit an exhibition you expect that at least there will be something to read about the works (maybe an expensive brochure). So when presenting a collection of images, it is certainly good to be able to extend the story into the individual images themselves.

But, the photographs must have the opportunity to stand-alone also. So they can be appreciated for what they are before we turn the pages of the brochure and read about what someone else thought they should be! This is why the collection is presented as first the images alone (at the top of the page) and the greater detail of them comes much later, in this section.

Wherever an image can be found (inside the albums of a collection, or within the incidentals uploaded within the 'images' directory) they can live with a text file of the same name; which then provides the display title and description of the image.

You can see in this example how any images in a colletion's albums that have descriptions get included as an accordion within the About This Collection's section for the album. This happens automatically, the accordion does not need to be manually entered into the album text file(B). You need only add the descriptions to the photographs to see them appear here - and they will do so whether you have provided an album description or not.

My photography workflow now includes writing image descriptions when I create the image. I find that these add a dimension that people enjoy when a new album of works is shared. It is quite impossible to go back over my archive and add descriptions for all ~5,000 images in the galleries - but as I refresh each collection I am retro-writing descriprions for around 20% of the images. These descriptions are focussed on the art and craft of photography - how I made the image.

This means that the website content provides 3 perspectives:

  • The work itself (poem, story, article, photograph...)

  • The context of the work in the life of the artist

  • The mechanics of the work in the craft of the artist

But I am not following a slavish formula. Some collections will be left as simple presntations of a group of images. Others will be adorned with deep biographical contexts (as with Sing For Your Supper). And others will be largely supporting the presentation of the craft. Or some mix.

Incidental Images

One of The Framework's strengths is that all of the various text files can contain the instructions that insert the richer content; so there is great flexibility in what can be displayed where. From the above you have seen how accordions can be added to the main text file and playlist players to the author notes file. And now here, in the About This Collection secton you can see that I have added the two additional images uploaded to the images/sing-for-your-supper(C) sub-directory. In this case I have used the 'callout' macro instructions, as so:

###callout-left

Calm Carl

photography,galleries/performance-gigs/images/sing-for-your-supper/calm-carl-spaced-out

Carl in spaced-out

<i style="font-size:14px;">And of course, this page can hardly be complete without hearing from the man himself - although I have no idea just what it is that he will say...</i>

TBD...

###

###callout-right

Sarah-Jane

photography,galleries/performance-gigs/sing-for-your-supper/bread-and-roses/42-sarah-jane-02

The multi-talented Sarah-Jane

<i style="font-size:14px;">As much as I see S4YS as Carl's brainchild - it is the support and involvement of others, and most especially Sarah-Jane, that helped it to blossom - here's Sarah-Jane's recollections of taking turns to steer the ship:</i>

TBD...

###

I could have equally well employed the 'img' macro; it's just a question of how you want the content displayed. To include an image (with either 'img' or 'callout' macro instructions) we identify in which site section it can be found and then the full filepath of the image within that site section.

This isn't quite as smooth as identifying elements of playlists or accordions - where you only need to remember the names of things (galleries, collections, albums, items); but it does mean you can identify images wherever they may be, even if for some reason they lay outside of the standard disk structure. It is a question of balancing the ease of use that automation provides against the frustration caused by quirks or special cases.

Incidental Image Sets

Showing incidental albums added to a page

Photo Collection pages conveniently add all of the images, albums and descriptions to the page as you have seen. Item pages don't have these 'collections of images' - they only have the 'incidental images' that have been uploaded. In this example from Shorty (an item type page in the poetry section) you can see how sets of incidental images have been (manually) added to the page. This is achieved by using the 'gallery' macro instruction. On this page it looks like:

###gallery-campaign

poetry,shorty,

###

Where you can see I have identified just the site section and the item. The framework automatically looks into the 'shorty' sub-directory of the 'images' directory and builds its display from everything it finds there, treating each sub-sub-directory as an album and bringing in all of the images it finds. There is no means given to display the additional descriptions that these images might have; that's a feature of 'collections of images' which doesn't apply to sets of incidental images. That's just how it is.

Refer back to my previous article on text macros to learn more about gallery displays of incidental images.

Levering HTML in the page layout

As the amount of content grows in each section of the page it becomes necessary to visually group or dived the material. In the main secion I use thin horizontal lines to do so, and these can be added to a text file using a standard HTML horizontal ruler tag:

<hr />

This automatically adopts the colour accent of the site section, and I have used one just before the accordion of recollections on the Sing For Your Supper page.

On the right-hand side (desktop view) I needed much stronger divisions in the content. Rather than display the entire 'author note' in a single panel I wanted to break that content up into (in this case) 3 panels: Audio Recordings; About the Audio; and Videos.

To create a new panel I have inserted the HTML that The Framework uses to end and start panels.

The Framework initially creates the author notes panel (with the title from the author note file(2)). Then, inside the author note text file I have added the HTML that closes this initial panel and creates a new panel - as so:

</div>

</aside>

<aside><h2 class="panel-h2">Videos</h2>

<div>

In turn these lines:

  • Close-off the white container of the initial (or previous) panel

  • Close-off the panel itself (which is an 'aside')

  • Open a new ('aside') panel and give it a (h2: level 2) heading.

  • Open a new white conatiner for this panel's content

You can use any HTML in any text file (in fact you have to if you want to include links).

If you look back at the 'Playlists' section above you'll notice that the second panel is essentially empty - it's inner white container is opened with a 'div' but that is immediately followed by a 'div' closure:

Close Initial Panel:

</div></aside>

Open 2nd Panel:

<aside><h2 class="panel-h2">About the audio</h2>

Open inner container:

<div id="lyric-a1" class="lyric hide-overflow">

Close 2nd Panel:

</div></aside>

Open 3rd Panel:

<aside><h2 class="panel-h2">Videos</h2>

Open inner container:

<div>

...continue with content

In this case we have given the 2nd panel's inner container (the 'div') a special ID and Class - which allows the framework to inject the descriptive text file of the currently playing track into this panel's conatiner. It's a special feature for the audio playlist player. Don't worry over much about it.


Version 3 Possibilities

Version 1 did its best to tell the fullest and richest story of each 'work' in the website, be that a poem, a story, a photo etc...

Version 2 attempts to tell the grander story of items in relation to each other and the wider world.

I dunno yet what the premise for Version 3 might be - or even if there will be a version 3 (it will take quite some time to tell all of the version 2 stories, and I haven't even finished telling all of the Version 1 stories yet!).

However, there are some things that I think will change:

  • Photo Collection pages are now so similar to Item pages that this distinction will disappear

  • There will be one type of playlist player which will handle both audio and video

  • I'd like to invert the directory structure, so that all of the rich items and richer additional items are grouped together for the photo collection or item to which they pertain - so there's less searching about for the right place.

  • Maybe I will 'improve' the handling of incidental images so that they can have descriptions like collection images have.

I might grow this list, and if you happen to be using the framework, feel free to comment below (if facebook allows you to) or e-mail me with any suggestions of what you'd like to see. But unless I know you, you should probably use the 'Donate' button first...

Download the framework

So you can download this framework for free here.

Or you could take a moment to value the efforts and hit the DONATE button in the footer of the page first.

It kinda depends on what kind of a person you want to be...

Articles