Hi Zarko

I think you should have a look at this: http://our.umbraco.org/projects/backoffice-extensions/image-cropper (whatch the demonstration)

If you are using Umbraco v4.5 the datatype is already installed but you need to create it in the developer section. Just right click "datatypes" and pick "create". Give your cropper af name and select the image cropper datatype from the dropdown list.

/Jan

Hi Jan,

Thanks for your reply.

I'll take a look at that image-cropper. Anyway, i was hoping that cropping could be done in XSLT dynamically, without any user effort.

So far i didnt find any solution to this part.

Hi Zarko

Hmm...then I'm wondering if you could benefit from using the upload datatype. There you can actually specify thumbnail sizes. You can specify more than one.

What you need to do is to go to the developer section and select the upload datatype and then write the values you need in there. This i probably documented somewhere else also, but for now I can just remember you can see how to do it by having a look at Doug's slides from the uk festival: http://umbracoukfestival.co.uk/media/676/did%20you%20know%20-%20umbraco%20uk%20festival.pdf page 22.

Could this be what you're after?

/Jan

Use the ImageGen package to resize the images. It works better than the imagecropper as long as you want your image to be resized, and not cropped (unless you buy the pro version of ImageGen)

xslt example:

 <img src="/umbraco/ImageGen.ashx?image={./umbracoFile}&amp;height=120&amp;pad=true&amp;bgcolor=white" alt="{./ImgDescription}" title="{./ImgDescription}"/>    

Hi Jan,

This looks very promissing! I just need to write xsl code to use cropped version when needed.

I'll let you know if i manage to get what i needed.

Thank you very much.

Here is a demo using imagecropper, though i should mention that we stopped using it because it has a lot of data-entry issues for content managers (crops don't get created untill you save the image at least twice, and all crops must be defined manually otherwise it takes the smallest possible area of the image, instead of the largest. Since this feature is caused by the way Umbraco works, it won't be fixed before Umbraco 5.0)

sample xslt:

<?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" 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" 
  exclude-result-prefixes="msxml
 umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes 
Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings 
Exslt.ExsltSets ">


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

<xsl:param name="currentPage"/>

<xsl:template match="/">
  <xsl:if test="$currentPage/galleryalbum &gt; 0">
    <xsl:variable name="images" select="umbraco.library:GetMedia($currentPage/galleryalbum, 1)" />
    <xsl:if test="count($images/*) &gt; 0">
      <xsl:for-each select="$images/* ">
        <xsl:if test="string(./umbracoFile) != ''">
 <a>
      <xsl:attribute name= "class">fancybox gallery</xsl:attribute>
      <xsl:attribute name= "rel">group</xsl:attribute>
  <!-- generate to link tot the fullsize or resized image if image is smaller than 700px -->    
   <xsl:choose>
      <xsl:when test="./umbracoWidth &lt; 700 and ./umbracoHeight &lt; 700">
      <xsl:attribute name= "href"><xsl:value-of select="./umbracoFile"/></xsl:attribute>
      </xsl:when>      
      <xsl:otherwise>
        <!--Check if an imagecropper resize exists -->             
      <xsl:attribute name= "href"><xsl:value-of select="concat(substring-before(umbracoFile,'.'), '_thumb_xl.jpg')"/></xsl:attribute>
      </xsl:otherwise>
    </xsl:choose>
   <!-- show the thumbnail-->
    <img src="{concat(substring-before(umbracoFile,'.'), '_thumb.jpg')}"  alt="{./ImgDescription}" title="{./ImgDescription}"/>              
      </a>
</xsl:if>     
      </xsl:for-each>
    </xsl:if>
  </xsl:if>
</xsl:template>

</xsl:stylesheet>

It's not the cleanest way to do it, but it worked for our testing purposes before we abandoned the imagecropper untill Umbraco 5.0

Ahh... Upload datatype resizes image, and i need to crop it and use first couple pixels.

Im building a page header with image in middle, and i need to expand image edge color to the page edges. My initial idea is to repeat cropped image to the edges of page. I could do this also with a backround color if i could take it from first image pixel.

@Rik:

I need to crop image, so free ImageGen version could not help me.

Can't you do that with CSS alone? just use css sprites to only show the last pixel of an image and then repeat it as far as you want?

Hmm no i think its not possible. At least as i know.

I have big picture and can not tel div to repeat only part of it (1px) as backround. Please correct me if im wrong.

You're probably right, i looked for some examples and the lack of results tells me it probably can't be done (first define a fixed width of 1px and then stretch sounds funny)

Just to let you know, i found solution.

I created event AfterSave on media which saves cropped image version in same directory. Later i use this cropped image and repeat it as background.

Once again thx for effort and suggestions.

is working on a reply...