Thumbcode

              

Making Thumbnails for your graphics.

Credit,  By Cat

This is not my work credit goes to Cat whom I don't know her Url. However there are credits below as you go alone. Thanks to
Cat.  If you are Cat please send url or permissio
n.


Making Thumbnails for your graphics------------

There are a couple different choices for making thumbnails. If you have a graphics program that lets you resize the pictures than you just take the original graphic and resize it down a lot smaller and then save it as another name. Now you have the Original big picture and the new thumbnail.

If you don't have any graphics programs (photo editing type programs) check to see if you have Microsoft photo editor. If your computer is new this program usually comes with it. If you are not sure if you have a graphics program, download a gif or jpg and when its on your computer go to it and double click on it. What programs comes up that lets you look at the graphic? Does the same program let you resize?

If you can't resize them than you can just put the original graphic image in, but you put HTML height and width codes in the img src code to make them smaller. Only problem with this is that even though they look smaller on your screen (like a thumbnail, they will still take as ever long to load as the original big image). Could be a problem if you have a bunch of graphics cause you want your page to load fast. But if you want to use this code you do the following :

(img src="name of your file.jpg" height="50" width="50")

you can change the height and width to what ever number you want. Remember change the ( ) to < > to make code work.

Probably height/width will end up being around 60 t0 150. Another problem with using this - When you use a graphic program to resize the image the proportions of the picture stay the same and it usually looks good. When you use the height and width codes it can make the image look stretched if you don't get the numbers exactly right (proportionally right).

OK, now you have a thumbnail graphic and the original graphic. You put the thumbnail up and than make a hyper text link to the original graphic. In plain English, you make it so when they click on the thumbnail it sends them to a page with the original picture on it all nice and big so they can see it. This is easy you just put all you thumbnails on one html page and then for each thumbnail you make up a html page for its original.

Then you use the:

(a href="originalgraphichtmlfilenamehere.html")(img src="thumbnailgraphichere.jpg" border=0)(/a)

now you use that border=0 if you don't want a border a border around you thumbnail. You can put the height and width codes right after the border code. Don't forget to change the ( ) to < > to make it work. All you are doing is making the thumbnail the jumping off point to go to the original graphics html page.

And there you have it. :-) one more thing. It is much easier if you are going to put a whole page of thumbnails to put them in a table. You can make a table that doesn't have any borders so it is invisible. Invisible tables are a great way to get your text, graphics, etc. to line up the way you want on a page.

Regards,

Cat



This idea for thumbnails was taken from:

http://www.rasterman.com/code.html

2003-11-01 10:23:25.000000000 +0900 Epeg

Over the last few days I have addressed something that bothered me greatly while fixing up my web pages. The INSANELY SLOW speed of generating thumbnails for photos.

First, some background. I have a large photo collection. Definitely not the biggest as I can imagine some people have even more extensive collections. I have something like 1300 photos, most of which are 2560x1920 in size. By any stretch this isn't small. When making thumbnails of these images, under Nautilus on my machine the process would take about 1 second per photo. That's a lot of time to thumbnail my collection. Yes they get cached, but every time you rename or move files around they need re-thumbnailing. This really got to me. So I started using Imlib2 for thumbnailing. Great. This gave about a 2-3 times speedup, letting me do about 2 to 3 thumbnails per second. But that just wasn't good enough. I knew I could do better, thus my work on what I now call Epeg was born.

Epeg can thumbnail at about 25 thumbnails per second. Compared to the original speed of Nautilus... this is a decent speedup and worth the effort of using Epeg. Epeg is a library with a small API that lets you load a JPEG file, scale it down (on load) append comments and thumbnail info, save, access the scaled pixel data, load comments and thumbnail info etc. It's small, compact and fast and it's only requirement is libjpeg.

You can get a copy of a preliminary tarball from my Files section. A direct link to the epeg-0.0.1.tar.gz file is here too. It currently has no documentation for the API, but there is sample code for its usage in the src/bin/epeg_main.c file. It should get you at least an 8 times speedup over anything you have been using. I'd highly suggest using this to generate thumbnails of your photo collections. Yes it will require you to patch whatever tools you use, but for those who can program, it's worth it.

If you want to keep up with the CVS repositor of Epeg, access it with:

cvs -d :pserver:anonymouscvs.enlightenment.sourceforge.net:/cvsroot/enlightenment co e17/libs/epeg

Good luck. I'll keep updating this code, but the next major work is some documentation for it. If you find it useful, please let me know and any patches or improvements are welcome.

Note. Any speed figures I have given are on MY machine. Your thumbnailing speed (in thumbnails per second) will vary depending on your CPU, RAM size of photo and thumbnail etc. My tests were RELATIVE. They were conducted on the same source images, outputting thumbnails of the same dimensions on the same machine.



This idea was taken from

http://www.angelfire.com/il/steve2333/thumb.html

To put 5 thumbnails in a row use this table code

<table border="0" width="450">

<tr>

<td align="center">

<a href=

"http://url of full size pic here">

<img src=

"http://url of thumbnail here"></a></td>

<td align="center">

<a href=

"http://url of full size pic here">

<img src=

"http://url of thumbnail here"></a></td>

<td align="center">

<a href=

"http://url of full size pic here">

<img src=

"http://url of thumbnail here"></a></td>

<td align="center">

<a href=

"http://url of full size pic here">

<img src=

"http://url of thumbnail here"></a></td>

<td align="center">

<a href=

"http://url of full size pic here">

<img src=

"http://url of thumbnail here"></a></td>

</tr>

</table>