Images on Category Pages

[naturalnursery]

Is there a way to get the info on the category page (image, tile, price, short description) to all line up from the top down?

Most of our images are the right size and we are working on changing the short description text but we can't always get our titles onto a single line.

This means that some of the info doesn't line up and I like things to be neat!

So, can I force it to put the info at the top? On some products there will be white space at the bottom, but I think that will look better.

Thanks

Axx

[chubster]

Cool.....another neat freak

I assume you mean like this page

This is something I am working on at the mo, the only way I am able to do it currently is create a blank canvas in something like photoshop with dimensions say 150 x 150 then paste the offending pic on that. Save then re import.

Bit off a faff...I am going to ask my developer if he can create some sort of container for images to sit in which will then keep everything lined up. Will let you know what he says.

And if anyone else on here has any suggestions please shout.....my hands sweat every time I see a out of line image

[Red Devil]

I was just about to quote your thread Chubster and point out it was something similar.

I think you need to creata a set of HTML tables and place the elements in those tables.

I think you would do this in the Template Editor / Custom HTML / Product List (multi column) ?????????? (Don't quote me on that !!!)

I would have to experiment when I get more time.

[naturalnursery]

Yup, just like that. I was hoping that there was a way of doing it with a bit of code. We have done it on the product pages (well Rich did for me) by putting an extra line to to say valign top as it were.

Just no idea where to even start poking with the category page.

Axx

[chubster]

Hiya....

Assuming you have no custom html already try adding this bit of code to Template Editor > Custom HTML > Product List (multi-column) and see what that does for you. Its working for me but you have more text on yours.

You can have a play with the "height" values to see which works best for you

<div align="center" style="width: 100%">
<table>
<tr height="170px"><td valign="middle">
[IF product_image]<p><a href="%product_link">%product_image</a></p>[/IF]
</td></tr>
<tr height="80px"><td style="vertical-align: top; text-align: center;">
<p>
<a href="%product_link"><b>%product_title</b></a>
[IF product_price]<span class="gap">%product_price</span>[/IF]
</p>
</td></tr>
<tr height="40px"><td style="vertical-align: top; text-align: center;">
[IF product_add]<span class="gap_button">%product_add</span>[/IF]
[IF product_description]%product_description[/IF]
[IF product_compare]<p>%product_compare</p>[/IF]
</td></tr>
</table>
</div>

[Red Devil]

Chubster - you just need to centre your images and all will look fine.

http://bp49.betapark.co.uk/leather-dog-collars.html?template=petshop2u_v1-grey

[chubster]

Chubster - you just need to centre your images and all will look fine.

http://bp49.betapark.co.uk/leather-d...shop2u_v1-grey

Yep I spotted those....again left over from the old (current) site. Some seem to be centred and others dont, mainly the leads and collars. How would I get round that ?

[chubster]

Ok....updated code which should centre images too....

<div align="center" style="width: 100%">
<table>
<tr height="170px"><td valign="middle">
[IF product_image]<center><p><a href="%product_link">%product_image</a></p></center>[/IF]
</td></tr>
<tr height="80px"><td style="vertical-align: top; text-align: center;">
<p>
<a href="%product_link"><b>%product_title</b></a>
[IF product_price]<span class="gap">%product_price</span>[/IF]
</p>
</td></tr>
<tr height="40px"><td style="vertical-align: top; text-align: center;">
[IF product_add]<span class="gap_button">%product_add</span>[/IF]
[IF product_description]%product_description[/IF]
[IF product_compare]<p>%product_compare</p>[/IF]
</td></tr>
</table>
</div>

[naturalnursery]

Didn't work for me - all it did was to take the images and short descriptions out.

Going to have a play next week when I am in the office and no children around - this is a really good start for me and now I know where to put the code!

Thanks for your help.

Axx