Saturday, September 6, 2014

Bookmarks plus

Bookmarks are nice , but it would be better if you had a bit more information. Bookmarks normally look like this.


What if we could have a thumbnail of a picture on the page,a bit of information, and link to click on say something like this.

This requires a little work, but well worth the trouble. For starters, we will work with just one entry, though the page will support three columns.


The code as is.

Thebookmarks,html
[code]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <style type="text/css">
 html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 }
 #container {
 width: 900px;
 margin: 0 0 0 20px; /* top right bottom left */
 padding: 0;
 background-color: #fff;
 }
 #container h1 {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 150px;
 float: left;
 border-bottom: #c00 solid 3px;
 }
 #container #col1 {
 width: 250px;
 float: left;
 }
 #container #col2outer {
 width: 610px;
 float: right;
 margin: 0;
 padding: 0;
 }
 #col2outer #col2mid {
 width: 300px;
 float: left;
 }
 #col2outer #col2side {
 width: 300px;
 float: right;
 }
 #container #footer {
 float: left;
 width: 900px;
 border-top: #c00 solid 3px;
 }
 </style>
 </head>

 <body>
 <div id="container">
 <h1>Our Bookmarks</h1>
 <div id="col1">
<br />
<img style="float: left; padding: 0px 5px 0px 3px;" src="http://www.instructables.com/files/deriv/FNH/FRA3/HI3TWSQV/FNHFRA3HI3TWSQV.SQUARE.jpg" alt="" align="left"  />
<a href="http://www.instructables.com/id/Spiral-antenna/">Spiral antenna.</a>
Just a simple bipolar antenna that has no scientific basis for how it was done. O… posted on Jun 17, 2013
<br /> <br />
</div>
 <div id="col2outer">
 <div id="col2mid">
<br />

 </div>
 <div id="col2side">

 </div>
 </div>
<br />
 <div id="footer">
 <p>Copyright © 2014 </p>
 </div>
 </div>

 </body>
 </html>
[/code]

The easy way is to copy an existing section of code to modify it and then add the code back to the page. You will change the parts in bold.

<example>

<img style="float: left; padding: 0px 5px 0px 3px;" src="URLof the thumbnailPicture2use.ext" alt="" align="left"  />
<a href="Urlof thebookmark">Title.</a>
Information about the bookmark posted on DATEPOSTED.
<br /> <br />

Actual entry might be:

 <img style="float: left; padding: 0px 5px 0px 3px;" src="http://www.instructables.com/files/deriv/F10/9R1B/HD4VGAK9/F109R1BHD4VGAK9.SQUARE.jpg" alt="" align="left"  />
<a href="http://www.instructables.com/id/The-Antenna-experiment/">The Antenna experiment.</a>
We are going to test the feasability of getting electricity from the atmosphere. W… posted on Mar 27, 2013
<br /><br />

We will add the new entry in the second column. So that it looks like this:


so now the code in the body looks like:

[code]
  <body>
 <div id="container">
 <h1>Our Bookmarks</h1>
 <div id="col1">
<br />
<img style="float: left; padding: 0px 5px 0px 3px;" src="http://www.instructables.com/files/deriv/FNH/FRA3/HI3TWSQV/FNHFRA3HI3TWSQV.SQUARE.jpg" alt="" align="left"  />
<a href="http://www.instructables.com/id/Spiral-antenna/">Spiral antenna.</a>
Just a simple bipolar antenna that has no scientific basis for how it was done. O… posted on Jun 17, 2013
<br /> <br />
</div>
 <div id="col2outer">
 <div id="col2mid">
<br />
<img style="float: left; padding: 0px 5px 0px 3px;" src="http://www.instructables.com/files/deriv/F10/9R1B/HD4VGAK9/F109R1BHD4VGAK9.SQUARE.jpg" alt="" align="left"  />
<a href="http://www.instructables.com/id/The-Antenna-experiment/">The Antenna experiment.</a>
We are going to test the feasability of getting electricity from the atmosphere. W… posted on Mar 27, 2013
<br /><br /> <br />
 </div>
 <div id="col2side">

 </div>
 </div>
<br />
 <div id="footer">
 <p>Copyright © 2014 </p>
 </div>
 </div>

 </body>
[/code]

You can do it your own way, but this is just an idea to toy with.

-----------------------------------------------

Thumbnail pictures:
You need to pass -thumbnail argument to convert command:
convert thumbnail <width>x<height> image.png thumbnail.png
So to create a thumbnail of the abc.png image with 200px width, you need to type:
$ convert -thumbnail 200 abc.png thumb.abc.png
To create a thumbnail of the abc.png image with 200px height, you need to type:
$ convert -thumbnail x200 abc.png thumb.abc.png
But, hold on real part is ahead, since I had to go through 10000+ images I wrote perl script (although I can not put real script here because of legal issues). Nevertheless here is sample shell script:

#!/bin/bash
FILES="$@"
for i in $FILES
do
echo "Prcoessing image $i ..."
/usr/bin/convert -thumbnail 200 $i thumb.$i
done 
 
 

or

a) for batch purposes, you can either use a shell script or even the mogrify command (part of imagemagick):

bash$ for i in *.jpg
do
convert -scale ’48×38′ $i TN_$i
echo $i processed
done
mogrify -format jpg -quality ’95%’ *.tiff (bulk-conversion)

b) For thumbnails, you quite often don’t want to use imagemagick or convert or whatever; for my normal size (48×38), it creates a whopping huge 50K jpg when there are other ways of getting them much much smaller:

bash

$ for i in *.jpg
do
djpeg $i | pnmscale -xysize 48 38 | cjpeg -opti -progr -qual ’75%’ > TN_$i
echo $i processed
done

This keeps the average image-size down to about 1K – rather more suited to a page of thumbnails!

No comments:

Post a Comment