Copied to clipboard

Flag this post as spam?

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


  • Jonas Persson 12 posts 42 karma points
    Apr 23, 2010 @ 11:55
    Jonas Persson
    0

    Insert image from medialibrary & assign internal link

    Hi!
    This is a simple one for you gurus I think :)
    I need to in the doctype choose an image from the medialibrary, and then assin an internal link to it.
    I´ve used Mediapicker for the image and the content picker for the link.

    I just can´t get the contenpicker to assign the link?

    This is what I want:

     <a href="#">
    <img src="images/banner/Banner_2.jpg" width="320" height="145" border="0"/>
    </a>


    This is how far i got:it:

    <a href="#">    
    <umbraco:Item runat="server" field="banner_1_bild" xslt="concat('&lt;img src=&quot;',umbraco.library:GetMedia({0}, true())/data[@alias='umbracoFile'], '&quot; width=&quot;320&quot; height=&quot;145&quot; border=&quot;0&quot;  /&gt;')" xsltDisableEscaping="true"/>
    </a>

     

    Any ideas? :)

  • Tobias Neugebauer 52 posts 93 karma points
    Apr 23, 2010 @ 12:14
    Tobias Neugebauer
    0

    Hi,

    it could work if you use pageID in the field attribute and then access your properties with $currentPage/data[@alias='YOUR_ALIAS'].

    Don't know if this works if highlighted my changes:

    <umbraco:Item ID="Item1" runat="server" field="pageID" xslt="concat('%lt;a href=&quot;', umbraco.library:NiceUrl($currentPage/data[@alias='YOUR_LINK_ALIAS]'),'&gt;', '&lt;img src=&quot;',umbraco.library:GetMedia($currentPage/data[@alias='banner_1_bild'], true())/data[@alias='umbracoFile'], '&quot; width=&quot;320&quot; height=&quot;145&quot; border=&quot;0&quot;  /&gt;&lt;a&gt;')" xsltDisableEscaping="true"/>

    Hope this helps

    Toby

  • Jonas Persson 12 posts 42 karma points
    Apr 27, 2010 @ 09:07
    Jonas Persson
    0

    Hi
    I can´t get this to work :(
    The "aliases" of the

    Mediapicker is:  banner_1_bild
    &
    content picker : banner_1_lank

    The idea is that you pick an image from the media library and when it´s clicked i want to go to an internal url.

    Is there any other way to achieve this?

  • bob baty-barr 1180 posts 1294 karma points MVP
    Apr 27, 2010 @ 16:13
    bob baty-barr
    0

    surely there is... i often have a property on page called pageImage... i use an xslt macro to render that image to the page, usually in a template, but let's look at some macro code that could do what you want. Below is a complete xslt that i have used that does a couple of things...

    1. if the user pics a media folder, it lists all the images from that folder

    2. if only one image is picked, it renders it to screen and includes the link element if a link is selected...

    now, caveat here is that i have the content picker on the media node itself, but we can address that below the code... so here goes.

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
        version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:msxml="urn:schemas-microsoft-com:xslt"
        xmlns:msxsl="urn:schemas-microsoft-com:xslt"
        xmlns:lk="http://leekelleher.com" xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary" xmlns:CWSHelper.twitter="urn:CWSHelper.twitter"
        exclude-result-prefixes="lk msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary CWSHelper.twitter ">


    <xsl:output method="xml" omit-xml-declaration="yes"/>

    <xsl:param name="currentPage"/>

    <msxsl:script language="JavaScript" implements-prefix="lk">
            function Random(r) { return Math.ceil(Math.random()*r); }
        </msxsl:script>

    <xsl:template match="/">

    <!-- start writing XSLT -->
    <xsl:choose>
        <xsl:when test="$currentPage/data [@alias = 'pageImage'] != ''">
            <xsl:variable name="imageNode" select="$currentPage/data[@alias='pageImage']"/>
            <xsl:variable name="imageData" select="umbraco.library:GetMedia($imageNode,0)/data [@alias = 'umbracoFile']"/>
            <xsl:variable name="imageLink" select="umbraco.library:GetMedia($imageNode,0)/data [@alias = 'picLink']"/>
                <xsl:choose>
                    <xsl:when test="$imageLink !=''">
                   
                        <a href="{umbraco.library:GetMedia($imageLink,0)/data [@alias = 'umbracoFile']}" class="viewDoc"><img src="/umbraco/imagegen.ashx?image={$imageData}&amp;width=300&amp;constrain=true" /></a>
                    </xsl:when>
                    <xsl:otherwise>
                        <img src="/umbraco/imagegen.ashx?image={$imageData}&amp;width=300&amp;constrain=true" />
                    </xsl:otherwise>
                </xsl:choose>

           
        </xsl:when>
        <xsl:otherwise>
            <xsl:if test="$currentPage/data [@alias = 'imagesFolder'] != ''">
                <div id="pageGallery">
                    <xsl:variable name="images" select="number($currentPage/data [@alias = 'imagesFolder'])"/>
                    <xsl:variable name="maxItems" select="count(umbraco.library:GetMedia($images, 'true')/node)"/>
                            <xsl:for-each select="umbraco.library:GetMedia($images, 'true')/node">
                            <xsl:sort select="lk:Random($maxItems)" order="descending" />
                                <xsl:variable name="picFile" select="concat('/umbraco/imageGen.aspx?image=',./data[@alias='umbracoFile'],'&amp;width=300&amp;height=300&amp;constrain=true')"/>
                   

                                    <div class="smPicSlide" style="text-align: center;">
                                        <img src="{$picFile}" alt=""/>
                                    </div>

                            </xsl:for-each>

                </div>

            </xsl:if>
        </xsl:otherwise>
    </xsl:choose>


    </xsl:template>

    </xsl:stylesheet>

    So, let's look at the linking stuff...

    <xsl:variable name="imageLink" select="umbraco.library:GetMedia($imageNode,0)/data [@alias = 'picLink']"/>
                <xsl:choose>
                    <xsl:when test="$imageLink !=''">
                   
                        <a href="{umbraco.library:GetMedia($imageLink,0)/data [@alias = 'umbracoFile']}" class="viewDoc"><img src="/umbraco/imagegen.ashx?image={$imageData}&amp;width=300&amp;constrain=true" /></a>
                    </xsl:when>
                    <xsl:otherwise>
                        <img src="/umbraco/imagegen.ashx?image={$imageData}&amp;width=300&amp;constrain=true" />
                    </xsl:otherwise>
                </xsl:choose>

    I am setting a variablebased on the media item... you would simply set it based on $currentPage/data[@alias='picLink']

    then you would use umbraco.library:NiceUrl($imageLink) to generate your link variable like this...

    <a href="{umbraco.library:NiceUrl($imageLink)" class="viewDoc"><img src="/umbraco/imagegen.ashx?image={$imageData}&amp;width=300&amp;constrain=true" /></a>

    Please NOTE my code uses the most EXCELLENT IMAGEGEN to size the images....

    hope that helps.

Please Sign in or register to post replies

Write your reply to:

Draft