Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

All other Modules /

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Radiobuttons with images instead of Text (OptionsetField)


Reply


4 Posts   1603 Views

Avatar
Andre

Community Member, 126 Posts

2 September 2009 at 7:46pm

Hi, I'm planning to build an eCard Module. Therefore I need a Form with Radiobuttons in the Frontend like it's used in the Poll Tutorial (Tut 3). But instead of simple Text next to the single Radiobuttons I want a small preview of the Cards to select one. How is it possible to fill an OptionsetField with more than just Text? Is it possible to fill the Array with ImageObjects?

Avatar
Andre

Community Member, 126 Posts

3 September 2009 at 7:11pm

Is this impossible with the given Objects or does noone have an Idea?

Avatar
Funfair77

Community Member, 49 Posts

16 April 2010 at 9:33pm

Is your problem solved? Did you make the eCard Module?
I'm looking for an e-card module for SS.

Avatar
swaiba

Forum Moderator, 1805 Posts

22 April 2011 at 4:15am

Well... I have just made a really nice HACK for this, but I also have an idea how to make this nicely...

sapphire\forms\OptionsetField.php

function Field() {
...
if ($this->name == 'NAMEOFFORMFIELD') {
$options .= "<li class=\"".$extraClass."\">"
."<input id=\"$itemID\" name=\"$this->name\" type=\"radio\" value=\"$key\"$checked $disabled class=\"radio\" />"

//image added here...
."<img src=\"cms/images/check.png\" />"

."<label for=\"$itemID\">$value"
."</label>"
."</li>\n";
}
else {
$options .= "<li class=\"".$extraClass."\"><input id=\"$itemID\" name=\"$this->name\" type=\"radio\" value=\"$key\"$checked $disabled class=\"radio\" /> <label for=\"$itemID\">$value</label></li>\n";
}
...
}

so that is the hack, so the nice way to do this is to create an ImageOptionsetField, that inherits from OptionsetField and then allows setting of an array to handle the images. For the project this is in - I'm going to recommend this, but since I'm not coding it myself, I haven't added it here...

enjoy! :)