Metropoulos Forum

Posted: **Sun Jan 01, 2006 11:40 pm**

I've been poking around with the '68 store listing. I figured out how to upload my images and make them show up by copying the code from the '66 listing. But they don't center on the page right. I'm sure there is a simple code for this. Any takers?

Here's the code for the images:

<p align="center"><b>More Images</b><br>Click an image to enlarge<br>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/main%20board.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/main%20board.jpg" border="0" alt="" width="200" height="200"></a></p>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%202.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%202.jpg" border="0" alt="" width="200" height="200"></a></p>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg" border="0" alt="" width="200" height="200"></a></p>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg" border="0" alt="" width="200" height="200"></a></p>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg" border="0" alt="" width="200" height="200"></a></p>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg" border="0" alt="" width="200" height="200"></a></p>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg" border="0" alt="" width="200" height="160"></a></p>

George

Posted: **Mon Jan 02, 2006 1:16 am**

george try this:

<p align="center"><b>More Images</b>
<br>Click an image to enlarge<br>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/main%20board.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/main%20board.jpg" border="0" alt="" width="200" height="200"></a></p>

<p align="center"><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%202.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%202.jpg" border="0" alt="" width="200" height="200"></a></p>

<p align="center"><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg" border="0" alt="" width="200" height="200"></a></p>

<p align="center"><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg" border="0" alt="" width="200" height="200"></a></p>

<p align="center"><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg" border="0" alt="" width="200" height="200"></a></p>

<p align="center"><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg" border="0" alt="" width="200" height="200"></a></p>

<p align="center"><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg" border="0" alt="" width="200" height="160"></a></p>

or real simple would be = <center> text, imagine</center>

Posted: **Mon Jan 02, 2006 10:21 am**

Actually, though <center></center> still works, it's deprecated in HTML 4.0. A better approach would be to get rid of the <p align="center"> and center via a <div> tag like what I did below:

Code: Select all

<div align="center">
<b>More Images</b><br>Click an image to enlarge<br>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/main%20board.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/main%20board.jpg" border="0" alt="" width="200" height="200"></a><br><br>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%202.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%202.jpg" border="0" alt="" width="200" height="200"></a><br><br>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg" border="0" alt="" width="200" height="200"></a><br><br>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg" border="0" alt="" width="200" height="200"></a><br><br>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg" border="0" alt="" width="200" height="200"></a><br><br>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg" border="0" alt="" width="200" height="200"></a><br><br>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg" border="0" alt="" width="200" height="160"></a><br><br>
</div>

George, the reason your code wasn't working is that you only centered the first paragraph...it goes back to the left-aligned default as soon as you close it with the </p>. The other thing is that each image had a closing </p> tag and no opening one. So, you either have to add the <p> at the beginning of each image or do what I did and add a couple of break tags <br) at the end of each image. This makes more sense semantically-speaking as you want to use tags the way they're meant to be used...ie, in this instance, line breaks, not paragraph breaks.

Pete

Posted: **Mon Jan 02, 2006 11:10 am**

that will work too

Posted: **Mon Jan 02, 2006 12:25 pm**

Thanks! That did center each image.

But I guess what I wanted was like this listing:

http://www.metroamp.com/store/product_i ... cts_id=364

which I copied the code from and changed the image names.

I can see that I need to learn some basic code. It's rediculous that I can't handle images like this.

Thanks for the help.

George

Posted: **Mon Jan 02, 2006 12:52 pm**

VelvetGeorge wrote:Thanks! That did center each image.

But I guess what I wanted was like this listing:

http://www.metroamp.com/store/product_i ... cts_id=364

which I copied the code from and changed the image names.

I can see that I need to learn some basic code. It's rediculous that I can't handle images like this.

Thanks for the help.

George

one more try

<p align="center"><b>More Images</b><br>Click an image to enlarge</p>

<div align="center">
<table width="200" border="0">
<tr>
<td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/main%20board.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/main%20board.jpg" border="0" alt="" width="200" height="200" /></a></td>
<td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%202.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%202.jpg" border="0" alt="" width="200" height="200" /></a></td>
<td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg" border="0" alt="" width="200" height="200" /></a></td>
<td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg" border="0" alt="" width="200" height="200" /></a></td>
</tr>
</table>
</div>

<div align="center">
<table width="200" border="0">
<tr>
<td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg" border="0" alt="" width="200" height="200" /></a></td>
<td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg" border="0" alt="" width="200" height="200" /></a></td>
<td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg" border="0" alt="" width="200" height="160" /></a></td>
</tr>
</table>
</div>

done here with tables - also george i would recomend making all your images the same size i mean you can resize them later with HTML but quality can suffer. as well any file name on a server should have no spaces ( filename_23_amp.jpg)
lets see if this is more of what yer trying to do

do you use an HTML editor like dreamweaver or?

Posted: **Mon Jan 02, 2006 1:23 pm**

without tables

<div align="center"><b>More Images</b><br />
Click an image to enlarge
</div>

<p align="center"><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/main%20board.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/main%20board.jpg" border="0" alt="" width="200" height="200" /></a>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%202.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%202.jpg" border="0" alt="" width="200" height="200" /></a>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg" border="0" alt="" width="200" height="200" /></a>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg" border="0" alt="" width="200" height="200" /></a></p>

<p align="center"><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg" border="0" alt="" width="200" height="200" /></a>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg" border="0" alt="" width="200" height="200" /></a>
<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg" border="0" alt="" width="200" height="200" /></a></p>

Posted: **Mon Jan 02, 2006 1:50 pm**

