Cover Flow Template (static html)

[wicker_man]

Ok friends, i've decided to make a template the way i wanted my list to be presented, and I hope others enjoy it and decide to use. I've got a limited knowledge of html and css, and that's it. No php, no dinamic stuff, sorry.

First, let's check the result here:

EDIT: No longer an url for a site, but a big zip file with everything in it.
wickerman's film list

On that index page you have 3 options:

1) see the movie list on a standard text list. It is best for quickly find a movie and for those with a slower connection.



In it, you can choose to see the entire list, the entire list sorted by director, chunks of 500 films each and some special lists (criterion collection, eureka collection). You can, of course, make the lists you see fit.
Clicking on the name of any film will send you to the individual page of the film, in which there's a big poster and all the information i think is relevant.



The url info links to the corresponding IMDB page. Again, what info appears here is all up to the person setting his/her list.
The picture appears with a nice reflection below it - this magic comes from a javacript I found on the internet - more about it below.

2) see the movie list on a "cover flow".



This way one can browse through the list seeing the posters, as if it was on a mac or on itunes. Really eye catching but demands a faster web connection. Upon entering such list you wont see the images directly as they will appear (with the nice shadow and skewed to the left), because the javascript magic only kicks in when all the images are loaded.
Because of this, and to not make users wait too long, my movie list, in this cover flow fashion, is divided in chunks of 100 films each; there's also a link for criterion films, eureka films and pre/post-apocalyptic films (my favourite genre!). Clicking on any image, of course, will get you to the same individual movie page as on the simple text list.
Finally, as an added eye-candy, if you click on See full list with Piclens Lite you will be able to see the *entire* film list in images, either on a simple slideshow fashion, if you do not have the Piclens Firefox/Safari/IE extension, or, if you do have it (which I highly recommend), on an amazing wall of posters, with the full 1900+ images in all their glory!
Like this:



3) download the .amc file for convenience.


Interested in having your list with this appearance? Keep on reading, then!

First off, the software. Depending on how you have your list, you will need the following:

a) amcimgimport.exe - a tool to connect the catalog with images (posters) for each film. Get it here.

b) a batch renamer software - i recommend the best, antp's very own Ant Renamer. It's here

c) an image editor that can do batch processing and conversion. I use irfanview - its's free, fast and very apt for the job. Get it here.

d) a text editor that can batch process and find/replace text inside files. I use notepad++ portable, because it's free, opensource, efficient, and portable (no need to install). Get it here.

e) there's probably no need for it now, but i used a very nice web editor called komposer portable, also free, opensource, portable, etc. Get it here.

f) If you want to use the piclens thing, and unless you're an rss geek, you will also need Piclens Publisher, a software that they (Cooliris, the company behind Piclens) have created. It's free, but only runs on XP and OSX (no windows 2000).

That's it for software.

You will need, of course, the html templates to use on AMC. They are here:

EDIT:

Code: Select all

http://www.mediafire.com/?hjomitjwk2n

(copy the link and paste it on a new tab, otherwise it will give an error)


You will also need, for the coverflow/refection thing a javacript called reflex.js. Mine is at

EDIT:

Code: Select all

http://www.mediafire.com/?qtkty0yqoez

(copy the link and paste it on a new tab, otherwise it will give an error)

