Forums / Setup & design / using an image object as <TD> background image???

using an image object as <TD> background image???

Author Message

Yvan Cottyn

Friday 12 September 2003 5:33:44 am

Does anybody know if this is possible?

Paul Borgermans

Friday 12 September 2003 5:41:38 am

Only in the templates. With version 3.2, you can add "class" names to xml tags in xml fields. This could be used to select a template with the override template system which shows you this image in your <td>.

-paul

eZ Publish, eZ Find, Solr expert consulting and training
http://twitter.com/paulborgermans

Yvan Cottyn

Friday 12 September 2003 6:05:37 am

yup, i want to use it in a template. but in 3.1

<td background=?????>

Paul Forsyth

Friday 12 September 2003 6:15:28 am

Is this within an xml data field or *only* within a template?

Paul Borgermans

Friday 12 September 2003 6:46:04 am

You need to now the node id (see admin interface, its in the URL) of this particular image object and then use

something like

{let tdimage=fetch(content, node, hash(node_id,55))}

<td background={$tdimage.data_map.<image attribute name>.content[reference].full_path|ezurl}>

....

{/let}

-paul

eZ Publish, eZ Find, Solr expert consulting and training
http://twitter.com/paulborgermans

Alex Jones

Friday 12 September 2003 6:47:49 am

Yvan, is the image object going to change per template or article, or do you want to use the same image across the site?

If you are using one image, your best bet would be to use CSS to apply the background image by adding a class to the TDs you want to display the background. If you need to change out the image per article or class the code would be something like:
<td style="background-image: url("{$node.data_map.image.content[original].full_path|ezroot}");>

Note, this code will probably need a bit of tweaking to get it to work with your setup.

Alex

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

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

Yvan Cottyn

Friday 12 September 2003 6:52:29 am

in design/user/templates/left_menu.tpl (included from pagelayout.tpl) i have:

<table border="0" cellpadding="3" width="100%"><tr><td>

{* loop children and print name with link *}
{let main_cats=fetch('content', 'list', hash(parent_node_id, 2, class_filter_type, include, class_filter_array, array(1)))}

{section name=Cat loop=$main_cats}
{let latest=fetch('content', 'list', hash(parent_node_id, $Cat:item.node_id, limit, 3, class_filter_type, include, class_filter_array, array(12)))}

<table class="left_menu" width="100%" cellspacing="1">
<tr>
<td class="left_menu_top" align="center">
<a href={concat("/content/view/full/",$Cat:item.node_id,"/")|ezurl} class="left_menu">{$Cat:item.name|wash}</a>
</td>
</tr>
<tr>
<td class="left_menu_bottom" align="left">
{section name=Last loop=$Cat:latest}
<a href={concat("/content/view/full/",$Cat:Last:item.node_id,"/")|ezurl}>{$Cat:Last:item.name|wash}</a> <br>
{/section}
</td>
</tr>
</table>
<br>
{/let}
{/section}

</td></tr></table>

{/let}

So for each folder in the root folder it makes a little table. All the little tables togetger form the menu.
My goal is that one can make an object of the type 'menu background' (that is a copy of the class image that i made) and the the image is used as background for the second table cell. the one's with class=left_menu_bottom.

This way, users using the interface to add stuff to the site (here, a folder in the root folder) can also create an image object to use as background in the menu. they don't have to upload/copy an image to /desing/user/images and edit a template to have the background they want.

Paul Borgermans

Friday 12 September 2003 6:57:52 am

The more general idea put forward by Bard on the conference was to make the entire pagelayout refer to "site design objects" which contain almost everything from style sheets to logo's to menus to ....

Now add the ezpreferences feature (3.2) and you can make your site skinnable by the end-user ... just create a series of objects and add a little preferences menu

-paul

eZ Publish, eZ Find, Solr expert consulting and training
http://twitter.com/paulborgermans

Yvan Cottyn

Friday 12 September 2003 8:05:26 am

ok, i'm there, thanks for the quick responses!

{let
main_cats=fetch('content', 'list', hash(parent_node_id, 2, class_filter_type, include, class_filter_array, array(1)))
}
{section name=Cat loop=$main_cats}
{let
latest=fetch('content', 'list', hash(parent_node_id, $Cat:item.node_id, limit, 3, class_filter_type, include, class_filter_array, array(12)))
backgrounds=fetch('content', 'list', hash(parent_node_id, $Cat:item.node_id, limit, 1, class_filter_type, include, class_filter_array, array(14)))
}
<table class="left_menu" width="100%" cellspacing="1">
<tr>
<td class="left_menu_top" align="center">
<a href={concat("/content/view/full/",$Cat:item.node_id,"/")|ezurl} class="left_menu">{$Cat:item.name|wash}</a>
</td>
</tr>
<tr>
<td class="left_menu_bottom" align="left" background={$Cat:backgrounds[0].data_map.image.content[original].full_path|ezroot}">
{section name=Last loop=$Cat:latest}
<a href={concat("/content/view/full/",$Cat:Last:item.node_id,"/")|ezurl}>{$Cat:Last:item.name|wash}</a> <br>
{/section}
</td>
</tr>
</table>
{/let}
<br>
{/section}

{/let}