Hi Mads,

Looks like you are using the v7 image cropper package with XSLT!

I haven't tried it myself but I believe that there is a new JSON to XML XSLT helper for doing just this.

<xsl:copy-of select="umbraco.library:JsonToXml($currentPage/matrix)"/>

See this blog post by Tim Geyssens for more information

Jeavon

Hi Mads,

I would really recommend getting a .NET dev to code an extension for you, so that you can do something like this:

<xsl:variable name="mediaNode" select="umbraco.library:GetMedia($currentPage/size300, 0)" />
<xsl:variable name="cropData" select="JSON:JSON2XML($mediaNode/imageCrop)" />

<xsl:variable name="previewURL" select="$cropData/previewurl" />

Otherwise, you'll be in a world of pain trying to string-manipulate your way through this...

JSON is a horrible format to use from XSLT - just like XML is a horrible format to use from JavaScript :-)

(I actually think Umbraco 7 has an extension like that already...)

Update: Yes, it has - U4-3581

/Chriztian

Hi Guys

Thanks for the answer i've downgrated my solution to an 6.1.6.

I think that i'm getting forced to learn Razor instead of my beloved XSLT :D

Still pretty new in Razor thats why i downgrated - using CropUp insted :D

Thanks for the helt anyway :D 

Don't give up yet, a solution has appeared on the horizon!

Kenn has just submitted a pull request to automatically convert JSON datatype content to XML when saving to the content cache. Which means that the image cropper is usable from XSLT, as are all other datatypes that save JSON. And the entire content cache is queryable in XSLT (querying blobs of JSON in CDATA is pretty useless).

Rally around the Alliance, cast your vote! :)

Has this been solved at all?  I'd love to use the imagecropper in my v7 site, but I've already created all my xlst files.  I'm horrible at razor and don't want to have to spend weeks trying to get the same things done in razor.  To make things more complicated, my original solution included imagegen. Replacing the pageLinkImage line with the one below doesn't give the results I need.

<a class="megamenupic" href="{umbraco.library:NiceUrl(@id)}">
   <img>
<xsl:attribute name="class"><xsl:text>img-responsive</xsl:text></xsl:attribute>
<xsl:attribute name="alt"><xsl:value-of select="@nodeName"/></xsl:attribute>
<xsl:attribute name="src"> 
<xsl:text>/imagegen.ashx?image=</xsl:text>
<xsl:value-of select="umbraco.library:JsonToXml($currentPage/pageLinkImage)"/>
<xsl:text>&amp;width=400</xsl:text><xsl:text>&amp;AltImage=images/placeholder.gif</xsl:text>
</xsl:attribute>
   </img></a>

It spits out the following:

<img class="img-responsive" alt="Panorama Suite" src="/imagegen.ashx?image=0.50.5/media/2263/penthouse.jpgPage Link Image90051400.1437514234585976800&amp;width=400&amp;AltImage=images/placeholder.gif">

Obviously not what I want.

Is this an impossible task or is it just too difficult to attempt?

Cheers,

Wade.

Hi Wade

Actually, I moved over to Razor, it has made my life a little easier with the new umbraco 7 :)

But anyways thanks for your reply :) 

Hi Wade - I know @Dammark has been doing some stuff here on Github - maybe you can just use that, or at least see how it's done. It handles the focal point etc.

/Chriztian

Hi Chriztian,

Thank you very much for pointing me in the direction of @Danmark. Sebastian was able to help me get it working.

If anyone wants to use imagecropper in Umbraco 7 with xslt it is possible. Follow Chriztian's link above and follow the instructions on Sebastian's github page.  In my case however, I am uploading the image straight to the content, not via the media section.  Sebastian sent me a different _MediaHelper.xslt that worked for me.  I'll post it below.  

Steps:

