Associating an image with a "node"

Sunday 14 November 2004 6:58:14 pm - 3 replies

Modified on Sunday 14 November 2004 8:42:27 pm by Brad Wright

3 replies

Author	Message
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>

Author

Message

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'.
Generate ID for body tag

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

DIV

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

CSS

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 ]

When in doubt, clear the cache.

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 ]

When in doubt, clear the cache.

You must be logged in to post messages in this topic!