Permlink Replies: 18 - Pages: 2 [ 1 2 | Next ] - Last Post: 29-Oct-2006 01:48 Last Post By: jimberry
rtyle

Posts: 35
Registered: 13-Apr-2006
Create a full set of hyperlinked skin/style albums from just one!
Posted: 21-Oct-2006 07:54
  Click to reply to this thread Reply
Attachment jastyles (10.3 KB)
Attachment jslink (4.6 KB)
Attachment albuminfo.inc.ross.3 (3.9 KB)
One of the neat features of Chameleon is that it offers the album composer so many choices/styles. Unfortunately, the album composer is not always the album viewer and the composer's choice of style(s) might not match the choice of the viewer(s). Wouldn't it be neat if the composer could let the viewers choose from any of the many Chameleon styles?

It would be nice if the album composer could just work in one (original) style and have tools to automate the creation of some or all of the alternatives. It would be nicer if the styles could be hyperlinked together so that one could view any slide or index in any alternate style with a single click.

The attached files implement such a solution. Unfortunately (for some), the scripts are written in the bash shell so this means that you need to be running a UNIX variant or have Cygwin installed on your Windows machine (see www.cygwin.com - it's free, it's great!).

Actually, the scripts work best on UNIX filesystems because much of the original content can be referenced _very_ cheaply (in time and space) using symbolic links. If you will be hosting the albums on a UNIX (Web server?) machine, it is best if you can create the albums with symbolic links. If this is not possible, copies of the original album content will be made. In this case, you may want to have JAlbum link to the original images to cut down on on the original album size.

Here is an example on how I use the attached files.

First, I use albuminfo.inc.ross.3 to replace the albuminfo.inc file under the Chameleon skin in the JAlbum installation. This allows for an easy way to hyperlink the albums together. I am hoping Laza will include this feature in future releases.

Please, Laza?

On the main tab, I like to check "Link to originals" to keep the album size down (this is not required). I always distribute the albums with the originals. Choose the Chameleon skin and any style (say, Black.css). I let my Output directory reflect the skin/style album so I name it Chameleon.Black.album. If the album is under the image directory, be sure to exclude this and the to-be-generated albums from consideration by including the .*\.album pattern in the Advanced : Ignore pattern.

On the Chameleon tab, use the Custom links to specify something like this:

Name: Previous Skin/Style
Link: _reverse.html#<rootRelativePage>
0 Open in new window

Name: Next Skin/Style
Link: _forward.html#<rootRelativePage>
0 Open in new window

Clicking on these links will move the user through a circularly linked set of skin/styles for the current index or slide. This is a great way to evaluate which style looks best.

The attached albuminfo.inc will rewrite these links to replace the <rootRelativePage> tag with the path to the current slide or index page in the album. The _forward.html and _reverse.html pages will be generated later in the root directories of the albums. They are simple javascript links that order the hyperlinked albums together. By doing the linking this way, it can be modified without having to rebuild the original album or any of the clones.

Make the album and save the settings in the album (File : Save project in album).

Run the jastyles script to create all Chameleon alternate style variants from this one album. I use the verbose option of the command to monitor its progress. Use the --man or --help options (or see the script!) for more info.

This command will run relatively quickly on a UNIX filesystem but will be slower on Windows because files need to be copied instead of simply referenced (and Windows is just slower).

$ jastyles -v Chameleon.Black.album/jalbum-settings.jap

