Permlink Replies: 14 - Pages: 1 - Last Post: 15-Feb-2008 19:08 Last Post By: MarkE
Isigrafie

Posts: 4
Registered: 12-Jul-2007
Selectable resolution on each index/slide page
Posted: 17-Jul-2007 10:56
  Click to reply to this thread Reply
Attachment header.inc (1.0 KB)
The following describes a technique to implement switching between hires and lowres views of your gallery on each slide and index page. The whole implementation has been targeted to Laza's chameleon skin. Maybe this post
will influence others to work on other skins, too ... ;)

Pre-requisites needed:
  • Create two project files (i.e. highres.jap and lowres.jap) using the same source input and different output size for the slides (and thumbs if needed). The lowres.jap output should be directed to an output folder named 'lowres' (or adapt the header.inc file for any other name), which must be a direct subfolder of the highres.jap output (i.e. highres.jap output is 'album', lowres.jap output must be 'album\lowres'). My first approach was setting both output folder to the same level, i.e. 'albumhigh' and 'albumlow', but this will prevent you from using subdomain names as i.e. 'photos.mysite.com' (which may default to the hires photos), since you cannot establish a link between them ! Using the subfolder technique you will be allowed to use a subdomain name for the hires photos at least (see Limitations below !)
  • Create a 'header.inc' file and put it into the 'inc' subfolder of the JAlbum program folder. If you intend to prohibit any folder from including this 'header.inc' file, put an empty 'header.inc' file into the photo's folder. You might put this file into each photo source folder instead of using the global 'inc' folder, too. I encountered some problems using the project's folder for the 'header.inc' file location, although this should work fine as stated in JAlbums documentation and would serve my needs best. Maybe someone else here will find out, why this doesn't seem to work as expected ... or already has found out ...

The contents of the header.inc file is listed here:

<%	
	public String currentUrl = outputDirectory.toString();
	public String modeResolution;
 
	private String rootDir = rootOutputDirectory.toString();
	private String leadOut;
 
	
	leadOut = rootDir.substring( rootDir.lastIndexOf( "\\" ) + 1 );	
 
	currentUrl = currentUrl.substring( currentUrl.indexOf("\\" + leadOut) + 1 + leadOut.length() );
	currentUrl = currentUrl.replace( '\\', '/' );
 
 
	if( leadOut.equals( "lowres" ) )
	{
		currentUrl = ".." + currentUrl;
		modeResolution = "High";
	}
	else
	{
		currentUrl = "lowres" + currentUrl;
		modeResolution = "Low";
	}
	
%>
 
<table width="${tableWidth}" cellpadding="4" cellspacing="0" class="infotable">
  <tr>
    <td align="center" class="smalltxt">
	<ja:if exists="currentFile"> 
		<a href="${rootPath}/../${currentUrl}/slides/$currentPage">${modeResolution} Resolution</a>
	</ja:if> 
	<ja:else> 
	<!-- Index Page --> 
		<a href="${rootPath}/${currentUrl}/$indexPage">${modeResolution} Resolution</a>
	</ja:else>
    </td>
  </tr>
</table><br>
 


You might adapt the text strings "High", "Low" and "Resolution" to your foreign language needs. You might also change the subfolder name 'lowres', if needed (see limitations). For your convenience I added the header.inc file to this posting.

The lower part directly addresses the layout of the chameleon skin ! Please don't ask for code explanations; it took me a lot of time experiencing with different JAlbum and Chameleon skin vars and learning Java ! So I guess, I will not be able to explain exactly, which strange things are going on here ... :) Maybe someone out there will find an even better/smarter way to accomplish the resolution switch !

Limitations
  • You mustn't use the reserved pathname 'lowres', except for the output folder of the lowres project file, otherwise change the header.inc file
  • Keep in mind that both albums have to be updated the same time, since links might be broken otherwise.
  • If using a fixed number of thumbs on index pages, hires and lowres albums must be defined to use the same number, although the arrangement might differ (i.e. 6 cols x 4 rows in hires and 4 cols x 6 rows in lowres), otherwise you'll encounter broken links again
  • You may not use a subdomain name for your lowres photos (i.e. "lowresphotos.mysite.com" link to "www.mysite.com/album/lowres"), since links to hires index/slides will not work !

Remarks
  • This technique works even, if using multiple subfolder levels
  • Example galleries can be found <a href="http://favoriten.isigrafie.de">here (flat gallery)</a> and <a href="http://foto.isigrafie.de">here ('subfoldered')</a>. Use Hohe Auflösung and Niedrige Auflösung for switching between resolutions

