Gif image under product title

[mythandmagic]

Hi Guys...

Need a bit of help....

I have 1 product per page site.

I want a small gif image under the product title, before the description.

!!<<img src="in_stock.jpg">>!!
or
!!<<img src="in_stock.gif">>!!

This does not seem to work, its showing as there should be an image on preview, but not the actual image, its in the site folder. I have the image in both .gif and .jpg but neither seem to work.


Any ideas ?

[leehack]

Where is the image located and have you included it in additional files?

Hmm if you are coding in the product window, i don't think you need the actinic html includes, just write in normal code.

[jont]

Place a copy in PreviewHTML subfolder and also to the additional files as Lee points out.

You should also be using:

!!<<img src="image.jpg" alt="my new picture" />>!!

If it is a fixed size image adding the width= and height= attributes would be preferable (although not always essential)

[leehack]

If it is a fixed size image adding the width= and height= attributes would be preferable (although not always essential)

I always find this point interesting, if you are coding manually, you can sometimes forget to do this, whereas if you D+D like in dreamweaver it does this for you and puts the sizes in for you. I have always presumed the size attributes help the browser to render the page a little quicker, i may be wrong. What i find annoying is that if after you are bringing a page together and you realise the image is too large or small and change it, if you overwrite the original files, the sizes do not change within your code.

If you had an image intensive page and you wanted to change the size of the images, you would also need to recode all sizes in the code or delete everything and then reinclude them.

I always have the sizes attached and just change manually if needed. I presume the browser uses these attributes to help rendering, what happens if you don't include them, i have never not seen it render ok, just wondered if you know what the effect on the browser is, when these are included and not.

[jont]

As with a lot of things there is a best practice and the real world. Best practice uses width and height as the browser reads these in the tags and generates the space required, if missing it reads the image which takes fractionally longer.

Some of the online compliance tests will also check for these attributes (see concurrent thread) and can output hundreds of "errors"... these are not actual errors but again a list of what "should" be done according to the master list. The stricter page codings are more demanding so dropping small items can result in non compliance.

The real world is a different place and images without dimension attributes will render fine in just about every browser that is in use (not sure of any that would not display) and the speed of internet connections would not allow any measurable differences.

What is more important if the "alt" text which does form part of Google's love of pages.

Thankfully the product images via Actinic add the height and width dynamically as read from the image source.

[leehack]

Cheers for clearing that up Jont, thats pretty much as i expected it.

Another reason why drag and dropping is good, apart from it's easy to use, the ideal codes are automatically included.

[mythandmagic]

Sorted it.....

It was as leehack said - had not added it to additional files, working fine now!

Leehack, great speedy advice - thanks bud!

I did need the !!<<

didnt work with the closed end (/>>!!)
so just used the >>!! and it works fine

otherwise it just showed what i wrote.

Thanks

[jont]

The trailing slash / is again one of those best practices ... most tags have an opening <p> and a closing </p> some such as images <img> and breaks <br> do not use these. Some older browsers can get confused hence the practice (which has filtered into v8 at last). There needs to be a space between the content and the slash eg: <br />

If it is the Boss Lighting site you have added to there is no "alt" tag in there .. use something like alt="in stock" etc if users have images switched off or are using a screen reader.

[mythandmagic]

Good thinking Jont!

I'll get that sorted.