Help with FancyIndex mods

[jschaffe]

After taking advantage of Conor's help in creating MyFancyIndexArtist http://www.bruji.com/forum/viewtopic.ph ... ffe#p16812, I tried one more thing (tm). I wanted to dress up the basic text-only appearance by adding a column for the artwork. Unbelievably (!), I was able to make it work:

http://web.me.com/jschaffe/New%20Age%20 ... er%20art)/

Although this example doesn't show it, tall boxed-set images retain their shape, making the corresponding row a bit higher. Kind of cool

But there are two tweaks I'd still like to make. First, I was wondering if anyone could point me to how to adjust the spacing around the thumbnail images to get them centered. Here's what I have at the moment:

<td width="55"><img src="[key:coverImageURL]" style="width: 50px; margin-right:5px;" border="0" style="padding-right: 2px;"></td>

I can use trial and error until I figure it out, but I'm hoping someone can help me get a leg up.

Second, is there a way to disable sorting on the cover art column? I searched around a while, but anything I found seemed to be pretty complex.

Thanks!

[Conor]

Disabling the ability to click on the column seems a bit tricky as the table sorter is applied to the entire table and not individually to each column. You could add a custom sorting algorithm that does nothing for covers sorting.

In the file fi.js inside the images folder Images/FnacyIndex/fi.js you would change the line:

Code: Select all

headers: {0: {sorter:'titles'}, 6: {sorter:'movieratings'}},

for

Code: Select all

headers: {0: {sorter:'titles'}, 1: {sorter:'none'}, 6: {sorter:'movieratings'}},

And in fi.shared.js you would look for the function "initializeTablesorterParsers()" and add the following:

Code: Select all

* This code creates a tablesorter parser that does nothing */
	$.tablesorter.addParser({ 
		id: 'none',
		
		is: function(s) { 
		// return false so this parser is not auto detected 
		return false; 
		}, 
		
		format: function(s) { 
		    return null;
		}, 
		
		type: 'text' 
	});

All the above is from looking at the code, I don't know enough Javascript or about JQuery to know if that will work.

For the centered margin you can try the following CSS:

Code: Select all

<td width="55" style="text-align: center;" ><img src="[key:coverImageURL]" style="width: 50px; margin:auto;" border="0" style="padding-right: 2px;"></td>

[jschaffe]

In the file fi.js inside the images folder Images/FancyIndex/fi.js you would change the line:

Code: Select all

headers: {0: {sorter:'titles'}, 6: {sorter:'movieratings'}},

for

Code: Select all

headers: {0: {sorter:'titles'}, 1: {sorter:'none'}, 6: {sorter:'movieratings'}},

Actually, using your code snippets as a major learning point, I searched the Web a bit and found a very helpful Web page http://tablesorter.com/docs/. There I discovered that all you really need to do to disable sorting on a column is:

Code: Select all

headers: {0: {sorter:'titles'}, 1: {sorter: false}},

So the additional parser in fi.shared.js isn't needed after all!

For the centered margin you can try the following CSS:

Code: Select all

<td width="55" style="text-align: center;" ><img src="[key:coverImageURL]" style="width: 50px; margin:auto;" border="0" style="padding-right: 2px;"></td>

Worked like a charm! I fully expected that waiting for all the little thumbnails to download would be slow, and I wasn't disappointed. (See http://web.me.com/jschaffe/Rock,%20Pop,%20R&B/ for an example.) I'm wondering whether resizing each row to fit the height of the image contributes to how long it takes. Is increasing the default row height possible? Would it help speed things up at all? And would it still permit the height to be increased for tall boxed-set images?

Also, it looks like the images downloaded are quite large. Somehow I had the impression CDpedia also generated thumbnail-sized images. If so it might be much faster to download those instead.

Any other ideas on speeding up the download of the thumbnails?

And finally, it looks like inserting:

Code: Select all

 href="details/page[key:incrementalNumber].html">

somewhere in the line:

Code: Select all

<td width="55" style="text-align: center;" ><img src="[key:coverImageURL]" style="width: 50px; margin:auto;" border="0" style="padding-right: 2px;"></td>

might also make the images active links to the detail. Am I off base here?


By the way, this has been a lot of fun, and I really appreciate all your help!

[jschaffe]

I searched your forum and found this little nugget:

Code: Select all

img src="details/[key:coverImageURL]"

Downloading the image is way faster using the "details" directory.

But it does bring up the point, what are the larger images in the images directory used for?

[Conor]

There should be no images in the main images directory as the image export is set to "no" in the meta tags for the main template only the details has a image export with a very specific size settings. You are most likely overriding the no image export settings in the export panel by selecting the image export check box. You are correct that I should most likely reverse the template that exports the images to give the right impression in the export panel.

[jschaffe]

There should be no images in the main images directory as the image export is set to "no" in the meta tags for the main template only the details has a image export with a very specific size settings. You are most likely overriding the no image export settings in the export panel by selecting the image export check box. You are correct that I should most likely reverse the template that exports the images to give the right impression in the export panel.

I deselected the upload images box. However, when I checked using MobileMe, there are still files in the images folder. I assume that republishing an export wouldn't clear away image files uploaded previously?

Would it be safe to delete them? (I could try an experiment with one of my smaller exports, I guess.)

Also, I figured out how to get the thumbnail to activate the detail overlay:

Code: Select all

<td width="55" style="text-align: center;" ><a class="cb" href="details/page[key:incrementalNumber].html"><img src="details/[key:coverImageURL]" style="width: 50px; margin:auto;" border="0" style="padding-right: 2px;"></a></td>

I've got everything I want working now. Here's an example: http://web.me.com/jschaffe/New%20Age%20(all)/

I'm still wondering whether the download time of even the smaller images can be improved? A couple of my exports are too large to include even the smaller images, but others are borderline (like this one: http://web.me.com/jschaffe/Rock,%20Pop,%20R&B/

[Conor]

I assume that republishing an export wouldn't clear away image files uploaded previously?

For speed reasons the update only adds modified files, it would not delete previous exported images. You can force and "Upload" that will do a clean upload of your export by pressing command-n to change the "Update" button to an "Upload" button.

Would it be safe to delete them?

it would be safe to do it by hand, but be sure to select only the cover images that would be a_number.jpg and leave the template images and .js files in the images folder.

I'm still wondering whether the download time of even the smaller images can be improved.

If your looking as gaining speed and sacrificing image quality, take a look at the top of the FancyIndexDetails.html file for the image export options. You can set the pixel sizes smaller or a higher compression (a lower number e.i: 0.5).

Code: Select all

<meta name="image-compression" content="0.8" />
<meta name="image-height" content="240" />
<meta name="image-width" content="240" />