Question

I am using h:graphicImage to display images using the name attribute. Now, in order to successfully implement PrettyPhoto (JQuery implementation), I need the resulting path to the image (/javax.faces.resource/pictures/file.png.xhtml) as result in my <a href /> too.

As you can see in from a snippet of PrettyPhoto’s documentation, I will need the path to my image as the path for my <a href /> (there’s actually a difference due to the fact of using thumbnails):

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
    <img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>

Is there any way to extract the resourceName (as it is named for h:graphicImage) for my h:outputLink?

Answer 1

You can use the implicit EL variable mapper #{resource} to convert a JSF resource library/name to full URL.

So, in your particular case,

<h:outputLink value="#{resource['images/fullscreen/2.jpg']}">
    <h:graphicImage name="images/thumbnails/t_2.jpg" />
</h:outputLink>

If you’re also using resource library, then the syntax should look like follows:

<h:outputLink value="#{resource['default:images/fullscreen/2.jpg']}">
    <h:graphicImage library="default" name="images/thumbnails/t_2.jpg" />
</h:outputLink>

(note that you can even just use <a href> instead of <h:outputLink value>)