Forums / Setup & design / Associating an image with a "node"

Associating an image with a "node"

« 
Previous topic
|
Setup & design
|
Next topic
 »
Author Message

Brad Wright

Sunday 14 November 2004 6:58:14 pm

Hi.

This is my first post here, and I'm also fairly new to EZ Publish to please bear with me.

What I've got is a site with a front-page layout. This layout is shared by the 4 major nodes (Corporate Profile, Products & Services, Customer Care, and User Support), but there's a piece of stock photography (and also a <body>> class) which is different for each node (so we can separately brand each one).

What I'd like to know is:
What's the best way to handle this? With override templates? Ideally I'd like to be able to use the same template, and just swap the class/photo with some kind of logic. (so use an if statement or a switch inside the template)

Also, is there any way of associating nodes/objects with pages NOT using a numeric id? This site has to be transported to a full production server and I'd rather not have to re-create all the nodes and then rewrite all my overrides.

<b>Edit</b>
It seems that the section ID is blank on refresh so the following code:

<div id="stockphoto">{switch match=$node.object.section_id}
{case match=6}<img src={"corporate_profile.jpg"|ezimage} width="562" height="200" border="0" alt="corporate profile" />{/case}
{case match=7}<img src={"products_services.jpg"|ezimage} width="562" height="200" border="0" alt="products and services" />{/case}
{case match=8}<img src={"customer_care.jpg"|ezimage} width="562" height="200" border="0" alt="customer care" />{/case}
{case match=9}<img src={"user_support.jpg"|ezimage} width="562" height="200" border="0" alt="user support" />{/case}
{case}<img src={"frontpage.jpg"|ezimage} width="562" height="200" border="0" alt="" />{/case}
{/switch}</div>

Returns the default case on refresh, when it returned one of the matches on the first run. This seems like strange behaviour. Debugging reveals:

$node.object.section_id

to be blank on the refresh, so it doesn't match any of the cases.

Alex Jones

Tuesday 16 November 2004 7:06:32 am

Welcome to eZ publish Brad!

I think there could be an easier way to solve this issue. You could assign an ID to the body tag that is the name of the section. Then, instead of using an image tag, set up a div that matches your dimensions (562 x 200 pixels), and assign the background image for that section. This may be a bit confusing, so I'll try to provide some code, but please note, this is untested, so you may need to tweak it.

This example assumes three sections, named 'Products', 'Contacts' and 'Gallery'.
<b>Generate ID for body tag</b>

{let thesection=fetch( 'section', 'object', hash( 'section_id', 1 ) )}
    <body id="{$thesection.name}">
{/let}

<b>DIV</b>

<div id="SectionImage"></div>

<b>CSS</b>

body#Contacts div#SectionImage, body#Gallery div#SectionImage, body#Products div#SectionImage {
    display: block;
    height: 200px;
    width: 562px;
}

body#Contacts div#SectionImage {
    background-image: contacts.jpg;
}

body#Gallery div#SectionImage {
    background-image: gallery.jpg;
}

body#Products div#SectionImage {
    background-image: products.jpg;
}

Does this help?

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Brad Wright

Tuesday 16 November 2004 2:45:07 pm

Thanks Alex, it did help, but not in the way you originally intended.

I wound up with the following:

{let thesection=fetch( 'section', 'object', hash( 'section_id', $DesignKeys:used.section ) ) }
<div id="stockphoto">{switch match=$thesection.name|downcase}
{case match="corporate profile"}<img src={"corporate_profile.jpg"|ezimage} width="548" height="200" border="0" alt="" />{/case}
{case match="products & services"}<img src={"products_services.jpg"|ezimage} width="548" height="200" border="0" alt="" />{/case}
{case match="customer care"}<img src={"customer_care.jpg"|ezimage} width="548" height="200" border="0" alt="" />{/case}
{case match="user support"}<img src={"frontpage.jpg"|ezimage} width="548" height="200" border="0" alt="" />{/case}
{case}<img src={"frontpage.jpg"|ezimage} width="548" height="200" border="0" alt="" />{/case}
{/switch}</div>
{/let}

The reason I did this was that I couldn't entirely justify putting this image into the stylesheet. It's one of those borderline pieces of content which could go either way (CSS or XHTML), but in the end I thought it was better in the XHTML. It's part of their branding so should be available regardless of CSS support.

I used:

downcase

to ensure that no matter how they capitalised the section names, the end result would be the same.

Thanks again for your help!

Alex Jones

Wednesday 17 November 2004 6:29:08 am

Ahhh, your logic makes perfect sense! :) Glad that my reply was able to help.

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>