Basically, you could take the code I posted and remove the break tags <br><br> after each image and they'll center side by side like that, though with so many images, they'll wrap differently as a person resizes their browser or depending on their viewing resolution. That's more or less how they do it in the original code....there are some things in it that don't comply with web standards there such as nesting paragraph tags (i.e. <p><p></p></p>...bad coding.

Mark's idea of using a table is a better way of doing it...subtle use of cellspacing or cellpadding to give each image some whitespace would make it look a bit better though. I've quickly rebuilt it for you. If you look at the code you can see some stuff after and before the table...that's just to give easy reference as to where to cut and paste the code.

Code: Select all

<p>  UPDATE  I am out of aluminum chassis and will be making replicas of my '66 blockend this year.  These amps will be available at that time.</p>


<div align="center">
<b>More Images</b><br>Click an image to enlarge<br>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/main%20board.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/main%20board.jpg" border="0" alt="" width="200" height="200"></a></td>
	
    <td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%202.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%202.jpg" border="0" alt="" width="200" height="200"></a></td>
	
    <td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg" border="0" alt="" width="200" height="200"></a></td>
	
    <td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg" border="0" alt="" width="200" height="200"></a></td>
  </tr>
  <tr>
    <td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg" border="0" alt="" width="200" height="200"></a></td>
	
    <td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg" border="0" alt="" width="200" height="200"></a></td>
	
    <td><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg" border="0" alt="" width="200" height="160"></a></td>
    <td>&nbsp;</td>
  </tr>
</table>
</div></td>
      </tr>

      <tr>
        <td align="center" class="smallText"><br>This product was added to our catalog on Wednesday 02 November, 2005.</td>

Being consistent with image size is also a very good idea. I have a freelance client that makes hand-painted Italian dinnerware and every quarter I have to take her latest product shots which are anywhere from 50-100, make the clipping paths for them (dropping out the backgrounds so they're on white), re-touch, color-correct, crop them to square canvases, etc....finally outputting two separate sizes...large and thumbnails. Keeping everything the same size makes for a cleaner viewing experience.

Pete

Posted: **Mon Jan 02, 2006 1:51 pm**

Interesting:

http://www.metroamp.com/store/product_i ... cts_id=375

George

Posted: **Mon Jan 02, 2006 2:17 pm**

Interesting "good" or interesting "bad"...hehe.

Posted: **Mon Jan 02, 2006 2:23 pm**

VelvetGeorge wrote:Interesting:

http://www.metroamp.com/store/product_i ... cts_id=375

George

it works if you like it

works for me!

Posted: **Mon Jan 02, 2006 2:38 pm**

Interesting as in, I'm looking at your coding and starting to see what the commands do.

I see that you are exactly right about the image size. They are all close, but I need to be more dilligent about making them the same.

Thanks a million!

george

Posted: **Mon Jan 02, 2006 2:47 pm**

I tried adding a border to each image to put space between them, but I don't care for it.

How can I seperate them?

George

Posted: **Mon Jan 02, 2006 2:49 pm**

VelvetGeorge wrote:I tried adding a border to each image to put space between them, but I don't care for it.

How can I seperate them?

George

seperate them which way? top row and bottom row u mean?

<div align="center"><b>More Images</b><br />
Click an image to enlarge
</div>

<p align="center"><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/main%20board.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/main%20board.jpg" border="0" alt="" width="200" height="200" /></a>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%202.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%202.jpg" border="0" alt="" width="200" height="200" /></a>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/power%20supply.jpg" border="0" alt="" width="200" height="200" /></a>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/rear%20fuses.jpg" border="0" alt="" width="200" height="200" /></a></p>

<p align="center"><a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/500V%20400V.jpg" border="0" alt="" width="200" height="200" /></a>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/flat%20lip.jpg" border="0" alt="" width="200" height="200" /></a>

<a href="javascript:popupWindow('http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg')"><img src="http://www.metroamp.com/store/images/68 plexi/plexi%20foot.jpg" border="0" alt="" width="200" height="200" /></a></p>

Posted: **Mon Jan 02, 2006 2:53 pm**

When you click on the images on your page there's not a huge difference between the thuimbs/large ones so it kind of defeats the purpose so I'd say definitely set up a default size for your thumbnail shots on the page and the larger images and stick with it. If OSCommerce dynamically resizes your images, you could follow their sizing scheme. Just right-click on the images, select properties and get the dimensions. Otherwise, just look at other store-type sites and see how they did it....the freelance i mentioned earlier has their thumbs at 100 x 100 and large at 225 x 225 but it varies from site to site.

Tip: Setting up some image sizing actions in photoshop (if you use that for image editing) for each size can be handy.

VelvetGeorge wrote:I tried adding a border to each image to put space between them, but I don't care for it. How can I seperate them?

Reset the image border attribute to "0". Now, add numbers to either the table's cellspacing or cellpadding attributes. A good way to see what's going on when designing with tables is to turn the table's border to "1" first. Now put different values into cellspacing, leaving cellpadding at 0. Refresh the web page and pay attention what's changing as you increase or decrease values. Do the same thing in reverse, cellspacing at 0 and cellpadding set to different values. Now turn off the table border and try again playing with the values....I tend to use one or the other but you can combine them....nowadys tables are starting to be on their way out except for tabular data which is what it's meant for. The push is to do all page styling using css...the technology isn't quite there yet so you'd be able to set all your padding, margins, etc in another doc. In anycase, adjusting either of those two attributes will give you spacing.

You might also want to change the <td> tag to <td align="center">, that will center your images in each cell. You can see what I mean if you leave the table border to "1".

Pete

Metropoulos Forum

Can I get a few HTML tips?

Can I get a few HTML tips?