1. Create a new clean xslt file and call it _MediaHelper.xslt and paste in the following code (_MediaHelper.xslt code from Sebastian Danmark): 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet 
    version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umb="urn:umbraco.library"
    exclude-result-prefixes="msxml umb">

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

    <xsl:template match="*" mode="media">
        <xsl:param name="cropset" />
        <xsl:param name="class" />
        <xsl:param name="id" />
        <xsl:param name="quality" />
        <xsl:variable name="data" select="umb:JsonToXml(.)" />
        <xsl:variable name="src" select="$data/src" />

        <xsl:variable name="format">
            <xsl:choose>
                <xsl:when test="contains($src, '.jpg')">
                    <xsl:value-of select="'jpg'" />
                </xsl:when>
                <xsl:when test="contains($src, '.png')">
                    <xsl:value-of select="'png'" />
                </xsl:when>
                <xsl:when test="contains($src, '.gif')">
                    <xsl:value-of select="'gif'" />
                </xsl:when>
            </xsl:choose>
        </xsl:variable>
        <xsl:variable name="focalPointTop" select="$data/focalPoint/top" />
        <xsl:variable name="focalPointLeft" select="$data/focalPoint/left" />

        <img src="{$src}" width="{umbracoWidth}" height="{umbracoHeight}" alt="{@nodeName}">
            <xsl:variable name="origin">
                <xsl:choose>
                    <xsl:when test="$data/crops[alias = $cropset]/coordinates">
                        <xsl:value-of select="concat('?crop=', $data/crops[alias = $cropset]/coordinates/x1, ',', $data/crops[alias = $cropset]/coordinates/y1, ',', $data/crops[alias = $cropset]/coordinates/x2, ',', $data/crops[alias = $cropset]/coordinates/y2, '&amp;cropmode=percentage')" />
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:value-of select="concat('?mode=crop&amp;center=', $focalPointTop, ',', $focalPointLeft, '&amp;width=', $data/crops[alias = $cropset]/width, '&amp;height=', $data/crops[alias = $cropset]/height)" />
                    </xsl:otherwise>
                </xsl:choose>
            </xsl:variable>

            <xsl:if test="$cropset">
                <xsl:attribute name="src">
                    <xsl:value-of select="$src" />
                    <xsl:value-of select="$origin" />
                    <xsl:value-of select="concat('&amp;quality=', $quality)" />
                    <xsl:value-of select="concat('&amp;format=', $format)" />
                </xsl:attribute>
                <xsl:attribute name="width">
                    <xsl:value-of select="$data/crops[alias = $cropset]/width" />
                </xsl:attribute>
                <xsl:attribute name="height">
                    <xsl:value-of select="$data/crops[alias = $cropset]/height" />
                </xsl:attribute>
            </xsl:if>

            <xsl:if test="$class">
                <xsl:attribute name="class">
                    <xsl:value-of select="$class" />
                </xsl:attribute>
            </xsl:if>

            <xsl:if test="$id">
                <xsl:attribute name="id">
                    <xsl:value-of select="$id" />
                </xsl:attribute>
            </xsl:if>
        </img>
    </xsl:template>

    <xsl:template match="Folder">
        <xsl:param name="cropset" />
        <xsl:param name="class" />
        <xsl:param name="id" />
        <xsl:param name="quality" />

        <xsl:apply-templates select="*[@id]">
            <xsl:with-param name="cropset" select="$cropset" />
            <xsl:with-param name="class" select="$class" />
            <xsl:with-param name="id" select="$id" />
            <xsl:with-param name="quality" select="$quality" />
        </xsl:apply-templates>
    </xsl:template>

    <xsl:template match="File[umbracoExtension='svg']">
        <xsl:param name="class" />

        <img src="{umbracoFile}" id="{@urlName}" alt="{@nodeName}">
            <xsl:if test="$class">
                <xsl:attribute name="class">
                    <xsl:value-of select="$class" />
                </xsl:attribute>
            </xsl:if>
        </img>
    </xsl:template>

    <xsl:template match="File" />
</xsl:stylesheet>

2. In the top of the xslt file that you are using to call the imagecropper image, add in this line of text:

 <xsl:include href="_MediaHelper.xslt" />

3. Still in the xslt file that you are using to call the imagecropper image, when you want the image to appear, add this line of text:

<xsl:apply-templates select="IMAGE PROPERTY NAME HERE" mode="media">
    <xsl:with-param name="class" select="'CLASS HERE'" />
    <xsl:with-param name="cropset" select="'CROP NAME HERE'" />
    <xsl:with-param name="quality" select="85" />
</xsl:apply-templates>

That's it.  It worked for me after that. The crop name in the last bit of code is the actual name of the crop in the imagecropper data type.  

One thing to be aware of though, is that if you are implementing this after you have put the images in your site, you will have to re-upload the images that are used in the image cropper.  In umbraco it looks like they are there, but they won't show on the page until you have re-uploaded them.

Huge thanks to Chriztian Steinmeier and Sebastian Danmark.

Hi!

Im trying to use this to in a slideshow and I can get the images by serving the Folders Id but i want to wrap each image in an li element. Where can I add this?

Hmm...When I try to Visualize the xslt I get the following error:

Error parsing the XSLT:

System.Xml.Xsl.XslLoadException: XSLT compile error. An error occurred at (14,42). ---> System.IO.FileNotFoundException: Could not find file c:\windows\system32\inetsrv\_MediaHelper.xslt.

Ive just added <xsl:include href="MediaHelper.xslt" />?

Hi Froad

Shouldn't you reference the _MediaHelper.xslt file? so the include should say <xsl:include href="_MediaHelper.xslt" /> ?

/Jan

That was a mistype by me when adding the post. I am referencing _MediaHelper.xslt. But why is it looking in c:\windows\system32\inetsrv? 

Hi Froad

Ok, where have you placed the reference to the entities file? I assume you found the files here https://github.com/greystate/Greystate-XSLT-Helpers/tree/master/mediahelpers

/Jan

No, I used the following:https://github.com/sebastiandammark/umbraco7-xslt-helpers/tree/master/MediaHelper

Hi froad,

Unfortunately, the Visualizer doesn't work with includes (or a couple of other similar features, e.g., external entities) - I think it's because Umbraco copies the file to a temp directory, so the included file can't be reached...

/Chriztian

is working on a reply...