Have fun,

IsiGrafie
MarkE

Posts: 105
Registered: 24-Apr-2006
Re: Selectable resolution on each index/slide page
Posted: 17-Jul-2007 21:30   in response to: Isigrafie in response to: Isigrafie
  Click to reply to this thread Reply
Top Tip! :D

I have used this technique, please see JAlbum_Investigations - High & Low Resolution Albums.

Just another example!

Some points : this is a prime candidate for a Batch File (ie using Console Mode). There's one jap file, which is used to create both the high & low resolution albums, and the main code is

ECHO	Normal, High Resolution Album
ECHO	\-----------------------------
ECHO.
java -Xmx400M -jar "C:\Program Files\JAlbum\JAlbum.jar" -projectFile "High & Low Resolution Albums.jap" -directory "X:\Mark's JAlbum\Input\JAlbum Investigations\High & Low Resolution Albums" -outputDirectory "X:\Mark's JAlbum\Output\JAlbum Investigations\High & Low Resolution Albums" -appendImages
ECHO.
ECHO	Low Resolution Album
ECHO	\--------------------
ECHO.
java -Xmx400M -jar "C:\Program Files\JAlbum\JAlbum.jar" -projectFile "High & Low Resolution Albums.jap" -directory "X:\Mark's JAlbum\Input\JAlbum Investigations\High & Low Resolution Albums" -outputDirectory "X:\Mark's JAlbum\Output\JAlbum Investigations\High & Low Resolution Albums\lowres" -appendImages -thumbSize 120x120 -imageSize 600x320


This could be reduced some, but I prefer to make it a bit more verbose (it helps me remember after 6 months ;) )

Secondly, Chameleon is now structured such that when I use my default Image Bounds/Images of 20000x540 (to enable Panoramics etc), the table widths etc go to their built-in max of 960. So while the Low Resolution thumbnails and slides look OK, the rest might still be a bit wide …..

Cheers,

Mark
MarkE

Posts: 105
Registered: 24-Apr-2006
Re: Selectable resolution on each index/slide page
Posted: 16-Aug-2007 23:18   in response to: Isigrafie in response to: Isigrafie
  Click to reply to this thread Reply
IsiGrafie

I follow what you have done, and intend to implement it in one or two albums. However, I would also like to experiment with a simpler case, where I do indeed have 2 albums, say "album" and "album - low res". The link between the 2 would be simply to point at the top-level index.html.

I have struggled to get the code that effectively gives me the full path for "album", so that I can then append the text " - low res". I feel that I should be able to modify your code to do this quite easily, but have failed dismally :(

Can you please point me in the right direction? Any help would be much appreciated.

Cheers,

Mark
Isigrafie

Posts: 4
Registered: 12-Jul-2007
Re: Selectable resolution on each index/slide page
Posted: 17-Aug-2007 00:52   in response to: Isigrafie in response to: Isigrafie
  Click to reply to this thread Reply
Hi Mark,

I'm afraid I do not unterstand exactly what you intend to do, so perhaps you may push me into the right direction :)

The technique I used above relies completely on one important point:

You will NEVER get the complete nor part of the REAL URL path to your album but only the directoy path on your HD where you create the output files. So it's important to use relative addressing between both albums (using .. or fixed subdirs) !

The full directory path may not solve your problem. You may use the variables rootOutputDirectory and outputDirectory to determine the relative part from the output directory to the actual output directory (index or slide page). Work with this relative pathes rather than those absolute pathes, since the relative pathes will reflect the relative URL pathes between both albums.

Example:

C:\jalbum\gallery\album1
C:\jalbum\gallery\album2

The complete pathes to your albums files (i.e. C:\jalbum\gallery\album1\teddybears\index.html) may not be interesting, but 'subtracting' the rootOutputDirectory (C:\jalbum\gallery\album1) retrieves relative pathes (i.e. /teddybears/index.html; note: slashes have been converted !), which you may use for linking later on.

In your header.inc/footer.inc HTML code you may use $rootPath to find your way back from the current URL to the root URL and add those relative pathes to get into the second album.

Off course: this is very theoretical and it might be more practical if you describe your problem in more detail; maybe we'll find a solution right here ;)

Cheers, Isigrafie

PS: If you still have some time left, relax an take a look at these - hi-res or lo-res. I had to modify my converter code for the small index previews, since Laza changed some important lines of code :)
MarkE

Posts: 105
Registered: 24-Apr-2006
Re: Selectable resolution on each index/slide page
Posted: 17-Aug-2007 09:48   in response to: Isigrafie in response to: Isigrafie
  Click to reply to this thread Reply