inputDirectory=Chameleon.Black.album
project=jalbum-settings.jap
skin=Chameleon
style=Black.css
resourceDirectory=res
# building resourceDirectory for each style
outputDirectory=Chameleon.3D_dark.album
outputDirectory=Chameleon.3D_light.album
outputDirectory=Chameleon.Aluminium.album
outputDirectory=Chameleon.Aqua_dark.album
outputDirectory=Chameleon.Aqua_light.album
outputDirectory=Chameleon.Carstereo.album
outputDirectory=Chameleon.Coffee.album
outputDirectory=Chameleon.Device.album
outputDirectory=Chameleon.Gold.album
outputDirectory=Chameleon.Grays.album
outputDirectory=Chameleon.Happy.album
outputDirectory=Chameleon.Jungle.album
outputDirectory=Chameleon.Leopard.album
outputDirectory=Chameleon.OrangeBlue.album
outputDirectory=Chameleon.OrangeGreen.album
outputDirectory=Chameleon.Plastic.album
outputDirectory=Chameleon.Royal.album
outputDirectory=Chameleon.Silver.album
outputDirectory=Chameleon.Simple.album
outputDirectory=Chameleon.Snake.album
outputDirectory=Chameleon.Steel.album
outputDirectory=Chameleon.Vanilla.album
outputDirectory=Chameleon.World.album
# referencing inputDirectory for each style
outputDirectory=Chameleon.3D_dark.album
outputDirectory=Chameleon.3D_light.album
outputDirectory=Chameleon.Aluminium.album
outputDirectory=Chameleon.Aqua_dark.album
outputDirectory=Chameleon.Aqua_light.album
outputDirectory=Chameleon.Carstereo.album
outputDirectory=Chameleon.Coffee.album
outputDirectory=Chameleon.Device.album
outputDirectory=Chameleon.Gold.album
outputDirectory=Chameleon.Grays.album
outputDirectory=Chameleon.Happy.album
outputDirectory=Chameleon.Jungle.album
outputDirectory=Chameleon.Leopard.album
outputDirectory=Chameleon.OrangeBlue.album
outputDirectory=Chameleon.OrangeGreen.album
outputDirectory=Chameleon.Plastic.album
outputDirectory=Chameleon.Royal.album
outputDirectory=Chameleon.Silver.album
outputDirectory=Chameleon.Simple.album
outputDirectory=Chameleon.Snake.album
outputDirectory=Chameleon.Steel.album
outputDirectory=Chameleon.Vanilla.album
outputDirectory=Chameleon.World.album

Note that the outputDirectory's follow the same naming pattern I chose for the original album (some coincidence). When browsing the album, these names will be presented in the page URLs so I gave them meaningful names.

Instead of creating them all, the builder may choose to limit the set of styles by naming only those of interest. For example,

$ jastyles -v Chameleon.Black.album/jalbum-settings.jap Black Coffee Aqua_dark

Once the set of album skin/styles are created, we can link them together in any order we want. Here is how the jslink command may be used to order them alphabetically, forward and reverse. If you want, you can specify any order on the command line. Again, I like the verbose option so I can see what is happening:

$ jslink -v _forward.html $(ls -d Chameleon.*.album | sort)
Chameleon.3D_dark.album/_forward.html -> Chameleon.3D_light.album
Chameleon.3D_light.album/_forward.html -> Chameleon.Aluminium.album
Chameleon.Aluminium.album/_forward.html -> Chameleon.Aqua_dark.album
Chameleon.Aqua_dark.album/_forward.html -> Chameleon.Aqua_light.album
Chameleon.Aqua_light.album/_forward.html -> Chameleon.Black.album
Chameleon.Black.album/_forward.html -> Chameleon.Carstereo.album
Chameleon.Carstereo.album/_forward.html -> Chameleon.Coffee.album
Chameleon.Coffee.album/_forward.html -> Chameleon.Device.album
Chameleon.Device.album/_forward.html -> Chameleon.Gold.album
Chameleon.Gold.album/_forward.html -> Chameleon.Grays.album
Chameleon.Grays.album/_forward.html -> Chameleon.Happy.album
Chameleon.Happy.album/_forward.html -> Chameleon.Jungle.album
Chameleon.Jungle.album/_forward.html -> Chameleon.Leopard.album
Chameleon.Leopard.album/_forward.html -> Chameleon.OrangeBlue.album
Chameleon.OrangeBlue.album/_forward.html -> Chameleon.OrangeGreen.album
Chameleon.OrangeGreen.album/_forward.html -> Chameleon.Plastic.album
Chameleon.Plastic.album/_forward.html -> Chameleon.Royal.album
Chameleon.Royal.album/_forward.html -> Chameleon.Silver.album
Chameleon.Silver.album/_forward.html -> Chameleon.Simple.album
Chameleon.Simple.album/_forward.html -> Chameleon.Snake.album
Chameleon.Snake.album/_forward.html -> Chameleon.Steel.album
Chameleon.Steel.album/_forward.html -> Chameleon.Vanilla.album
Chameleon.Vanilla.album/_forward.html -> Chameleon.World.album
Chameleon.World.album/_forward.html -> Chameleon.3D_dark.album

$ jslink _reverse.html $(ls -d Chameleon.*.album | sort -r)

