Hi kenny

This can be achived by adding two properties on your document type.

For the image you can either choose to add a media picker or an upload field. What you choose is up to you. When you are using a media picker you have to upload the image to a folder in the media section before you can select it with the media picker. If you use Upload you will be able to upload the image directly on the document. By using upload you skip a single step in the creation proces. It's all a matter of what makes sense in your case.

To select the link you need to add a content picker, which makes it possible for you to select which page the image should be linking to.

I hope this makes sense?

/Jan

I should of course add that when you have created these properties you need to fetch the data using an XSLT macro.

/Jan

Thank you for the replies!!

I think I am understanding..  What I am wondering now is..how do I add these properties to the .xslt?

@kenny

take a look over here and see if that answers your question...

http://our.umbraco.org/forum/templating/templates-and-document-types/8687-Insert-image-from-medialibrary--assign-internal-link

Bob

I had found that thread earlier, thank you.  It seems I may need it to be spelled out to me more clearly...

I've got the media picker to work...just can't seem to connect the content picker in the xslt...

okay, so in my original example, i am using a propety on the media node for the link... but i can TOTALLY see the value of putting it on the content node itself...

so, you have the media picker working...

the content picker gives you an ID, right...

so basically, in your macro xslt... you would wrap your <img src="blah, blah, blah/> with an a tag...

in xslt you could do it like this

<a href="{umbraco.library:NiceUrl($currentPage/data[@alias='yourContentPickerAlias'])}"><img src="blah"/></a>

feel free to post your xslt so we can get this ironed out

Thanks so much for the help!!!

This is what my xlst looks like now...

<?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:umbraco.library="urn:umbraco.library"
    exclude-result-prefixes="msxml umbraco.library">


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

<xsl:param name="currentPage"/>


<xsl:template match="/">
    <xsl:if test="string($currentPage/data [@alias='ProductLink1']) != '' ">
    <xsl:element name="img">
    <xsl:attribute name="src">

<xsl:value-of select="umbraco.library:GetMedia($currentPage/data[@alias='ProductLink1'], 'false')/data [@alias = 'umbracoFile']"/>

<xsl:value-of select="data [@alias = 'ProductLink1']"/>





    </xsl:attribute>
    </xsl:element>
    </xsl:if>

</xsl:template>

</xsl:stylesheet>

Hi Kenny

I would fetch the image and link like bob has nearly already shown by writing the values in the href and src attributes of the a and img element.

Firstly I will create two variables to keep the code a bit more cleand and structured where I assign the values of the media picker and the content picker.

<xsl:variable name="linkSource" select="umbraco.library:GetXmlByNodeId($currentPage/data [@alias = 'yourlinkproperty'])" />
<xsl:variable name="imgSource" select="umbraco.library:GetMedia($currentPage/data[@alias='ProductLink1'], 'false')/data [@alias = 'umbracoFile']" />

in the linkSource variable I'm using the  GetXmlByNodeId extension to find the page selected since the content picker returns an id and not a page.

Now you can write this in your XSLT to make the image with a link

<a href="{$linkSource}"><img src="{$imgSource}" /></a>

I hope this helps.

/Jan

Ok, that makes sense...create two variables using my properties then call them as the image link.  However, now I get this error...

Extension object 'urn:umbraco.library' does not contain a matching 'GetXmlByNodeId' method that has 1 parameter(s).

Hi Kenny

My bad! My memory is not that good. It should read GetXmlNodeById

/Jan

Thanks so so much, I am so very close now!!!  The problem now is that instead of hte image pointing to the page I select..the url is very long and contains non-url data?...

OK..I got it!  Thank you both for all the help, I owe you the world!  What I did was remove the underlined part from your code below and changed the property to a text string...

<xsl:variable name="linkSource" select="umbraco.library:GetXmlByNodeId($currentPage/data [@alias = 'yourlinkproperty'])" />
<xsl:variable name="imgSource" select="umbraco.library:GetMedia($currentPage/data[@alias='ProductLink1'], 'false')/data [@alias = 'umbracoFile']" />

<a href="{$linkSource}"><img src="{$imgSource}" /></a>

Again, thanks sooo much for the help!

Oh no!  I accidentally clicked the wrong solution!!! 

i have posted to twitter to see if one of the forum admins can give the karma to Jan!

is working on a reply...