Copied to clipboard

Flag this post as spam?

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


  • FarmFreshCode 225 posts 422 karma points
    May 25, 2011 @ 17:13
    FarmFreshCode
    0

    Image Cropper - Call Cropped Image directly inside XSLT

    Hello Everyone!

    First the basics, I am using Umbraco v4.7, currently trying to use the built in Image Cropper dataType.

    • I am looking to use this dataType to create an Image Gallery that displays formatted images
    • I would prefer not to upload the image in the media section, then go over to the content section and "pick" it.
    • XSLT has been my starting point but I would be open to Razor if it provides a better option. 

    Here is a basic look at the file tree and document type setup:

    You can see here I want my childnodes of "Image Gallery" to be the individual images. Then in the docType I have an image upload, then image description, then the cropping area for the "Large" thumb. I would like it to work like this for my users.

    Next is a picture of the folder structure. You can see that my "Cropped" image is automatically stored here:

    XXXXXXXXX\Umbraco\media\12874\picture_84_Gallery Image.jpg

    Where "Gallery Image" is the title I added to the specific crop action.

    And Finally we have my current XSLT code:

    <xsl:for-each select="umbraco.library:GetXmlNodeById(1865)/NewGalleryImage">
      <li>
      <a class="thumb productLink" name="{@id}" href="CROPPED IMAGE" title="{@nodeName}">
         <img src="{galleryImage}" alt="{@nodeName}"/>
      </a>
          <div class="caption">
            <div class="image-title"><xsl:value-of select="@nodeName"/></div>
            <div class="image-desc"><xsl:value-of select="galleryImageDescription"/></div>
           
            <div class="download">
               <a href="{galleryImage}">Download Original</a>
            </div>
          </div>
      </li>
    </xsl:for-each>

    I just need to replace (href="CROPPED IMAGE") with something that calls the correct cropped version of the image. I feel like there are probably some simple ways to get that URL but I haven't been able to get it right yet on my own. For example I have been looking at the uQuery GetImageCropperUrl method.. but no luck so far.

    That all being said I think that if I could get this issue solved I would have a really sweet image gallery that I would be happy to share with everyone.

    Thanks in advance!

  • Tom Fulton 2030 posts 4998 karma points c-trib
    May 25, 2011 @ 17:36
    Tom Fulton
    0

    Hi,

    You can pull the crop's URL from the Image Cropper property like so:

    <a href="{$currentPage/yourCropPropertyAlias/crops/crop [@name = 'Gallery Image']/@url}">

    Also, on a side note, you can use Digibiz Advanced Media Picker instead of using nodes for each of your images and pick the images from the media library.  The newer version still in development has support for cropping right from the datatype.  And you can upload from the datatype so there is no need to switch back/forth from content/media like you mentioned.  Your above way works fine too and these features are still in development (in the latest source), just thought I'd mention :)

    Hope this helps,
    Tom

  • FarmFreshCode 225 posts 422 karma points
    May 25, 2011 @ 18:12
    FarmFreshCode
    0

    Hi Tom,

    Thanks for responding.. let me check with you cause I haven't gotten it working.. Maybe I'm just not sure on the "yourCropPropertyAlias" value. I thought I would go to Settings > Document Type > and click on the "New Gallery Image" doc type. (see pic below) Then the CropPropertyAlias should = "galleryImageLarge". But that returns nothing to me. Is this not the right value? 

     

  • Tom Fulton 2030 posts 4998 karma points c-trib
    May 25, 2011 @ 18:50
    Tom Fulton
    1

    Yep, that looks right, but actually I made a mistake, you should drop the $currentPage/ since this is running inside a for-each loop, you want the property from the current item in the loop and not the currentPage.

    Ex: 

    <a href="{galleryImageLarge/crops/crop [@name = 'Gallery Image']/@url}">
  • FarmFreshCode 225 posts 422 karma points
    May 25, 2011 @ 18:59
    FarmFreshCode
    0

    There you go! Nice.. Thanks a lot.. I tried so many things.. I'll post a link to my final source code for the Image Gallery once I get it all wrapped up incase anyone else would like to use it.

  • Sean Holmesby 61 posts 82 karma points
    May 26, 2011 @ 02:17
    Sean Holmesby
    0

    I would be very keen to grab your code when you're done coz I have a feature planned just like this on my site. Please let me know when it goes up.

     - Sean

  • FarmFreshCode 225 posts 422 karma points
    May 27, 2011 @ 20:22
    FarmFreshCode
    2

    Hi Sean,

    I just finished my blog post about creating my gallery. You can check it out here: http://farmfreshcode.com/umbraco/image-gallery/226 I have included a video as well to show you what it looks like since I am still just working on a testing server. If you find the code helpful, let me know on the blog. Thanks!

  • Sean Holmesby 61 posts 82 karma points
    May 30, 2011 @ 01:40
    Sean Holmesby
    0

    Awesome, thanks for that. I'll check it out tonight.

    Cheers,

    Sean

Please Sign in or register to post replies

Write your reply to:

Draft