How To: Create a Simple Image Gallery with HTML tables

Sometimes you just want a simple Image Gallery. With no php, javascript or flashy Adobe flash required. Just simple, quick and dirty HTML that you can type out and be done with your post.

What you will need:

  • The images you want to use in their Original format
  • Every image in a thumbnail format (duplicates, preferably in 150x150px)
  • Optional: HTML editor with color coding

Steps:
1. Gather all the images you want to use in your gallery, and create a 150x150px duplicate of each one.
2. Add the prefix “_thumb” or something similar to the 150x150px duplicates.
Example: Kangaroo.jpg (Original) Kangaroo_thumb.jpg (Thumbnail).
3. Upload the images to your host.
4. In the HTML document, start with the <table> tag. Then start a table row with the <tr> tag. And finally add your first cell (Image) with the <td> tag, and end it with </td>.

Example:
<table>
<tr>
<td><a href=”http://example.com/image.jpg” target=”_blank”><img src=”http://example.com/image_thumb.jpg” /></a></td>

5. Keep adding cells and rows to your gallery in a symmetrical pattern. Remember to cut each row with </tr> and the table with </table>

4×4 example:
<table>
<tr>
<td><a href=”http://example.com/image.jpg” target=”_blank”><img src=”http://example.com/image_thumb.jpg” /></a></td>
<td><a href=”http://example.com/image2.jpg” target=”_blank”><img src=”http://example.com/image_thumb2.jpg” /></a></td>
</tr>
<tr>
<td><a href=”http://example.com/image3.jpg” target=”_blank”><img src=”http://example.com/image_thumb3.jpg” /></a></td>
<td><a href=”http://example.com/image4.jpg” target=”_blank”><img src=”http://example.com/image_thumb4.jpg” /></a></td>
</tr>
</table>

2×3 example:
Meerkats At The Zoo Gallery

3×3 example:
Cherry Blossom Gallery

Feedback and questions welcome.

How To: Save Disk Space, Bandwidth and Load Time on Website Images Using Smushit.com

SmushItIf you are a web developer you know the importance of disk space, bandwidth and load time when it comes to images. And it will become increasingly important latter when web 2.0 becomes standard among with HTML5. You need a way to compress the images, and I don’t mean resizing the image, which can also be a good idea for thumbnails.

If you don’t want to sacrifice your high resolution image by resizing it, you can use SmushIt.com to compress it. SmushIt.com will remove unnecessary bytes and diverse colors from your image, without spoiling the quality, and in the process save some space. The savings can be as low as 0.97% reduction to as high as 36% reduction, nevertheless, it’s a good idea.

Just go to SmushIt.com and upload your image, the website will do the rest. Have fun compressing!

WordPress Plugin – WP Minify

WordPress is great. It does all of the hard work for you, manages Javascript, CSS, HTML, PHP, Layout etc. All of that is great and all, but it could be better. The code contains allot of spaces, comments and other crap that isn’t necessary. One solution would be to open up all of the files and edit them manually, but that takes to much time and effort, what you really want to be doing is some blogging. Then this is your solution WordPress Plugin WP Minify. It “Minifies” all of your CSS and Javascript and puts it into one file, which in turns makes your blog allot faster. You can download the plugin HERE or install it through the WordPress Dashboard.

Hearts, Planets and Other Unicode Symbols

Ever seen a heart in a HTML document? Or perhaps a Word processing document? Not an image, an actual hear, in which you can copy and paste. Just like it was a part of the font package. Well it is, on most operating systems. And it’s apart of UTF-8 UNICODE, so you can use it almost anywhere, just make sure you have to right syntax. Here’s the syntax for some symbols in HTML:

Name Symbol HTML CODE
Heart-1: &#9829
Heart-2: &#9825
Star-1: &#9733
Star-2: &#9734
Ohm: &#x2384
Sun: &#9737
Mercury: &#9791
Venus: &#9792
Earth-Moon: ♁ ☽ &#9793-&#9789
Mars: &#9794
Ceres: &#9907
Jupiter: &#9795
Saturn: &#9796
Uranus: &#9797
Neptune: &#9798
Pluto: &#9799

Cool huh? If you want more, check out Peppoj.net/symb.html for more. Keep checking it, cause I will keep adding stuff that I find interesting.

Do you have a symbol you want me to add? Leave a comment!