Editing and Applying Act_ProductBody

[olivercoquelin]

I need to add an image on the right hand side of this page:

http://www.greeneyegear.com/acatalog/men.html

I also need to add a different image to the women's range in the same layout. What I think I need to do is open Act_ProductBody, resave it as Act_ProductBody_Men, add a column to the right and insert the image.

If this is correct, I'm not sure how I would then apply the new template to the relevant section. Can anyone help?

[jont]

Hi Oliver,

the Act_ProductBody is not the way forward IMHO. I would approach this via the Act_Primary.html ... create a new CUSTOMVAR in the template and then simply specify the image to be used in each sections "properties" tab.

If you have other sections that do not require an image simply place a transparent gif as the file under Design | Options | Site Defaults so it displays as the default but will be over ridden in the cascade at the section level for the men and women.

HTH

[jont]

You can also use Javascript to ignore the command if there is a null image specified and insert if available - there was some code posted by Norman (about 18 months back) outlining how to do this.

If you go the Javascript root then you can probably add into the Act_ProductBody.html more safely

[olivercoquelin]

Hi Jonty

I couldn't find the JavaScript that you mentioned but I have used your other suggestions. For the most part it works. However it does cause a problem for the width of the Tables that need the picture added:

http://www.greeneyegear.com/acatalog/men.html

I thought that I could get around this by creating a two column table adding the new CUSTOMVAR to the right hand column cell and setting that cell width to 1px. then I inserted another Table into the left cell, inserted all the necessary NETQUOTVARS and set the table width to 100%. The 1px idea works I.e. it doesn't mess up the top level catalog page any more:

http://www.greeneyegear.com/acatalog/collection.html

However the 100% width trick doesn't solve the outside table width problem.

Any suggestions greatly appreciated.

[jont]

Hi Oliver,

for the Javascript you can use something like:

<script language=JavaScript>
<!--
if ( 'CUSTOMVAR:SECTION_IMAGE' ) document.write('<img src="CUSTOMVAR:SECTION_IMAGE" alt="NETQUOTEVAR:PAGEHEADER">');
//-->
</script>

As for the existing method you will need to accommodate the width of the image area into the overall design width by adjusting the size the existing tables / cells accordingly.

As for the homepage don't forget you can specify different templates to each section (page)

HTH

[olivercoquelin]

Do you mean that I could create and edit a second Act_Primary page and asign it to the Men and Womens sections?

Would this be done via Section Details - Layout -Overall Layout?

[jont]

Yes.

If you only have a few templates to maintain this is fine - it can become a chore if you need to change say 40 Act_Primary templates to make a consistent update - hence the use of Javascript / CMV's to automate this

[olivercoquelin]

I made a simple adjustment to the new Act_Primary_2 template (set the two cells to the appropriate sizes) and this happened:

http://www.greeneyegear.com/acatalog/men.html

CAn you see what I've done wong?


As tfor the JavaScript; would I customise the code like this?

<script language=JavaScript>
<!--
if ( 'CUSTOMVAR:MENCLOTHING' ) document.write('<img src="CUSTOMVAR:MENCLOTHING" alt="NETQUOTEVAR:MENCLOTHING">');
//-->
</script>

[jont]

NETQUOTEVAR:MENSIMAGE is not an Actinic function so need to use a CUSTOMVAR ... the example in my snippet was for including an image at the top of each page (section) and for SEO reasons added the page name as the ALT tag.

You will natuarally need to declare the value of MENSIMAGE in the custom properties and against the section eg: menspicture.jpg

Not had chance to look at the changed site yet

[jont]

CAn you see what I've done wong?

Aside from the additional comment tags that are being generated this is probably working correctly - although looking like a pig. You are wanting the product body to span the 100% but the image in the Act_Primary is taking position in the flow also.

You can easily overcome this using CSS ... positioning an element (absolutely) will remove it from the flow and allow the horizontal lines to assume the full width of the page

[olivercoquelin]

This sounds like a good plan. Forgive me for sounding like an idiot but how would I do this?

I have added CSS attributes before but I wouldn't know to implement this positioning technique that you suggest.

[Bruce]

Jont,

I am going to leave this to you, CSS is your pet project.

Regards,

[olivercoquelin]

I worked out how to do CSS absolute positioning and the was perfect on my PC viewing with IE. However the position of the images were completely different when viewed on a MAC.

I have since achieved a satisfactory result using alignment in the customvar images. If there is a simple answer to the CSS positioning problem I experienced, I would still be interested to know for future reference.

Would relative positioning using the logo in the top left corner yield better results?

[jont]

Jont, I am going to leave this to you, CSS is your pet project.

Sorry guys - missed the updated thread.

Oliver - relative positioning with CSS is often best combined with an absolutely positioned container defined with no offsets - this will set the relative positioning to the absolutely positioned element.

Positioning can appear different across browsers again due to the box model with margins, borders and padding etc. Zeroing these (or setting explicit values) should resolve this - don't forget you are often positioning to either the <html> or the <body> elements so these may also need being taken care off