Pictures + Thumbs Preview

[TSG]

I tried this and it did not work... very strange.

[TSG]

The Orange and Blue Template, is put in here cause it was the practice template for the thumbnail codes

For a MUCH more detailed post go to the official template post:
http://www.rejetto.com/forum/index.php?topic=3820.0

[Slavi]

I'm also using this template and I find it great, but I'm bored of making the thumbnails. can anyone tell me how to ""1. if no thumb(file) exist, show the original picture (some kind of case/if structure)"" or a way to make the thumbnails automatically. you can find me in ICQ 120877798 or my mail: jonathan_smith@abv.bg
10x in advance

Pictures + Thumbs Preview

i found some code for that, and modifieded it a bit ...

i have a dir with pictures in it.
then i made thumbs from those pictures 100x100,
and placed them in a dir called "thumb"
when i list the pictures, a thumb is showed from the thumb dir...
this works very well, but................

the only drawback is:
1. when i dont have created the thumbs yet
2. the thumb dir is visible

so anyone knows how solve this:
1. if no thumb(file) exist, show the original picture (some kind of case/if structure)
2. make the thumb dir hidden

ofcource i have alot of picture dirs, and possible thumb dirs

info:

Code: [Select]

%encoded-folder%  =  directory
thumb  =  is thumbdir
%item-name%"  =  filename

Code: [Select]

[file]
<tr><td class=row>%new% <a href="%item-url%">

<script language="javascript">
var c='%item-name%';
switch (  c.substr(  c.lastIndexOf('.')  ) .toLowerCase()  )
   {
case '.jpg' : case '.jpeg' : case '.gif' : case '.png' :case '.ico' :case '.bmp' : document.write('<a href="%item-url%" target="_blank"><img align=middle width="100" height="100" src="%encoded-folder%thumb/%item-name%"> </a> ');break;
   default      : document.write('<img align=middle src="/~img_file"> ');
   }
</script>

 %item-name%</a>%comment%<td class="row right">%item-size%<td class="row right">%item-modified%<td class="row right">%item-dl-count%
</tr>

http://img190.imageshack.us/img190/5139/screenshot0013rh.jpg
http://img166.imageshack.us/img166/5670/screenshot0027sg.jpg
http://img166.imageshack.us/img166/5153/screenshot0030tp.jpg
http://img166.imageshack.us/img166/7698/screenshot0048yo.jpg

[TSG]

Um its easy to make it use the original images, but that makes you upload EVERY original image on a page, even if u restrict the size, but i have program that i use to make thumbnails, takes less than 30seconds to update my thumbs dir. If you want to look it up its called 'ReaJpg', it was recommended to me by MOONDOGG. 

[moondog]

thotor322 is perfect too its 100% free fast and easy to use try that one also reajpg is nice too.

[TSG]

I might go check that out, but so far ReaJpg is my fav

This code below is for the guy above that wanted to know how to make it load the original image.

[file]
<tr><td class=row>%new%<script language="javascript">var c='%item-name%';switch(c.substr(c.lastIndexOf('.')).toLowerCase()){case'.jpg':document.write('<a href="%item-url%"><img align=absmiddle src="%item-name%"></a>');break;default:document.write('<img align=top src="/~img_file">');}</script><a href="%item-url%"> %item-name%</a>%comment%<td align=center class=row>%item-size%<td align=center class=row>%item-modified%<td align=center class=row>%item-dl-count%</tr>

Only 3 more weeks of uni then i will have time to build a completely new template

[moondog]

wont full images slow down his server when opening. I rember talking with u and you were worried about it.

[ledufe]

I might go check that out, but so far ReaJpg is my fav

This code below is for the guy above that wanted to know how to make it load the original image.

[file]
<tr><td class=row>%new%<script language="javascript">var c='%item-name%';switch(c.substr(c.lastIndexOf('.')).toLowerCase()){case'.jpg':document.write('<a href="%item-url%"><img align=absmiddle src="%item-name%"></a>');break;default:document.write('<img align=top src="/~img_file">');}</script><a href="%item-url%"> %item-name%</a>%comment%<td align=center class=row>%item-size%<td align=center class=row>%item-modified%<td align=center class=row>%item-dl-count%</tr>

Only 3 more weeks of uni then i will have time to build a completely new template

