image cropper basic question - Extending Umbraco

Andrew Blackmore 84 posts 127 karma points

Mar 01, 2010 @ 20:12

Image Cropper ... basic question

I checked the image cropper forums and couldn't find anything useful. I know that this is a very frequently used plugin and I've had no trouble implementing it in the admin section, but trying to called the cropped images is where I'm running into issues. There doesn't seem to be any real documentation on this nor any code samples I've been able to get to work.

I don't need to waste a lot of somebody's time but if somebody could just give me a code snippet that I can look at and figure out whats going on that would be a huge help.

I had this code to insert the image:

                <xsl:variable name="media" select="umbraco.library:GetMedia($post/data[@alias='blogImage'], 0)/data" />
                <xsl:if test="$media">
                  <xsl:variable name="url" select="$media [@alias = 'umbracoFile']" />
                  <xsl:variable name="width" select="$media [@alias = 'umbracoWidth']" />
                  <xsl:variable name="height" select="$media [@alias = 'umbracoHeight']" />
                  <img class="" src="{$url}" width="{$width}" height="{$height}" />
                </xsl:if>

and then I tried

              <xsl:variable name="media" select="umbraco.library:GetMedia($post, false)/data [@alias ='crops']/crops/crop[@name='Thumb']/@url" />
                <xsl:if test="$media">
                  <xsl:variable name="url" select="$media [@alias = 'Thumb']" />
                  <xsl:variable name="width" select="$media [@alias = 'umbracoWidth']" />
                  <xsl:variable name="height" select="$media [@alias = 'umbracoHeight']" />
                  <img class="" src="{$url}" width="{$width}" height="{$height}" />
                </xsl:if>

and its a no go. i'm sure its something easy but since I have nothing to really reference as far as a simple solution I can't figure this out. Also, I wasn't able to get the back end to work unless the image to be cropped is inserted with an "Upload" data type. I would prefer to use media picker but again couldn't get that to work (although that appears to be more complicated)

Thanks

Copy Link

Kim Andersen 1447 posts 2196 karma points MVP

Mar 01, 2010 @ 22:13

Hi Andrew.

I have used the following XSLT to render my cropped images several times:

<xsl:variable name="filename" select="umbraco.library:GetMedia($node/data [@alias = 'mainImage'], 'false')/data [@alias = 'umbracoFile']"/>

     <xsl:variable name="imgUrl">
             <xsl:call-template name="image_thumbnail">
                     <xsl:with-param name="filename" select="$filename"/>
             </xsl:call-template>
     </xsl:variable>
    <img src="{$imgUrl}"  alt="SomeText" />
</xsl:template>

    <xsl:template name="image_thumbnail">
        <xsl:param name="filename"/>
        <xsl:choose>
            <xsl:when test="contains($filename, '.')">
                <xsl:variable name="before" select="substring-before($filename, '.')"/>
                <xsl:variable name="after" select="substring-after($filename, '.')"/>
                <xsl:choose>
                    <xsl:when test="contains($after, '.')">
                        <xsl:variable name="recursive">
                            <xsl:call-template name="image_thumbnail">
                                <xsl:with-param name="filename" select="$after"/>
                            </xsl:call-template>
                        </xsl:variable>
                        <xsl:value-of select="concat($before, '.', $recursive)"/>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:value-of select="concat($before, '_mainimage.jpg')"/>
                    </xsl:otherwise>
                </xsl:choose>
            </xsl:when>
            <xsl:otherwise>
                <xsl:value-of select="$filename"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>

In he above code, I have a mediaPicker, on my document type, with an alias of mainImage.

When I use my Image Cropper, I extend the cropped image with _mainimage. In this way I always know that the image-file to look for is called [originalFilename]_mainimage.jpg.

Maybe there is another and smarter way to do this, but in my example, you will always find the right image, no matter whether the filename includes several dots (.), underscores(_) etc.

/Kim A

Copy Link

Andrew Blackmore 84 posts 127 karma points

Mar 01, 2010 @ 22:22

Hey Kim,

Thank you for the response. To some extent this makes sense. In other senses it doesn't. I've only been able to get the cropper to work if the alias of the picker is umbracoFile so I don't get how the image gets to the cropper to even get to this point.

Andrew

Copy Link

Kim Andersen 1447 posts 2196 karma points MVP

Mar 01, 2010 @ 22:51

Ahh know I understand your question.......I think :)

I always add the cropper to the image media-type on a new tab. I usually gives the Image Cropper an alias of crop, and not umbracoFile. Then I can upload an image to the media library, and afterwards crop the images in the second tab on that excact image. This will save a cropped version of the image on the disc. This image is called the original filename extended with an underscore(_) and the name that you decided in the ImageCropper datatype. E.g. an image with a filename of summer2009.jpg, will be called summer2009_thumbnail.jpg as the cropped version.

The code I wrote was, to choose an image from the media library, and then use the cropped image instead of the original image. Does that make sense at all?

/Kim A

Copy Link

Andrew Blackmore 84 posts 127 karma points

Mar 01, 2010 @ 23:05

Hey Kim,

That makes MUCH more sense. I will work on this tonight and tomorrow morning and see what I can make of this. I think this is exactly the start I was looking for. What I had originally tried to do was put the crop tool on a page for creating a new blog post. When the editors picked their required image they would be forced to make two crops of it (a post thumbnail and a large image) and I was going to use those.

I think I can make this work though and I'll just write some extended instructions for my favorite non-technical editors :)

Andrew

Copy Link

Kim Andersen 1447 posts 2196 karma points MVP

Mar 01, 2010 @ 23:09

Sounds cool Andrew.

Cound be nice if you would report back on what you'll find out, when you are done playing around with it.

I hope that it will work for you, otherwise just say so, and we'll have another look at it :)

/Kim A

Copy Link

Andrew Blackmore 84 posts 127 karma points

Mar 03, 2010 @ 22:39

   <xsl:variable name="media" select="umbraco.library:GetMedia($post/data[@alias='blogImage'], 0)/data" />
                <xsl:if test="$media">
                  <xsl:variable name="url" select="concat(substring-before($media [@alias = 'umbracoFile'],'.'),'_thumbs.jpg')" />
                  <xsl:variable name="width" select="$media [@alias = 'umbracoWidth']" />
                  <xsl:variable name="height" select="$media [@alias = 'umbracoHeight']" />
                  <img class="" src="{$url}" width="{$width}" height="{$height}" />
                </xsl:if>

Thanks a ton Kim.

It made so much more sense all of the sudden why the cropper should be a tab in the media section for each image. I saw it on the screencast but didn't get why. This ends up working out very easily and simply.

Thanks for the explanation.

Copy Link

Kim Andersen 1447 posts 2196 karma points MVP

Mar 03, 2010 @ 22:56

You are very welcome Andrew. Glad I could help :)

/Kim A

Copy Link

is working on a reply...

Flag this post as spam?

Image Cropper ... basic question