Note that the names chosen (_forward.html and _reverse.html) are the same names used in the Chameleon custom links. Note also that they begin with an underscore because jastyles will not clone files that begin with and underscore (these files are different for each album).

Done!

If you are using UNIX filesystem, and the file names in the root level of the album do not change, there is no need to re-run jastyles when the original content changes! Otherwise, jastyles will have to be run to update the copies. As noted above, jastyles will not disturb the javascript links if they begin with an underscore so jslink will not need to be rerun. At any time jslink may be rerun to change the ordering without rebuilding the original album or running jastyles to build the clones.
rtyle

Posts: 35
Registered: 13-Apr-2006
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 21-Oct-2006 08:31   in response to: rtyle in response to: rtyle
  Click to reply to this thread Reply
I should mention:

Except for the hyperlinks, the capabilities described above are not unique for the Chameleon skin. For example, I create one Chameleon skin/style album and one Slide show skin/style album from the same images. As long as the thumbnail layout parameters are the same in these albums, they will both have the same HTML index and slide pages. So, we can hyperlink from any Chameleon slide or index to the corresponding page in the Slide show album using the techniques described above. Unfortunately, since the Slide show skin does not support hyperlinks like Chameleon, we will not be able to hyperlink back but one may use the back feature of the browser to go back to the Chameleon skin.

The jastyles tool can be used to create all Slide show styles. Actually, it can be used to create all styles for any skin whose style dependent content is restriced to its resourceDirectory.
jimberry

Posts: 7,493
Registered: 30-Aug-2004
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 21-Oct-2006 11:07   in response to: rtyle in response to: rtyle
  Click to reply to this thread Reply
I wonder if a simpler method could be devised using the rel="alternate stylesheet" attribute of the html link element?
An example (non JAlbum) can be seen at http://www.csszengarden.com/?cssfile=/195/195.css&page=0
I haven't looked closely at how easily this can be implemented with Chameleon or other JAlbum skins, but it seems to me that as long as you can ensure unique pathnames for elements having the same name in different styles this would be doable.
The advantages would be
#1 only one set of html pages (therefore only one pass of JAlbum)
#2 cross platform
#3 cross browser (Firefox already has built-in support, but other browsers can be catered for by including a "style switcher"mechanism in the page as is done in the example.
rtyle

Posts: 35
Registered: 13-Apr-2006
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 21-Oct-2006 18:44   in response to: jimberry in response to: jimberry
  Click to reply to this thread Reply
That's a great idea!...

...but it won't help when working with different skins (e.g. Chameleon and Slide show as I described above). The problem I originally set out to solve was inter-skin/style hyperlinking (using my albuminfo.inc and jslink). I believe that the approach that I have taken is necessary to solve this problem. I just hope that Laza adopts the new albuminfo.inc.

Once I recognized the potential for intra-skin/style hyperlinking, I saw the benefit of quickly churning out the style dependent resourceDirectories and applying them to the same content using symbolic links or copies. Once these clones were in place, I could use my inter-skin/style linking solution to provide intra-skin/style links.

Such cloning on file systems supporting symbolic links is very cheap. But, as I mentioned, the links need to be rebuilt if top-level names change and, as you mentioned, it is not a cross-platform solution. For a cross-platform solution one needs to make copies. BTW, this can be forced on the jastyles tool by setting the CYGWIN_ROOT environment variable:

CYGWIN_ROOT=1 jastyles ...

Perhaps there should be a jastyles command line option for this.

Not being the JAlbum engine or skin author, my approach is not (very) invasive (it only requires the albuminfo.inc Chameleon skin mod). The smarts of the inter-skin/style linking is contained wholly in the _reverse.html and _forward.html files which contain a little javascript to redirect the page to the previous/next album in the same spot. As it turns out, for intra-skin/style links the previous/next album has the same content but a different resourceDirectory; for inter-skin/style links the previous/next album has different content (although the same structure) and a different resourceDirectory. The javascript links don't know/care whether an inter or intra skin/style link is being done.

But, perhaps, the javascript can be made smarter to do what you propose. For intra-skin/style links, perhaps it could somehow change what resourceDirectory is used in the current album. For inter-skin/style links, maybe it would do what it does now. In any case, it would have to get smarter. Maybe that means a smarter jslink utility.

There would still be the need to churn out style dependent resourceDirectories. Maybe that means a smarter jastyles utility.

