Imagefield: How to attach a css-class to images?

[totoff]

Hi all,

I need to loop over several images with an ordinary foreach - nothing fancy. However, each image needs to have a unique css class name attached. Here is a simplified example:

<ul>
	<li><img class='mac' src='#'</li>
	<li><img class='ipad' src='#'</li>
	<li><img class='ipod' src='#'</li>
</ul>

and so on.

My array of images will be a collection from several pages. So the information about the required class needs to be "attached" to the image somehow. Sure I could use the description field for that, but that's kind of a hack I would like to avoid for the sake of unexperienced editors.

My PW skills got a bit rusty the last time. Maybe an easy way to achieve that as been already introduced into the core and I missed it. Apologies in advance if this is a silly question than ...

Ideas welcome! Thanks.

[adrian]

Maybe this module with a custom "class" field added to each image?

http://www.kf-interactive.com/blog/adding-custom-fields-for-images-in-processwire/

[totoff]

Hi adrian,

thanks for pointing me to that module. I'll give it a try. Sounds promising.

[titanium]

Hi all,

I need to loop over several images with an ordinary foreach - nothing fancy. However, each image needs to have a unique css class name attached.

The css class name needs to be unique? And you want to enter it in the backend by yourself somehow? I think this does not scale, because sooner or later you will use the same css class name twice. If it should be truly unique, I suggest a combination of $page->id and $image->name ($page which contains $image). May I ask why it has to be unique?

[totoff]

hi titanium,

thanks for pointing this out. Unfortunately I didn't say precisely what is required: the css class does not need to be unique in the sense of an id. Instead a "dedicated" class in the sense of "this images requires this class and no other" is required. I think the module will do the job.