Search code examples
javajqueryjsfresourcesprettyphoto

Path to image by h:graphicImage JSF


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?


Solution

  • 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>)