Again, I think what you propose is a great idea for intra-skin/style links but not for inter-skin/style links. I have no idea (yet?) on how to do it but you have given my some nice direction. Any further ideas/direction is appreciated - I am a novice when it comes to HTML/CSS/javascript etc. If you know what the album directory structure should look like and what the javascript links should look like then I might be able to automate it using newer/better tools.

Thanks!
jimberry

Posts: 7,493
Registered: 30-Aug-2004
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 21-Oct-2006 22:13   in response to: rtyle in response to: rtyle
  Click to reply to this thread Reply
Somehow I missed your second post regarding an inter-skin impementation of the idea.
Yes, the "alternate stylesheet" idea would not work with different skins.
And it is perhaps a little more complicated than my brief outline might suggest.That was just a quick reaction to encourage further discussion.
For the "alternate stylesheet" method, we would possibly need some extra template variables, e.g. to identify paths to the various stylesheets.
And as different styles can use different navigation gifs, we would need a method of switching those paths as well.
Not as simple as it first seemed :-(
rtyle

Posts: 35
Registered: 13-Apr-2006
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 21-Oct-2006 23:04   in response to: jimberry in response to: jimberry
  Click to reply to this thread Reply
I checked out the link you gave in your first post. Certainly their solution includes a way to have different images for each style. I looked further and on their FAQ they say:

Why a page refresh when loading new styles?
It’s tempting to think it could be handled with a Javascript style switcher instead of the current server-side method. There are two important reasons why it’s better not to: 1) you can bookmark each style this way. 2) the javascript method only adds to the existing style, instead of replacing it. A flush would be necessary to clear each one, and the simplest way to achieve this just happens to be a page refresh.
<<

HMMM, I need a client side method because I am archiving to CDs and distributing this way. My existing solution works well for a UNIX server side solution (using symbolic links).

Reading further in the FAQ:

How are you switching style sheets like that?
The Zen Garden uses a customized PHP script to allow for maximum flexibility. You may download that script in PHP or ASP formats and use it freely in your own work. Alternatively, there exists an excellent Javascript style switcher available from A List Apart that uses cookies to keep a selected style persistent.
<<

I'll have to check out this javascript style switcher!
rtyle

Posts: 35
Registered: 13-Apr-2006
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 22-Oct-2006 00:11   in response to: rtyle in response to: rtyle
  Click to reply to this thread Reply
I (think I) am beginning to understand the problem better.

The Chameleon skin's template files refer to (some) needed resources, not through the a CSS mechanism (where they would/should live relative to the style sheet), but through a JAlbum $resPath variable that is expanded as the path to _the_ resourceDirectory from the current page, at album build time. In order for a javascript style switcher to work, everything would have to go through the style sheet. Then, by switching the style sheet, everything would work.

It seems to me that any solution to this problem would be very invasive to the skin (require a lot of skin changes). Either the skin would have to be changed to get all resources through the style sheet or the way resources are retrieved would have to use some kind of switch.

Shucks!

Do you see it the same way?
jimberry

Posts: 7,493
Registered: 30-Aug-2004
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 22-Oct-2006 02:30   in response to: rtyle in response to: rtyle
  Click to reply to this thread Reply
Yes, I don't think this can be achieved purely through CSS.
I don't think that images other than background images can be specified through CSS, so any navigation icons, for instance, that need to change will have to be addressed by some html mechanism.
One possibility would be to have the icons as background images to transparent gif placeholders, but that of course also means changes to the template files.
For skins like BluPlusPlus and Aeneid where the icon sets are not specified as part of the style, this might not present such a problem, but album builders typically choose an icon-set that matches their style, so you would have to choose an icon-set that matches all the styles you want to include.You might also want to change (XBF) frames when you change styles.

It seems to me that any solution to this problem
would be very invasive to the skin (require a lot of
skin changes). Either the skin would have to be
changed to get all resources through the style sheet
or the way resources are retrieved would have to use
some kind of switch.

And it still doesn't address your aim of a cross-skin solution. The skins are so different that you definitely need different html pages for each skin.
rtyle

Posts: 35
Registered: 13-Apr-2006
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 22-Oct-2006 17:10   in response to: jimberry in response to: jimberry
  Click to reply to this thread Reply
FYI ...

There does appear to be a CSS button alternative. See "Create hybrid graphical/CSS buttons" at

http://builder.com.com/5100-6371-5345057.html

