Note that there are some explanatory texts on larger screens.

plurals
  1. PORefactor a link and an image
    text
    copied!<p>I have to write an link with an image inside. Instead of explaining, here's the code I have now:</p> <pre><code>&lt;c:if test="${userSession.loggedUser eq null and company.image != null}"&gt; &lt;a onclick="${rich:component('loginPanel')}.show()"&gt; &lt;img src="/download.do?hash=#{company.image.hash}" /&gt; &lt;/a&gt; &lt;/c:if&gt; &lt;c:if test="${userSession.loggedUser eq null and company.image == null}"&gt; &lt;a onclick="${rich:component('loginPanel')}.show()"&gt; &lt;img src="${request.contextPath}/img/icons/logo_default.jpg" /&gt; &lt;/a&gt; &lt;/c:if&gt; &lt;c:if test="${userSession.loggedUser ne null and company.image != null}"&gt; &lt;a href="company.xhtml?${company.name}"&gt; &lt;img src="/download.do?hash=#{company.image.hash}" /&gt; &lt;/a&gt; &lt;/c:if&gt; &lt;c:if test="#{userSession.loggedUser ne null and company.image == null}"&gt; &lt;a href="company.xhtml?${company.name}"&gt; &lt;img src="${request.contextPath}/img/icons/logo_default.jpg" /&gt; &lt;/a&gt; &lt;/c:if&gt; </code></pre> <p>This code looks awful - there are two exact links with two exact images but combined in all possible combinations. Is there a better way? Is there a way to avoid c:if - it created tables?</p> <p><strong>Update</strong>: Bozho proposes: You can replace <code>&lt;c:if</code> and <code>&lt;a</code> with <code>&lt;h:outputLink rendered="#{..}"</code>. Apart from that I don't see any other optimization.</p> <p>But it doesn't work. This does not render correctly:</p> <pre><code>&lt;a href=&gt; &lt;h:outputLink rendered="#{..} &lt;h:outputLink rendered="#{..} &lt;/a&gt; </code></pre> <p>(the image is outside the anchor)</p> <p>This does render fine:</p> <pre><code>&lt;h:outputLink value=&gt; &lt;h:outputLink rendered="#{..} &lt;h:outputLink rendered="#{..} &lt;/a&gt; </code></pre> <p>, but it always adds href and in two of the cases I don't want href when rendered.</p> <p><strong>Update2</strong>: I also had them combined 2 by 2:</p> <pre><code>&lt;c:if&gt; &lt;a href...&gt; &lt;c:if&gt;&lt;img...&gt;&lt;/c:if&gt; &lt;c:if&gt;&lt;img...&gt;&lt;/c:if&gt; &lt;/a&gt; &lt;/c:if&gt; &lt;c:if&gt; &lt;a onclick...&gt; &lt;c:if&gt;&lt;img...&gt;&lt;/c:if&gt; &lt;c:if&gt;&lt;img...&gt;&lt;/c:if&gt; &lt;/a&gt; &lt;/c:if&gt; </code></pre> <p>This also does not render correctly - the <code>&lt;a</code> does not surround the images for some crazy reason.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload