Problem with Images loading on new site

[EasySweets]

Please help,

Our site is a sweet shop and we have tried to display images of rows of jars in our different sections to create the authentic look.

However, when our sections load the table which has the images in, loads in a very strange way. Stretching and jumping about before finally ending up in the correct place.

Please take a look at
www.easysweets.co.uk

What can we do to make this load smoothly???

Loads of our problems have been solved thanks to the posts on actinic community but this one has us stumped.
Thanks in advance,
Claire

[leehack]

This is often due to a lack of sizes being specified, so the page has to be built and then formed correctly. When sizes are included, the browser has no guessing and puts the right thing in the right place at the right size from the start.

[los_design]

This is often due to a lack of sizes being specified, so the page has to be built and then formed correctly. When sizes are included, the browser has no guessing and puts the right thing in the right place at the right size from the start.

Bang on

There are three simple rules when displaying tabular data

1 Declare
2 Declare
3 Declare

By inserting your wXh you will eradicate this issue as Leeski states

[EasySweets]

Hi, Thanks for your answers.

The problem we have is that the pictures are different sizes in the different sections but the table is the same one (Image above section link)

ie. Traditional Sweets are 150h*75w with 6 colomns
http://www.easysweets.co.uk/acatalog/Traditional.html

Retro Sweets are 100h*100w with 4 colomns
http://www.easysweets.co.uk/acatalog/Retro_Sweets.html

How can i get Actinic to identify which size table it should be using for the individual pages?

Cheers,
Claire

[TraceyHand]

I guess the best way would be to use slightly modified layouts depending on your section images.
It doesn't take too much effort to copy a layout, modify the dimensions and name it appropriately so you can apply it to the correct section.

[leehack]

Well first of all, i'm a great fan on identical image sizes across a site for exactly the reason you will now have problems. If that is not feasible, then you are looking to have different layouts for different sections. So you could have one for toffees and one for boiled sweets etc.

Problem with this is if you want to change things at a later date, you often have to do it on a number of layouts instead of one standard one.

You can also do this via custom variables on sections which will dictate the widths, but once again a bit too complicated to start with if you are pretty new to actinic.

You can also convert to CSS layouts and float the images, but that's even more in depth.

Do yourself a favour, take the time to standardise your image sizes, i have managed to do this on a site with over 5,000 products with incredibly different sized products - so you should be able to easily. Keep it simple is my best advice.

[los_design]

One easy method to do this (standardised image layout) is to select your largest image and create a canvas around it.

Then apply all other images to this canvas. This will still show different product sizes BUT for layout purposes they will all be identical.

ie Image size now 102x75 & 98 x 50 giving different displays
New canvas of 105 x 105 paste piccies onto this, layout will be the same.

You can add a bg to the canvas, logo, etc...

HTH

[leehack]

Yep that's a very good point to make DJ. With funny or strange shaped items, the shape of the item is immaterial, just make the canvas(background) to be the set size. This is especially easy if you have white backgrounds as you are simple adding white areas to the photo to make it reach the desired size.

[EasySweets]

Thanks everyone, all very helpful stuff

I've now had a play around with all those ideas and it turns out the problem wasn't caused by the table width but by the width of the image not being declared.

The simple addition of width="SectionImageWidth" seems to of fixed it.

I will def try and do all my pictures the same size in future though

Thanks,
Claire

http://www.easysweets.co.uk/acatalog/Liquorice.html

[leehack]

That can't have fixed it, must have been something else.

[EasySweets]

Whatever it was, the jumping has now gone.
Thanks again for your help,

Claire
www.easysweets.co.uk

[PeterThake]

PIXresizer

Claire,

A fantastic little application called PIXresizer will batch process and resize your images for you. I use it all the time and it saves a LOT of work. Using this I create one standard-sized large image and then resize them down to the standard sizes that I use for the main image, thumnail and big pop-up image. It will bulk resize all the images in a folder and place them in a new folder, change format etc.

It was shareware. It only cost a few quid to register but was really worth it.