Isigrafie,

Thanks for a detailed reply!

I'm afraid I do not understand exactly what you
intend to do, so perhaps you may push me into the
right direction :)

My intent is simple : 2 albums (www.xyz/album and www.xyz/album/lowres), each has a footer with a link that says "go to the other album's main index.html". Nothing fancy like your solution, one just starts again at the top of the album, low or high res.

I could hard code this in with the url as I know where on the web the 2 albums will be placed. But, of course, I want this to work with both local (including CDs) and uploaded albums.

So I was asking; given that one can be in any folder in a complicated structure, how does one find the path (folder path or URL) to the top-level index.html? Thinking about it more, and remembering that the local and uploaded folder levels may be different (outside of the album), I conclude that this is not a trivial task!! (Like you, I guess :) ).

Having re-read what you said ….

You will NEVER get the complete nor part of the REAL
URL path to your album but only the directory path on
your HD where you create the output files. So it's
important to use relative addressing between both
albums (using .. or fixed subdirs) !

The full directory path may not solve your problem.
You may use the variables rootOutputDirectory and
outputDirectory to determine the relative part from
the output directory to the actual output directory
(index or slide page). Work with this relative paths
rather than those absolute paths, since the relative
paths will reflect the relative URL paths between
both albums.

….. I think I understand better now! However ….

C:\jalbum\gallery\album1
C:\jalbum\gallery\album2

In your header.inc/footer.inc HTML code you may use
$rootPath to find your way back from the current URL
to the root URL and add those relative paths to get
into the second album.

I tried this :

Given my 2 separate albums

C:\jalbum\gallery\album1
C:\jalbum\gallery\album1_lowres

I used
<a href="<%=out.print(rootPath + "_lowres")%>">Low Resolution Album</a>
expecting to get C:\jalbum\gallery\album1_lowres (or www.xyz/jalbum/albums/album1_lowres) but no luck. Maybe I've got the code wrong for appending text ….

If I can get this to work, it may suit certain requirements and sit next to the more professional look and feel of your solution :). For instance, as I always have an uplink right through to my top-level Master Album, this approach fits in a little better. HOWEVER …… now that I've used your code and played around, I am most impressed, and may well just stick with that whenever I need a low and high res solution ….. until Laza implements something scalable to suit different screen resolutions?!?!

Whatever solution, it does require 2 albums for each project. As I said above, batch files help to maintain them, and "smart uploading" is essential for live and ever-changing albums.

Cheers,

Mark
jimberry

Posts: 553
Registered: 30-Aug-2004
Re: Selectable resolution on each index/slide page
Posted: 17-Aug-2007 11:55   in response to: MarkE in response to: MarkE
  Click to reply to this thread Reply
Would this do the trick?
 <a href="/album_lowres/index.html">Low Resolution Album</a>

This should be relative to the root folder.

Refer to this earlier discussion.

Assuming this is in an album specific footer.inc file, and therefore doesn't need to use a variable for the folder name?
Isigrafie

Posts: 4
Registered: 12-Jul-2007
Re: Selectable resolution on each index/slide page
Posted: 17-Aug-2007 13:29   in response to: Isigrafie in response to: Isigrafie
  Click to reply to this thread Reply
Hey,

off course using the base URL (starting with /) will work, but you have to adapt the code each time you move the albums inside the hierachy (moving to subfolders etc.) Using relative links will make changes unneccessary as long as both albums will be moved.

Mark, the code below will serve your needs

Link to xyz_lowres from xyz:

	<ja:if exists="currentFile"> 
	<!-- Slide Page --> 
		<a href="${rootPath}/../../xyz_lowres">XYZ LowRes</a>
	</ja:if> 
	<ja:else> 
	<!-- Index Page --> 
		<a href="${rootPath}/../xyz_lowres">XYZ LowRes</a>
	</ja:else>


and link to xyz from xyz_lowres:

	<ja:if exists="currentFile"> 
	<!-- Slide Page --> 
		<a href="${rootPath}/../../xyz">XYZ</a>
	</ja:if> 
	<ja:else> 
	<!-- Index Page --> 
		<a href="${rootPath}/../xyz">XYZ</a>
	</ja:else>


... assumed "xyz_lowres" has been stored on the same level as the "xyz" album. If xyz_lowres has been stored to a subfolder of xyz, use:

Link to xyz_lowres from xyz:

	<ja:if exists="currentFile"> 
	<!-- Slide Page --> 
		<a href="${rootPath}/../xyz_lowres">XYZ LowRes</a>
	</ja:if> 
	<ja:else> 
	<!-- Index Page --> 
		<a href="${rootPath}/xyz_lowres">XYZ LowRes</a>
	</ja:else>