(you'll have to decompress it onto the folder where the catalog and images are).

The original (which is exactly the same, but comes with an example page, example photos and also a nerdier version of it), is available at
http://www.netzgesta.de/reflex/ - this is the site where it cames from, and all credit regarding this javascript goes to Christian Effenberger, its creator.


HOWTO

I
Prepare your list - have it as complete as possible and make that the images (posters) for the films are all on the same folder as the .amc file and its name is based on the .amc file name. In my case i have a wickerman.amc file and wickerman_xxxx.jpg files (ex: wickerman_1.jpg , wickerman_452.jpg , wickerman_1123.jpg , etc.).
If needed, you should change the name of all of the image files with this formula:


catalogname _ (that's underscore) film number .jpg

Example: wickerman_321.jpg

Why the underscore? Because when we export, from Ant Movie Catalog, to html, it thinks that the image files are named like that.

To change the file names i used Ant Renamer. Install it, open it, throw inside (drag and drop) all the jpg files (yes, all files have to be jpg, if you need to convert them, use Irfanview to batch convert them all), and, in actions, choose string replacement, searching for and replacing by as needed. Tick "Replace all occurrences" to change them all!

When changing the names of your images, AMC will no longer understand that this image is the poster for that film, and when you browse films, inside AMC, no image will appear. To change this you have to re-link the image files to the .amc catalog, which is really easy.

Download the aforementioned amcimgimport.exe and place it on the folder where the catalog and images are. Open a command prompt (Windows start button > Run...) and on it go to the correct folder. You may have to type "cd.." and hit enter to go back, or type "cd nameoffolder" and hit enter to go to a sub-folder. When you get to the correct folder, type this:

Code: Select all

amcimgimport.exe nameofcatalog.amc nameofcatalog_ link

and hit enter. A short while later all will be set!
(you should, of course, change nameofcatalog for whatever it is the name of your catalog. A single word without spaces or strange characters works best).

II
Resize images and make thumbs - now it's time to resize all images so that they have the same maximum height, and therefore look better. Besides, this will make your total Megabyte load smaller, which is nice!
I chose a maximum height of 540px for the images to appear on individual pages, and 350px for the cover flow list. By maximum height I mean that, if pictures are taller they will be resized but if they are smaller they wont, so as to not distort and pixelize them.

First, let's deal with the big pictures:
To do this as quickly and efficiently as possible, i used Irfanview.
Install it, open it and go to File > Batch Conversion/Rename...

A new window will appear. Here choose Work as: "Batch Conversion", Output format: JPG, and tick "Use advanced options". Press "Use current ('look in') directory" so that the files remain on the same folder.
Pressing the button "Options" you can choose the quality of the files (i chose 70, so as to not have too big files), and ticked NO box whatsoever.
Back to the batch window click "Advanced", and do the following:

Tick "RESIZE", "Set new size", and "Set one or both sizes to". On the "Height" box type 540 (or whatever size you prefer). Tick "pixels".
Tick "Preserve aspect ratio (proportional)", "Use resample function" and "Don't enlarge smaller images" > very important, this one. Set DPI value: 72.
On the right column, tick ONLY this box: "Overwrite existing files". Press OK and you will return to the main Batch window.

Finally, select all the files you which to resample (change size) and press Add all. Click Start batch! A minute or so later all image files will be ready.

Now, the same thing must now be done to the smaller images, the ones that will appear on the cover flow list. You can avoid this step, and use the same images on the cover flow and on the individual pages, but that will make loading times for the webpage even longer, i do not recommend it.

So, to do it, use the exact same settings and images as before BUT WITH THE FOLLOWING CHANGES:

> On "Output directory for result files" press "Browse" and go to a sub-folder, within your main folder, called mini. Create this folder previously if you need to. Actually it can have any name you want, but that's the name it will have on this tutorial, and that my template expects.
> On the "Advanced" window, choose 350 pixels instead of 540 on the "Height" box.

III
Export your catalog to full text lists - First off, decompress my templates, available at

EDIT:

Code: Select all

http://www.mediafire.com/?hjomitjwk2n

(copy the link and paste it on a new tab, otherwise it will give an error)

onto the templates folder of your Ant Movie Catalog installation.
On Ant Movie Catalog go to Tools > Preferences and, on the Export tab choose, on "Individual pages and pictures filename style:", "Catalog name + Movie number". You can also tick "Add zeros in front of the number for low numbers"; this will later be very good for the piclens extra - i did not do it for my list and now i regret it :\
Press save to return to the main window.

Now, go to File > Export and the Export window will appear. Choose html as file format. Choose "number" on the "Sort by" section. Movies to include = all.
Above, press "Full". Now press on the open icon (it's a folder with an arrow) and locate and choose the wickerman_template_full.html.

Now, it's time for some tweaking and confirmation business.
First, change the title for whatever title you want. Mine is :

Code: Select all

<title>list</title>

Next, you'll see that there is a logo. Change that for your own (create one) or delete it all together. It's here:

Code: Select all

<a
 href="index.html"><img class=""
 style="border: 0px solid ; width: 284px; height: 34px;"
 alt="logo" title="logo" src="logo.png"></a>

Just change the "width" and "height" to match yours and the file name (logo.png) if it's not that its name and extension.

Next, you will see a list of links for the several lists that will be available. Change this as you see fit for your own choices, but remember the name of the htmls - you will need to know them later!

Code: Select all

      <td><a href="list_full.html"><span
 style="font-weight: bold;">full list</span></a></td>
      <td><a href="list_1.html"><span
 style="font-weight: bold;">0-500</span></a></td>
      <td><a href="list_501.html"><span
 style="font-weight: bold;">501-1000</span></a></td>
      <td><a href="list_1001.html"><span
 style="font-weight: bold;">1001-1500</span></a></td>
      <td><a href="list_1501.html"><span
 style="font-weight: bold;">1501-2000</span></a></td>
      <td><a href="list_directors.html"><span
 style="font-weight: bold;">Directors</span></a></td>
      <td><a href="list_criterion.html"><span
 style="font-weight: bold;">Criterion</span></a></td>
      <td><a href="list_eureka.html">Eureka (MOC)</a></td>

For those who do not know how to do this, here's an explanation:
To change the words that will appear on the web page change what's between > and </span></a>.
Like this:

Code: Select all

>Criterion</span></a>

changed to

Code: Select all

>WHATEVER</span></a>

To change the links where to this words link to change what's inside the " " on these sections.

Code: Select all

<a href="list_eureka.html"

Remember that all these html files will later be created, and they have to be, for simplicity sake, on the same folder as everything else.

Next, there's a section with the
$$Item_BEGIN and $$ITEM_END part of the template, the juicy part. Here, use these definitions or change them for others of your choice. A full list of tags is available on AMC. On the main page, go to Help > Help index. On the help window that will appear, click on Export to another format > Export to html and there they are on the text on the right side.

After all these changes you made, better save the template. Use CTrl+S or click on the blue disk icon.

Don't forget to press, above, left of the icons, on the "Export both" button, choosing "Export selected". This is VERY important.

Ok, you are now all set to export a full list of your movies!
Click on "Export..." and, on the save window that will appear, write list_full.html
If you had chosen another name, on the list of link inside the template, for the full list, you should rename it for that name, instead.

To create all of the other lists linked on the top of this template repeat the process for each one, but remember to select only the files you want and choose "Selected" on "Movies to include".
For the list_directors.html you have to Sort by Director. That's easy: On "Sort by:" choose "Advanced Sort options..." and, on the small window that pops-up, click on "Director" and then on the right arrow - the simple one, not the double one. Now export as mentioned before.

Once all of these are exported, you'll have all the full lists (text style) ready!

IV
Export your catalog to cover flow lists - Ok, now it's time to export the nice looking ones

Use the same initial procedure as above but choose the wickerman_pic_template_full.html instead. Let's tweak it as needed:

change the title and logo, in the same way that is explained above.

Have you remembered to place the reflex.js file on our famous folder? This template asks for it here:

Code: Select all

<script type="text/javascript" src="reflex.js"></script>

If you are not planing on having the piclens functionality, you may remove this line

Code: Select all

  <script type="text/javascript" src="http://lite.piclens.com/current/piclens.js"></script>

and this bit as well

Code: Select all

<a href="javascript:PicLensLite.start();">See full list with Piclens Lite <img src="http://lite.piclens.com/images/PicLensButton.png" alt="PicLens" width="16" height="12" border="0" align="absmiddle">
</a> 

After that there are a lot of cells, with all of the lists i made: 1, 101, 201, .....1901, Criterion, Eureka, etc. Change these as you see fit, and remember/write down the names you chose for the htmls - you will need them later!

The title for each cover flow list (it appears bellow the list of lists and above the images) is defined here:

Code: Select all

<big><span style="font-weight: bold;">   1-100</span></big><br>

I do not know how to change this dynamically, so you will have to change it each time you export a new list. It's a pain in the neck, but i do not know who to make it easier.

Remember i told you to create a sub-folder called mini, to place there all the smaller images? This will be checked by the following bit:

Code: Select all

img src="mini/$$ITEM_PICTUREFILENAME"

If you gave that folder a different name, change mini for whatever word you choose.

Now, for the javascript options, present here:

Code: Select all

class="reflex itiltleft iopacity20"

That means the following:
These images will have the nice reflex, they will all be tilted to the left and the opacity of the reflex will be 20%.

You can change this as you want, in the following manner:

itiltright > images are all tilted to the right.

itiltnone > images are not tilted, they remain facing forward.

remove the word ititlleft > this will revert the javasctipt option to its default value, which is an image tilted to the left, another facing you, another tilted to the right, and so on, always repeating this sequence.

iopacity > choose the percentage you find best. I like 20

And that's it for the cover flow lists! Export each one with the correct filename and don't forget to change the

Code: Select all

<big><span style="font-weight: bold;">   1-100</span></big><br>

to the correct numbers/words on each list.

IV
Export individual pages of your catalog - at last, the individual pages.
On the export page, choose "Individual" instead of "Full" and open the correct template, which is wickerman_template_individual.html

Let's tweak it for your needs:

On

Code: Select all

class="reflex itiltnone iopacity20"

change this as needed, and as explained above.

On the various cells available, change/remove what you do not want or what is out of the order you want.

If you do not want to have the "Back to previous page" link on the bottom, remove this:

Code: Select all

 <a href = "javascript:history.back()">Back to previous page</a>

Save the template and export the individual pages! The name for the file is irrelevant, because you changed the exporting options, on the main AMC page, so that the individual pages will be named:

nameofcatalog_1.html
nameofcatalog_2.html
...
nameofcatalog_1542.html
etc.

And these are done!

V
Prepare the Piclens experience! (optional)

This extra involves little work and it gives your visitors an *amazing* experience, especially if they have the piclens extension on their firefox. You should have it, so download it (and firefox, if you live in a cage and don't have it!).

Oh, wait, piclens is also available for Safari and Internet Explorer. Nice.

Anyways, download and install Piclens Publisher. Open it and follow the instructions. Don't forget to point to the correct folder and choose the correct images to work with (the ones on your "mini" folder).

When it finishes it work, it will create a couple of files and folders inside a folder called piclens, which it places on your by now famous have-it-all folder.

Let's make some changes on these files and folders, shall we?

First, move the folder "pl_thumbs" into the "mini" you have.
Piclens publisher also created another folder, "pl_images" which contains a copy of all your "mini" images. You can delete this folder that piclens created because we will point the rss onto the original images, not these stupid copies.

Now, the files that it created. Gallery.html and instructions.html are not necessary, and you can keep those here or delete them, doesn't matter.

The photos.rss, on the other hand, is EXTREMELY important, and should be moved onto your main folder.

Now open it on your good text editor, like Notepad++ and once there you'll change several things, by pressing Crtl+F and choosing the replace tab.
Here's what and how:

Find: <link>pl_images/
and replace it with
<link>mini/

Find: media:thumbnail url="pl_thumbs/
and replace it with
media:thumbnail url="mini/pl_thumbs/

Find media:content url="pl_images/
and replace it with
media:content url="mini/

Press Replace All after each one of these choices to actually replace them.
Save the file (remember, on the main folder, not on the piclens sub-folder, which, by now, you can delete if you want).

And that's it! All done!
Now all you need is some web space to upload it too. I looked on a comparison site for free web hosting providers and EDIT i'm totally disillusioned with those providers, and therefore i'm sharing my list as a big (120 MB) zip file.

Wow, after all this i hope you all enjoy the template and please feel free to post any questions regarding it!

EDIT:
Everything needed is on this collection >

Code: Select all

http://www.mediafire.com/?sharekey=f3c0518174c15cd44012e8015643d9c86d398e3316c1d1d7

The complete list itself (120MB) is at > http://www.ziddu.com/download/3747461/wm.zip.html

[antp]

Nice detailed topic
That "cover flow" looks really good.

[wicker_man]

Yeah, it was what i wanted for a long time, and now i found out how to do it!