i guess that the right solution would be if we could detect if there is or not a thumbnail, and if there is no thumbnail to the jpg file it should show the real jpg file(or it could be coded as a decision inside the code using a check box to select the user prefs on this...if he wants to show a error message like the one i puted on my code(alt="missing thumbnail of the file %item-name%") or if he wants to take the huge load time and show the real image only resized to the defined size of the thumbs...
when i got some time i will experiment this.....
or if someone else could post some sort of solution here.....feel free to try and share yours "right solution" 

[moondog]

Try thotor322 like i said its free. You can set it to make your thumb nail dir for you and rename thumbs as making them. I love it for doing lots of pics. Right now on my hfs i have gallary and flv player.  bolth easy to use and make. I might be making a install exe for it so ever one can make there own with all my tools. I currently use all free tools. And some html templates. But i am lost in the html template I just got. ohhh well

[TSG]

Nice to hear you got the thumbnail code workin MOONDOGG, i just posted to your question about the directories

[TSG]

MUCH WOOTAGE
i managed to get it to replace a broken image with another image thankyou Ledufe for the idea, i was just putting up with broken links lol

[file]
<tr><td class=row style="padding:0;">%new%
<script language="javascript">
var c='%item-name%';
switch(c.substr(c.lastIndexOf('.')).toLowerCase()) {
   case'.jpg':document.write('<a href="%item-url%"><object data="/thumb/%item-name%" align="absmiddle"><object data="/thumb/nt.gif" align="absmiddle"/></object></object></a>');
   break;
   default:document.write('<img align=top src="/~img_file">');
}
</script>
<a href="%item-url%"> %item-name%</a>%comment%<td class=row align=center>%item-size%<td class=row align=center>%item-modified%<td class=row align=center>%item-dl-count%</tr>

It is all laid out atm still cause i am still editing it, it may be beneficial to simply chunk it up.

The next upload of my template will have this for sure!

To make it work simply set an image somewhere (preferably in the same dir as the thumbs) that it will load in the case of no image (thumb).

[ledufe]

very good!

i have other kind of sugestions for your new template too....

but i prefer to test/check if it is possible(even with js) before sugest...

[TSG]

University is almost over, so i have time to play with HFS, hence my activity on the forums again, i am constantly finding problems with the original code of 'the black template' that i have been working with, but slowly i am perfecting it, just repaired a horizontal stretch problem with the status window at the bottom of the page , I am up for any suggestions, but as i have said before, the tpl i am building is for my 17kb\s upload speed, so my server can only physically do so much.

[~GeeS~]

... but as i have said before, the tpl i am building is for my 17kb\s upload speed ...

well said! Most home users of HFS have speed limits. In my country the affordable maximum upload speed is about 1Mb/s (~120kB/s). In order to achieve a reasonable loading time for a webpage (<1-2 sec), the pages should not contain to much items or only small sized pic's. It is very annoying to load pages with hundreds of items plus pictures and wait for hours to load.
Slightly OT, but anyway something to keep in mind when designing templates and a filesystem.

[TSG]

...The biggest issue with this code is that it runs for ALL files, it would be nifty if someone (maybe you) could figure out a way of makin it run for only image files...

and so, why don´t just add this file section to your template, right just above the section [file] do or create a section called [file.jpg] and do your code to show only the thumbnails, like this:

Code: [Select]

[file.jpg]
<tr><td class=rw style="padding:0;">%new% <script language="javascript">var c='%item-name%';switch(c.substr(c.lastIndexOf('.')).toLowerCase()) {case'.jpg':document.write('<a href="%item-url%" target=_blank><object data="/thumb/%item-name%" align=absmiddle><object data="/thumb/nt.gif" align=absmiddle /></object></object></a>');break;default:document.write('<img align=top src="/~img_file">');}</script>
<a href="%item-url%" target=_blank> %item-name%</a>%comment%<td class=rw align=center>%item-size%<td class=rw align=center>%item-modified%<td class=rw align=center>%item-dl-count%</tr>
[file]
<tr><td class=rw>%new% <a href="%item-url%"><img align=top src="/~img_file"> %item-name%</a>%comment%<td class=rw align=center>%item-size%<td class=rw align=cente>%item-modified%<td class=rw align=center>%item-dl-count%

this should work only for jpg files, add some other image file sections to use with only the file types you

I managed to get this working on my template extremely happy, and so will my template users be, now to get this going for [file.mp3] and have a mp3 player in there sumwhere.... looking into that one.

Note: i altered the code ledufe posted with the actual code i used.