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.

iPhone App: WiFi Photo Transfer (Free) – Send iPhone photos over WiFi

WiFi Photo TransferSharing photos with an iPhone is easy. Just plug it into a Mac, PC or (depending on libimobiledevice) Linux. The phone should be, after a very unexciting driver install, recognized as some sort of digital camera or similar, by the system. The age of Wireless is here, and tangly wires should only be used for charging. This is were wireless technologies such as Bluetooth and WiFi come in.

WiFi Photo Transfer (Free) is a very useful application for iPhone that lets you transfer photos from your iPhone to your computer over WiFi. It does this by acting like a web-server on the device, and can be accessed by any computer on the network using a web-browser. Continue reading iPhone App: WiFi Photo Transfer (Free) – Send iPhone photos over WiFi

iPhone App: Core Monitor (Free) – Clear iPhone memory (RAM)

Core Monitor (Free) AppStore

If you have an older generation iPhone, such as iPhone 3G or 3GS. You may notice, after 2-3 years of usage, that the OS runs sluggish and may even crash. Its well known that improvements and upgrades to the OS may allocate more memory, and having a nice little multitasking tool is nice. But its going to eat up memory fast.

Core Monitor (Free) is a nice little application for iPhone that lets you visualize current memory usage. As well as monitor:

  • Remaining Battery (Roughly)
  • Disk Usage
  • CPU Load
  • Running Processes
  • Device Information (Slightly buggy in my experience)

Continue reading iPhone App: Core Monitor (Free) – Clear iPhone memory (RAM)

Create your own (Non-Commercial) QR-Code

QR-CodeA QR-Code is a form of barcode (which you can find on almost anything you buy at the supermarket) that has the ability to store different types of information. Such as: Alphanumeric text, a website URL, a phone number and a SMS text message. Once the barcode is generated, it can be printed and scanned with a QR-Code reader. Like a cellphone camera, and decoded with an app on the phone. Like the app “RedLaser” for iPhone. Continue reading Create your own (Non-Commercial) QR-Code

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!