However, it seems that buttons are restricted to being rectangular. For non-rectangular buttons, the skin developer would have to include part of the background instead of simply masking it out.
jimberry

Posts: 7,493
Registered: 30-Aug-2004
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 22-Oct-2006 17:39   in response to: rtyle in response to: rtyle
  Click to reply to this thread Reply
Yes, that is virtually the same as my suggestion of using the icon graphic as a background image. The one difference (using a common background graphic, and text instead of the transparent gif) would mean that none of the icons currently used would be suitable.
jimberry

Posts: 7,493
Registered: 30-Aug-2004
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 23-Oct-2006 04:02   in response to: jimberry in response to: jimberry
  Click to reply to this thread Reply
I have uploaded a preliminary sample of what a viewer-selectable multi-style (but not multi-skin) album might look like.
I have not yet incorporated a javascript style-switcher, so you will need to view it with Firefox or another browser that caters for alternate stylesheets (Look at View/>Page style from the menu)

I have moved page background and title-bar images to stylesheets instead of inline styles.
I have not yet changed the navigation icons to background images, so all the navigation icons are currently from the "black" style.

View it at http://www.jimberry.org/css_album/slides/Picture%20062.html

This has been modified by editing the CSS and the HTML from JAlbum output, not by editing the template, so is a "proof of concept" rather than a solution.

From recent comments by laza, I don't think he wants to make big changes to Chameleon, so this thread might be better in "General Skins and Filters", "General Development", or "General Discussion". I can move it there if you like.
rtyle

Posts: 35
Registered: 13-Apr-2006
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 23-Oct-2006 17:11   in response to: jimberry in response to: jimberry
  Click to reply to this thread Reply
I like it!

But I understand why Laza may not want to change Chameleon to support this - is sounds like a lot of work. I believe that it would show off his work better, however. I wonder if he would accept help in doing this work.

The reason I posted to this forum was because of related posts I have made regarding suggested changes to Laza's albuminfo.inc. To make my inter/intra-skin/style switching work one would require changes like the latest ones I have posted here. I was hoping that Laza would not see this as a major change and incorporate it for the benefit of all.

Of course, ultimately, the decision is Laza's. I

The jastyles and jslink utilities I have posted might have general benefit for other skin users. For skin/style switching, they only require the ability to insert custom hyperlinks (a la Chameleon/albuminfo.inc.ross.3) on each page. The Chameleon method may serve as an example on how to do this.

If you and/or Laza feel it is best to move this thread then please do so. I just want to make sure that this issue is considered by Laza.
craps

Posts: 389
Registered: 21-Nov-2005
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 24-Oct-2006 10:01   in response to: jimberry in response to: jimberry
  Click to reply to this thread Reply
so you will need to view it with Firefox or another browser that caters for alternate
stylesheets (Look at View/>Page style from the menu)

I can confirm this works on the Opera browser (View -> Style) and
it looks interesting - a nice little feature.

Though it might be very useful to some people, I'm not sure
I would use this feature my self, as I prefer to be the
one deciding the layout of my webpages.
jimberry

Posts: 7,493
Registered: 30-Aug-2004
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 24-Oct-2006 11:29   in response to: craps in response to: craps
  Click to reply to this thread Reply
Yes, many people put a lot of thought into choosing a style that suits the pictures that they are showing and would not think it appropriate to allow surfers to monkey around with a carefully designed look and feel.
On the other hand, sometimes there may be two or three styles that show off a given set of pictures to advantage, and the album builder does have the ability to choose which styles are included in the mix.
Another possible drawback is that designers of existing skins may not want to spend time making the necessary changes to make this possible. Perhaps someone might like to develop a new skin with this feature?
jimberry

Posts: 7,493
Registered: 30-Aug-2004
Re: Create a full set of hyperlinked skin/style albums from just one!
Posted: 25-Oct-2006 11:57   in response to: rtyle in response to: rtyle
  Click to reply to this thread Reply
However, it seems that buttons are restricted to
being rectangular.

The restriction to rectangular buttons only applies to "pure" CSS buttons, i.e. using plain text with background colour. For CSS background images, the restriction does not apply.

I have updated the example page at http://www.jimberry.org/css_album/slides/Picture%20062.html to use CSS background images for the buttons including the "hover" rollover effect for some of them. The "slideshow" button is controlled by a javascript, and I haven't made the necessary changes to allow the required state changes for "start", "stop", with their respective rollover states.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums