Textpattern CMS

#1 2009-02-06 20:10:34

midmood

Member

From: Rome, Italy

Registered: 2007-07-20

Posts: 68

Website

associate an image to an item in section_list

the example is here: http://www.artre.coop

In the TOP RIGHT list of section of the page: I’d like to associate a little icon to every item.

This is my actual code… I don’t know where to inject the code for image, and what.

<txp:section_list break="li" wraptag="ul" default_title="Home" sections="contatti,gallery,lavora-con-noi,news,sala-stampa" include_default="1" />

I have .png images whose name reflects the name of the section.

Can anyone help me?

Have a nice evening anyway
Simone (Italy)

Last edited by midmood (2009-02-06 20:12:29)

#2 2009-02-06 20:57:48

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: associate an image to an item in section_list

Hi Simone, there are two ways you can do it. Like this:

<txp:section_list break="" wraptag="ul" default_title="Home" sections="contatti,gallery,lavora-con-noi,news,sala-stampa" include_default="1">
	<li><img src="/images/<txp:section />.png" /><txp:section title="1" link="1" /></li>
</txp:section_list>

or by setting the image as background-image in the CSS and add a class per section, something like this:

<txp:section_list break="" wraptag="ul" default_title="Home" sections="contatti,gallery,lavora-con-noi,news,sala-stampa" include_default="1">
	<li class="img-<txp:section />"><txp:section title="1" link="1" /></li>
</txp:section_list>

Then you can style li.img-contatti, li.img-gallery, etcetera.

#3 2009-02-06 21:23:34

midmood

Member

From: Rome, Italy

Registered: 2007-07-20

Posts: 68

Website

Re: associate an image to an item in section_list

hmmm….

firstly: thank you for your alwais prompt suggestions :-)

i tried the first method and the resul is as http://www.artre.coop
Do you have any idea?

this is the code:
bc. <div id=“altodx”><txp:section_list break=”“ wraptag=“ul” default_title=“Home” sections=“contatti,gallery,lavora-con-noi,news,sala-stampa” include_default=“1”><li><img src=”/images/<txp:section />.png” /><txp:section title=“1” link=“1” /></li></txp:section_list></div>

and this is the corresponding style:

div#altodx {
	/*  */
	text-align:right;
	padding-right:10px;
	margin-top:76px;
	}

div#altodx li {
	/*  */
	display:inline;
	}

div#altodx img {
	/*  */
	display:inline;
	}

Last edited by midmood (2009-02-06 21:24:58)

#4 2009-02-07 00:35:55

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: associate an image to an item in section_list

midmood wrote:

i tried the first method and the resul is as http://www.artre.coop
Do you have any idea?

What is wrong? Looks good to me :)

#5 2009-02-07 06:40:01

midmood

Member

From: Rome, Italy

Registered: 2007-07-20

Posts: 68

Website

Re: associate an image to an item in section_list

the second method worked perfectly, thanks! :-)