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:
To create a thumbnail of the abc.png image with 200px height, you need to type:
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:
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!
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.
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.pngTo create a thumbnail of the abc.png image with 200px height, you need to type:
$ convert -thumbnail x200 abc.png thumb.abc.pngBut, 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!
Comments
Post a Comment