Updated template for dynamic web page view

[bonienl]

Inspired by the layout that Eyael is using I have updated the view of my dynamic web page template to use frames. This approach allows the nagivation buttons to be available at all times, so making it easier to find your way within your database.

An example of the new look can be seen here

Besides the new visual changes there have been more additions and modifications. It is now easier than before to have your web site up to date by simply keeping your database in XML format. More details can be found in the readme.html file. All files can be downloaded from this zip file

I hope you enjoy this new version.

BonieNL

[daquint]

This is fantastic and just what I was looking for

Thanks!

One question - My date sorting seems to be off.

It looks like its sorting as:

yyyy/mm/dd

but my date formate is:

mm/dd/yyyy

I cannot change the exported date added in ANT.

Where can I edit the date format in the template?

Thanks again!

[spiderman]

Thanks for the template, excellent job.

is it possible to order the thumbnail view on original/formatted title instead catalognumber

[bonienl]

Where can I edit the date format in the template?

To change the date format you need to edit the javascript file movies.js. In this file at line 133 you find the following

Code: Select all

function ymd(s){
  return s?(s.slice(6,10)+s.slice(3,5)+s.slice(0,2)):""; //dd-mm-yyyy format
//return s?(s.slice(6,10)+s.slice(0,2)+s.slice(3,5)):""; //mm-dd-yyyy format
//return s?(s.slice(0,4)+s.slice(5,7)+s.slice(8,10)):""; //yyyy-mm-dd format
}