and link to xyz from xyz_lowres:

	<ja:if exists="currentFile"> 
	<!-- Slide Page --> 
		<a href="${rootPath}/../../../xyz">XYZ</a>
	</ja:if> 
	<ja:else> 
	<!-- Index Page --> 
		<a href="${rootPath}/../../xyz">XYZ</a>
	</ja:else>


link to xyz from xyz_lowres may (please test) also work using:

	<ja:if exists="currentFile"> 
	<!-- Slide Page --> 
		<a href="${rootPath}/../..">XYZ</a>
	</ja:if> 
	<ja:else> 
	<!-- Index Page --> 
		<a href="${rootPath}/..">XYZ</a>
	</ja:else>


Note: in all cases you have to handle index and slide pages separately, since $rootPath works slightly different (it's not a bug it's a feature ... ??? :) )

Hope it works, since I have not tested this yet.

Cheers, Isigrafie
jimberry

Posts: 553
Registered: 30-Aug-2004
Re: Selectable resolution on each index/slide page
Posted: 17-Aug-2007 14:22   in response to: Isigrafie in response to: Isigrafie
  Click to reply to this thread Reply
off course using the base URL (starting with /) will
work, but you have to adapt the code each time you
move the albums inside the hierachy (moving to
subfolders etc.) Using relative links will make
changes unneccessary as long as both albums will be
moved.

My understanding was that there was no requirement to move the albums.
Isigrafie

Posts: 4
Registered: 12-Jul-2007
Re: Selectable resolution on each index/slide page
Posted: 17-Aug-2007 15:44   in response to: Isigrafie in response to: Isigrafie
  Click to reply to this thread Reply
understanding was that there was no requirement to move the albums.

Yes, but copying web-published albums to a CD or vice versa may require recompilation ;)
MarkE

Posts: 105
Registered: 24-Apr-2006
Re: Selectable resolution on each index/slide page
Posted: 17-Aug-2007 16:57   in response to: jimberry in response to: jimberry
  Click to reply to this thread Reply
Would this do the trick?
 <a href="/album_lowres/index.html">Low
Resolution Album</a>

This should be relative to the root folder.

Jim,

I remember this post, and looked into it .. however, the format "/.........." will point to the root folder, thus

<a href="/High & Low Resolution Albums - lowres/index.html">Low Resolution Album</a>


literally gives

X:/High & Low Resolution Albums - lowres/index.html

but the full path is

X:\Mark's JAlbum\Output\JAlbum Investigations\High & Low Resolution Albums - lowres

Mark
MarkE

Posts: 105
Registered: 24-Apr-2006
Re: Selectable resolution on each index/slide page
Posted: 17-Aug-2007 17:36   in response to: Isigrafie in response to: Isigrafie
  Click to reply to this thread Reply
Isigrafie,

Again, thanks for your detailed reply,

I have spent some time playing with this, and the code indeed works. However, the old "\" vs "/" issue (I think) meant that the correct link would not work on a local album, but did when uploaded. There is the added complication of having 2 header.inc files, one for the normal, high res album, the other for the low res ....

So, without further ado, I hereby declare that my preferred solution is the one you developed :)

Wherever I need this feature, it shall indeed be your rather neat code that I'll use, and like you, hope that new Chameleon versions don't break it!!

Cheers,

Mark
MarkE

Posts: 105
Registered: 24-Apr-2006
Re: Selectable resolution on each index/slide page
Posted: 01-Feb-2008 21:27   in response to: Isigrafie in response to: Isigrafie
  Click to reply to this thread Reply
IsiGrafie,

Further to previous discussions, I’d like to add something. For a number of reasons, my main concern is with the Image size. Chameleon now has an option to “shrink” images to suit the monitor resolution (Settings > Images > Fit image in browser), but my preference is to design my albums to allow for 2 image sizes, “Large” & "Small”.

This is relatively simple and possible due to your code :) though it does entail more work/uploading.

An example can be found at This Album allows you to switch between Large & Small Images!

The Slide Page Footer (ie for the Images) is :

