Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Daniel Dawson 27 posts 47 karma points
    Jul 07, 2011 @ 23:16
    Daniel Dawson
    0

    How to make an <img> tag show only when a file has been uploaded

    Hi guys,

    Here's the situation. I have a page called portfolio post which displays a specific post within my portfolio. In my doc type I have 2 upload file fields - one called umbracoFile and umbracoFile1 (I know I know.. I need to rename these), and a richtext editor field named bodyText.

    All portfolio posts will have an image uploaded to umbracoFile but an image upload for umbracoFile1 is not mandatory. When I don't upload a file to umbracoFile1 and run my page it shows the broken image symbol (which is to be expected as nothing has been entered inbetween the img tag). Is there another way around this to avoid the second <img> tag showing if nothing has been uploaded to the umbracoFile1 field?

    Here's my code for the right content section:

    <div id="right-content">
        <div class="portfolio-container">
        <img src="<umbraco:Item field="umbracoFile" runat="server"></umbraco:Item>" width="460px" height="40%" />
        </div>
        <div class="portfolio-container">
        <img src="<umbraco:Item field="umbracoFile1" runat="server"></umbraco:Item>" width="460px" height="40%" />
        </div>
      </div>

    Thanks!

    Dan

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 11, 2011 @ 18:27
    Jan Skovgaard
    0

    Hi Dan

    In order to achieve this I will recommend that you make a XSLT macro to be able to use some simple logic to handle this.

    So in your template you have the right-content container like this

    <div id="right-container">
    <!-- Your XSLT macro goes here -->
    </div>

    Your XSLT could for instance look like this...

        <div class="portfolio-container">
        <img src="{$currentPage/umbracoFile}" width="460" height="40%" />
        </div>
    <xsl:if test="$currentPage/umbracoFile1 !=''">
        <div class="portfolio-container">
        <img src="{$currentPage/umbracoFile1}" width="460" height="40%" />
        </div>
    </xsl:if>

    Hope this makes sense?

    /Jan

Please Sign in or register to post replies

Write your reply to:

Draft