Simple newbie HTML question...

shinigami · Joined: 20 Sep 2007 Posts: 2

Good day to all of you.

Im just a newbie in HTML. To be honest I know nothing about it. And I humbly ask for your help.

Here is my question: Is there any HTML code that can sort out or format [hundreds of] image codes (from photobucket, imagevenue, etc.) to a specified number of rows and columns?

I know my question is a little vague, so here's my scenario:

- Ive uploaded hundreds of wallpapers to Photobucket.com and got a long list of IMG codes [clickable thumbnails]. But its not arranged.
- I want to arrange them so that I will have 5x3 grid = 3 pictures across, 5 pictures down. That looks like this:

black squares signifies the clickable thumbnails...

- Until now what I do is manually edit the IMG codes in Notepad. Painfully counting IMG codes in threes and hitting Enter.

So I guess the right thing to ask is: Is there any HTML code or program that automatically formats a string of IMG codes into a specified numbers of rows and columns?

Thank you so much in taking time to read my post.
Thank you also in advance for the reply and help.

Jasyyn · Joined: 18 Sep 2007 Posts: 26

The best way to acheive what you want is by using a table, but there's nothing automatic about it. Maybe something like this:

<table cellspacing="3">
<tr>
<td><a href="url"><img src="image1_url" /></a></td>
<td><a href="url"><img src="image2_url" /></a></td>
<td><a href="url"><img src="image3_url" /></a></td>
</tr>
<tr>
<td><a href="url"><img src="image4_url" /></a></td>
<td><a href="url"><img src="image5_url" /></a></td>
<td><a href="url"><img src="image6_url" /></a></td>
</tr>
<tr>
<td><a href="url"><img src="image7_url" /></a></td>
<td><a href="url"><img src="image8_url" /></a></td>
<td><a href="url"><img src="image9_url" /></a></td>
</tr>
<tr>
<td><a href="url"><img src="image10_url" /></a></td>
<td><a href="url"><img src="image11_url" /></a></td>
<td><a href="url"><img src="image12_url" /></a></td>
</tr>
<tr>
<td><a href="url"><img src="image13_url" /></a></td>
<td><a href="url"><img src="image14_url" /></a></td>
<td><a href="url"><img src="image15_url" /></a></td>
</tr>
</table>

shinigami · Joined: 20 Sep 2007 Posts: 2

Thanks for the reply.

mygigahurts · Joined: 24 Oct 2006 Posts: 18

Another tip I'd like to add... the macro is your friend. Using a slightly more advanced Text Editor (search google for Programmer's File Editor... it's free), you can record a series of keystrokes then repeat that series as many times as you'd like with the press of a button. Using the above mentioned application as an example, you can click on the "macro" menu, then select "start recording". Then type the following...

<tr>
<td><a href="url"><img src="image1_url" /></a></td>
<td><a href="url"><img src="image2_url" /></a></td>
<td><a href="url"><img src="image3_url" /></a></td>
</tr>

Click on the "macro" menu again, then select "stop recording". Now all you've got to do is hit F7 to repeat. If you were to keep a text file that contained a vertical list of the image names, you could write the macro around the list of names, like so...

place cursor in front of first image name
start recording
type <tr> then hit enter
type <td><img src="

now hit end on your keyboard to go to the end of the image name

type "></td>

now down arrow and hit the home key to place your cursor in front of the next image name.

repeat the last couple of steps until you've completed one full row, then hit enter and type </tr>

down arrow and hit the home key to place your image in front of the next image name.

Go to the "macro" menu and select "stop recording".

F7 will repeat the above actions. You can also save your macros for later use, so you don't have to set it up again every time.

The "end" and "home" keys are important. Most text editor macro utilities will not record mouse clicks... only keystrokes.

Hope this helps. -MyGigaHurts