<p style="color:#C87735; text-align:center; font-size:90%">
Use the mouse to interact with Images. Press F11 to maximise viewing window in Web Browser.
</p>
<%	
	public String currentUrl = outputDirectory.toString();
	public String modeResolution;
 
	private String rootDir = rootOutputDirectory.toString();
	private String leadOut;
 
	
	leadOut = rootDir.substring( rootDir.lastIndexOf( "\\" ) + 1 );	
 
	currentUrl = currentUrl.substring( currentUrl.indexOf("\\" + leadOut) + 1 + leadOut.length() );
	currentUrl = currentUrl.replace( '\\', '/' );
 
 
	if( leadOut.equals( "smallimages" ) )
	{
		currentUrl = ".." + currentUrl;
		modeResolution = "Larger";
	}
	else
	{
		currentUrl = "smallimages" + currentUrl;
		modeResolution = "Smaller";
	}
	
%>
<p style="color:#C87735; text-align:center; font-size:90%">
Click to see <b> <a href="${rootPath}/../${currentUrl}/slides/$currentPage">${modeResolution} </a> </b> Images!
<br><br>
 
Thanks <b> <a href=> Isigrafie!</a> </b> See <a href= http://jalbum.net/forum/thread.jspa?threadID=14937&tstart=0/> JAlbum community forums : Selectable resolution on each index/slide page </a>
<br><br></p>


The jap file has 720 for the Image Bounds image height. The batch code is :

ECHO	Normal, High Resolution Album
ECHO	-----------------------------
ECHO.
java -Xmx400M -jar "C:\Program Files\JAlbum\JAlbum.jar" -projectFile "High & Low Resolution Albums.jap" -appendImages
ECHO.
ECHO	Low Resolution Album
ECHO	--------------------
ECHO.
java -Xmx400M -jar "C:\Program Files\JAlbum\JAlbum.jar" -projectFile "High & Low Resolution Albums.jap" -outputDirectory "D:\Mark's JAlbum\Output\JAlbum Investigations\High & Low Resolution Albums\lowres" -appendImages -imageSize 20000x540 


Well, this is just my personal application of a great tweak :) Many thanks again.

Mark
MarkE

Posts: 105
Registered: 24-Apr-2006
Re: Selectable resolution on each index/slide page
Posted: 03-Feb-2008 14:31   in response to: MarkE in response to: MarkE
  Click to reply to this thread Reply
See http://marke.myjalbum.net/1989/index.html for another example.

Mark
MarkE

Posts: 105
Registered: 24-Apr-2006
Re: Selectable resolution on each index/slide page
Posted: 09-Feb-2008 19:37   in response to: MarkE in response to: MarkE
  Click to reply to this thread Reply
Update to adapt the code and to feed back some practical experiences :

The code

if( leadOut.equals( "smallimages" ) )


is OK if the folder "smallimages" is the last one in a particular folder structure. However, with more complex albums which might combine albums built in different skins and styles, the "smallimages" folder may actually be in the middle.

A simple change that handles this situation is to change the above to

if( rootDir.contains( "smallimages" ) )


Bear in mind that the contains method may only apply to later Java versions …

The link that points to the special album also has to be changed, and the simplest way is to hard code something suitable. While not normally a good solution, it's not too bad in this case as a dedicated header.inc or footer.inc is usually required anyway. Thus

Click to see <b> <a href="${rootPath}/../${currentUrl}/slides/$currentPage">${modeResolution} </a> </b> Images!


may become, for example,

Click to see <b> <a href="${rootPath}${rootPath}/../${currentUrl}/S010, Bristol Mountain USA, Dec 2005/${leadOut}/index.html">${modeResolution} </a> </b> Images!


Some experimentation will undoubtedly be required!

It is best to think of the selectable resolution method as album-specific. As one moves around a typical collection of albums, which may be the result of many builds of different skins and styles, one will undoubtedly exit the special "small image" folders and return to the normal, standard "large image" format. It is particularly applicable in stand-alone albums put CD or DVD.

Remember that albums are doubled up is size, almost. The penalty is especially severe with albums that contain movies, and it is practically impossible to implement this to ignore movies. Also, some odd behaviour may be experienced by clicking the "Larger" or "Smaller" link when watching a movie … but it's not a big deal.

The "Uplink" may need to be clicked twice as one moves from folder Top Level Index\abc\_smallimages to Top Level Index\abc before moving up to Top Level Index\.

HTH,

Mark

Another example .... Skiing

Edited by: MarkE on 10-Feb-2008 20:40
MarkE

Posts: 105
Registered: 24-Apr-2006
Re: Selectable resolution on each index/slide page
Posted: 15-Feb-2008 18:22   in response to: MarkE in response to: MarkE
  Click to reply to this thread Reply
It is with regret that I have decided not to implement this. While it works fine for some cases, it was literally causing me to have 2 methods of working which is not really practical.

Thread locked.

Mark
Legend
Forum admins
Helpful Answer
Correct Answer

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