<p:selectOneButton> with images

Question

I'm using JSF with Primefaces, I want to use a buttonset of radiobutton with only images but I can't make it work.

Here's the code:

    <p:selectOneButton value="#{LoginBean.user}" >  
        <f:selectItem itemLabel="&lt;img src=&quot;/myApp/faces/javax.faces.resource/myImg1.png?ln=img&quot;/&gt;" itemValue="1"/>
        <f:selectItem itemLabel="&lt;img src=&quot;/myApp/faces/javax.faces.resource/myImg2.png?ln=img&quot;/&gt;" itemValue="2"/>
    </p:selectOneButton>

I tried escaping characters with "escape", "escapeItem" and even "itemEscaped" attributes. I read about the last one in this other question. The solution in that question uses <h:selectOneRadio>, not <p:selectOneButton>.

Note: I know it works using jQueryUI buttonset() method (Primefaces uses it on the background) so it's not a script problem..

So, is it posible to do this with <p:selectOneButton>?

Thanks!

Answer 1

Indeed, the renderer of <p:selectOneButton> doesn't take into account any HTML in labels. Your best bet is to set it as CSS background image instead.

Given a

<p:selectOneButton ... styleClass="buttons">

you can style the individual buttons using CSS3 :nth-child() pseudoselector

.buttons .ui-button:nth-child(1) {
    background: url("#{resource['img/myImg1.png']}") no-repeat;
}
.buttons .ui-button:nth-child(2) {
    background: url("#{resource['img/myImg2.png']}") no-repeat;
}

If you're however targeting browsers which don't support it (certain IE versions), then you can't go around performing the job via JS/jQuery.

$(".buttons .ui-button:eq(0)").css("background", "url('resources/img/myImg1.png') no-repeat");
$(".buttons .ui-button:eq(1)").css("background", "url('resources/img/myImg2.png') no-repeat");

---

Unrelated to the concrete problem, the way how you're using resource library is not entirely right. Carefully read What is the JSF resource library for and how should it be used? to learn more about it.

Answer 2

I just wanted to use Font Awesome Icons. That is possible by setting font-family: FontAwesome and using this codes: https://fontawesome.com/v4.7.0/cheatsheet/

<p:selectOneButton value="#{mybean.alignment}" style="font-family: FontAwesome;">
   <f:selectItem itemValue="align-left" itemLabel="&#xf036;"/>
   <f:selectItem itemValue="align-center" itemLabel="&#xf037;"/>
   <f:selectItem itemValue="align-right" itemLabel="&#xf038;"/>
</p:selectOneButton>