Forum OpenACS Development: creating a new skin (template) to photo album

creating a new skin (template) to photo album

I am trying to create a new javascript template (skin) to show photos on photo-album package.
The album template i want to replicate is an AJAX image gallery created by MES
http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/

Briefly, the template is totally static. The images were previuously edited and storaged. The javascript uses static paths based on tree directories "left", "center" and "right" to bring images to the screen. They are left, center and right perspectives of the image.

My idea is to change it into a dynamic format to grab the images directly from content-repository.

Currently Photo-Album package storages tree versions of the same image: base, viewer and thumbnail.
Those are respectively the image on its original size, the image on a smaller size and the thumbnail of the image.

I extended photo-album to storage two more versions: left_ image_name , right_ image_name . Those are left and right perspectives of the image with the same size of the thumbnail, which i am gonna use as the center perspective of the image. I setup everything properly. Photo-album packages works straight as it was before. No errors, the whole base structure is done well.
Now i started the second part of the job which is to show the images using the new template(skin).

The ending point is an adp page which contains a javascript code that loads the images. It is showed bellow:

script type="text/javascript"
!--
httpReq = getHttpReq();

if (httpReq) {
xmlDoc = getXmlDoc(httpReq, "photos.xml");
if (xmlDoc) {
photos = xmlDoc.getElementsByTagName("photo");

SLIDEFLOW_DATA['containerElement'] = $('slideflow');
SLIDEFLOW_DATA['images'] = new Array();

for (var i=0; i photos.length; i++) {
alert(photos.item(i).getElementsByTagName("src")[0].childNodes[0].nodeValue);
SLIDEFLOW_DATA['images'][i] = photos.item(i).getElementsByTagName("src")[0].childNodes[0].nodeValue;
}

slideFlow = new Slideflow(SLIDEFLOW_DATA);
numPhotos = photos.length;
}
}
//--
/script

Attention to lines xmlDoc = getXmlDoc(httpReq, "photos.xml"); and the array SLIDEFLOW_DATA

It uses an xml file to read the image info with the following format:

−photogallery
− photo
src bald-eagle-head.jpg /src
title eagle /title
subtitle eagle desc /subtitle
/photo
− photo
src american-alligator-.jpg /src
title alligator /title
subtitle alligator desc /subtitle
/photo
...
/photogallery


src holds the name of the image loaded. Each image as the same name in the tree directories ("left/bald-eagle-head.jpg", "center/bald-eagle-head.jpg" , "right/bald-eagle-head.jpg")

The issue is how to define dynamically the path where the images are located. Because in the javascript the path is static and the xml provides the name of the image to be grabbed from those tree directories in a static way.

Which in the case of content-repository, it totally varies for each file.
We can easily see how the directory paths are declared in the array SLIDEFLOW_DATA

var SLIDEFLOW_DATA = {
'imgWidthNormal': 100, 'imgWidthTilted': 75, 'imgHeight': 90, 'slideDistance': 10,
'onCenterClick': handleSlideClick, 'handleSlideMove': handleSlideMove, 'containerElement': null,
'pathLeft': 'photos/left', 'pathCenter': 'photos/center', 'pathRight': 'photos/right',
'transparentImg': 'images/transparent.gif', 'cursorOpenHand': 'images/openhand.cur', 'cursorClosedHand': 'images/closedhand.cur'
}

The javascript then reads the image filename from the xml file, concatenates it with the respective directory's path and show the image in the screen.
However on photo-album package this issue is a bit tricky because each version of the image has a diferent name and path, which is defined on table cr_revisions.content.

I understand i will need the merge tcl code with js. TCL to set paths and filename, to use them in the javascript code. But i still don't see the cleanest approach to do so.

Does anyone have a enlightening idea on how to figure this out?

Hi Torben,

photo-album/www/base-photo.* is pretty much the same file as
photo-album/www/photo.*
Except for a few admin links in the last page.

Anyway, I already succeeded with my new template(skin) to show photos of a respective album.
It still needs to sharp some details. But they don't affect neither compromise the template. They are just some fancy details.

If you guys accept it i can share it. It would be another very good contribution that i give to the oacs community

Just Let me know

Iuri, are you sure the code license is compatible?

Although it's listed as Creative Commons Attribution 2.0 Generic, credits include the statement:

"Based on code by Michael L. Perry"

To me, Michael L Perry's code appears to be unclearly separated from Fin Rudolph's code, which has a commercial license requirement see http://imageflow.finnrudolph.de/

A commercial license restriction would make this unsuitable for OpenACS.

Uploading to the OpenACS repository should wait until it's clear that Perry's code does not incorporate work from Rudolph's.

The CoverFLow UI is sure to have an open-source/AJAX alternate at some point. Since Apple patented the API, Alex Fajkowski has developed an API alternate ( http://fajkowski.com/blog/2009/08/02/openflow-a-coverflow-api-replacement-for-the-iphone/ ) if the API were to seem to be a development block. I'm not aware of any other blocks to an open-source version.

cheers,

Torben

It's sad if true, but maybe a direct, published statement from Finn Rudolph (or Michael Perry) can clarify the ambiguity and allow the code to be used.

Either way, I'm sure an OpenACS version will become available at some point.

Ecommerce has a text-based pagination bar in ecommerce/lib/pagination-bar.* that is in the same spirit (but static, and urls only).

cheers,

Torben

Even better, Dave. Great find!