Comment out (//) the original dd-mm-yyyy format and make active your format of mm-dd-yyyy

BonieNL

[bonienl]

is it possible to order the thumbnail view on original/formatted title instead catalognumber

Yes, this is possible by editing the layout4.xml file as follows:

Code: Select all

 <options category="All" pagesize="22" sortkey="FormattedTitle"...

 <row thumbnails="true">
  <cell title="Thumbnail view" colspan="2" sortby="FormattedTitle">

You might need to clear your browser cache to see the effect of this change.

BonieNL

[spiderman]

is it possible to order the thumbnail view on original/formatted title instead catalognumber

Yes, this is possible by editing the layout4.xml file as follows:

Code: Select all

 <options category="All" pagesize="22" sortkey="FormattedTitle"...

 <row thumbnails="true">
  <cell title="Thumbnail view" colspan="2" sortby="FormattedTitle">

You might need to clear your browser cache to see the effect of this change.

BonieNL

thanks for suggestion. i edited the xml file but i still can't get it in the right order except when i choose to view by letter.

[spiderman]

I tried to add a "kijkwijzer" images, like you did with the countryflags. created a kijkwijzer.xml, copy the flagscript in movies.js ofcourse edited for the kijkwijzer but it won't work. also created a folder with the images.

any suggestions?

thanks

[bonienl]

Below is an alternative way of setting the sorting order

Code: Select all

 <options category="All" pagesize="22" sortkey="FormattedTitle" searchkey="Description,FormattedTitle,Actors,Director"/>

 <row thumbnails="true" sortby="FormattedTitle">
  <cell title="Thumbnail view" colspan="2">
   <img src="movie.getAttribute('Picture')" width="100" height="140" ... 
  </cell>
 </row>

Note that it is necessary to define both the sortkey and the sortby variables, eventhough it is not possible to select a sorting direction in this setup.

You may also want to try to use the keyword OriginalTitle as sorting criterium.

[bonienl]

I tried to add a "kijkwijzer" images, like you did with the countryflags. created a kijkwijzer.xml, copy the flagscript in movies.js ofcourse edited for the kijkwijzer but it won't work. also created a folder with the images.

any suggestions?

To make this work you need to have some references in place.

First of all your new XML file need to be known and loaded at opening. See these code sections with example:

Code: Select all

//SYSTEM FILES
var kijkwijzers="kijkwijzer.xml";

//SYSTEM VARIABLES 
var xmlWijzer;

//INITIALISATION FUNCTIONS 
function loadXML(dynamic){
  cursorWait();
  if(document.implementation && document.implementation.createDocument){
    var mode=1;
  }else if(window.ActiveXObject){
    var mode=2;
  }else{
    alert("Your browser can not handle this script");
    return;
  }
  if(!dynamic){
    xmlData=loadFile(mode,database);
    xmlFlags=loadFile(mode,flags);
    xmlWijzer=loadFile(mode,kijkwijzers);
  }
  layout=readCookie(cookie())||dynamic||layout;
  xmlLayout=loadFile(mode,layout);
  setTimeout('init()',0);
}

When you put your images in a new directory, you need to make a reference to it in the layout.xml files. This can be done in the default section as follows (the new keyword "kijkwijzer" is here introduced):

Code: Select all

<default empty="images/nopic.gif" rating="images/rating*.gif" flag="flags/*.gif" kijkwijzer="kijkwijzer/*.gif" more="true"/>

Now all is in place for your routine to translate a viewer rating to an image, similar as what is done for the flags. Remember that this routine must read and understand the layout of your new XML file. Following is just an example of a possible approach:

Code: Select all

function kijkwijzer(source){
  if(!source) return my['kijkwijzer'].replace("*","xx"); //return this image when no input is available
  var codes=xmlWijzer.getElementsByTagName('cc');
  for(var i=0,code;code=codes[i];i++){
    for(var j=0,node;node=code.childNodes[j];j++){
      switch(node.nodeName){
      case 'map':
        if(source.toLowerCase()==node.firstChild.data)
          return my['kijkwijzer'].replace("*",code.getAttribute('id')); //this is the translated image
      }
    }
  }
  return my['kijkwijzer'].replace("*","un");  //return this image when no match is found
}

Finally the layout.xml files can use the function kijkwijzer in a similar fashion as the flag function.

BonieNL

[spiderman]

thanks for the " kijkwijzer" script.
it works!

still can't get the sorting right

[bonienl]

thanks for the " kijkwijzer" script.
it works!

still can't get the sorting right

Can you post the beginning of the layout4.xml file, because I don't really know what is wrong!

[spiderman]

thanks for the " kijkwijzer" script.
it works!

still can't get the sorting right

Can you post the beginning of the layout4.xml file, because I don't really know what is wrong!

it's not your script. my database/ xml file seems to the problem. I loaded another database and i don't have this problem.

Another question: is it possible to turn off the "null" function?

thanks for your replies.

[bonienl]

Another question: is it possible to turn off the "null" function?

You need to modify the layout.xml files to suppress the "null" notation.

Change the parts where the function "append" is used from a single line into two lines. See the next example which can be found in the layout1.xml file.

Original

Code: Select all

<text style="bold">movie.getAttribute('OriginalTitle')+append(': ',movie.getAttribute('TranslatedTitle'))</text>

Modified

Code: Select all

<text style="bold">movie.getAttribute('OriginalTitle')</text>
<text style="bold">append(': ',movie.getAttribute('TranslatedTitle'))</text>

Do this for all appearances of "append".

Note: In the next version this is not needed anymore.

BonieNL

[spiderman]

can you tell me what happens when you add the movie "300" to your database? I want to know if you have problems like i have

[bonienl]

can you tell me what happens when you add the movie "300" to your database? I want to know if you have problems like i have

Since the title "300" is a number only, the sorting on this movie title does not follow the alphabetic order but it is treated as an ordering on numbers. This basically means that this title always appears first, because numbers come before alphabet.

To get a correct sorting you can do one of two things:

1. Surround the title by quotes, thus "300"
2. Add a subtitle, e.g. 300: Prepare for glory

BonieNL

[bonzi]

I have been pestering ANC author about this and that feature of HTML export - this marvelous template has them all!

However, as you have guessed, I have a couple of minor questions/feature requests/bug reports:

• Could you change the function that selects the flag from country/language/subtitles so that it uses only text up to the first comma or slash; as it is now we are getting too many UN flags for movies done as co-production between entities from several countries.
• In "Thumbnail" layout (and possibly others) popup is sometimes so tall that the top part of it is not visible (although there is some room for it in the lower part of the screen).
• How to (optionally) concatenate AMC's "Comments" field to "Description" into your template's "Synopsis"?

I know this could be nice JS exercise for me, but I am total JS novice with not much spare time at the moment...

Thanks!

[bonienl]

Your questions are related to display format and - luckily - you won't need any javascript knowledge to make changes.

For all formats they are defined in the layout.xml files, e.g. layout1.xml is the default format and by modifying its contents you instruct how and which fields and information are displayed.

1. The flags can be used in two ways from the layout.xml file. The first approach is with multiple flags in a cell. This means that the script will translate each individual country name - separated by a comma or slash - into a corresponding flag image.

Code: Select all

<flag src="movie.getAttribute('Country')" width="15" height="10" ...

The second approach is that a cell only contains a single flag image and when multiple countries are defined these are then replaced by the UN flag (this is what you want).

Code: Select all

<img src="flag(movie.getAttribute('Country'))" width="15" height="10" ...

One remark: when you are getting only UN flag images it means that the translation of country names to flag images is not done properly. The supplied "flags.xml" file is for english country names only and you need to edit this file yourself and put the country names in your language in here. For example

Code: Select all

Original English:
<cc id="es"><map>spain</map><map>spanish</map></cc>

Becomes in French:
<cc id="es"><map>espagne</map><map>espagnol</map></cc>

2. The "Thumbnail" and "Popup" view are based on a floating window. The only way to make this fit is by editing the layout3.xml and layout4.xml files and remove or change the fields to be displayed.

3. Adding the comments field can be done in the following way (see the layout1.xml file). I have here included the header "Comments" as an example.

Code: Select all

<text style="italic">'Synopsis'</text>
<text style="justify">movie.getAttribute('Description')</text><br/>
<text style="italic">'Comments'</text>
<text style="justify">movie.getAttribute('Comments')</text>

Hope this helps you on the way!

[bonzi]

Thanks!

Anyway, I hope I will find time to fiddle with this under the excuse of learning another way of generating web content

Cheers!

Bonzi