Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Bent Holz 100 posts 273 karma points
    Jan 17, 2012 @ 00:11
    Bent Holz
    0

    Get Image Crop width and height into Xslt

    Hi...

    Using the Image Crop function, im trying to display a cropped image via the media picker.

    My xslt works fine but since the right way to display an image is to set width and height i've run into question.

    Can I somehow get the width and height value from the cropped image instead of typing the value in myself?:

    <xsl:variable name="mediaId" select="number($currentPage/billede)" />
      <xsl:if test="$mediaId > 0">
        <xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />
        <xsl:if test="$mediaNode/umbracoFile">
            <img src="{concat(substring-before($mediaNode/umbracoFile,'.'),'_FrontSlide.',substring-after($mediaNode/umbracoFile,'.'))}" width="{$ThisIsTheCroppedWidthValue}" height="{$ThisIsTheCroppedHeightValue}" border="0" alt="{@nodeName}"/>
        </xsl:if>
    </xsl:if> 

    Cheers...

    /Crawn

    Copy Link
  • Sebastian Dammark 583 posts 1407 karma points
    Jan 17, 2012 @ 00:20
    Sebastian Dammark
    0

    Hi Crawn

    As I recall the dimensions of the cropped media are not available in the XML.

    <Image id="1138" version="b8881fcf-a598-4264-a1ef-a077d28474e3" parentID="1061" level="2" writerID="3" nodeType="1032" template="0" sortOrder="11" createDate="2011-12-08T22:23:41" updateDate="2011-12-08T22:24:13" nodeName="Stagen rendering1" urlName="stagenrendering1" writerName="jakob" nodeTypeAlias="Image"path="-1,1061,1138">
    <umbracoFile>
    /media/1524/stagen_rendering1.jpg
    </umbracoFile>
    <umbracoWidth>
    960
    </umbracoWidth>
    <umbracoHeight>
    500
    </umbracoHeight>
    <umbracoBytes>
    128561
    </umbracoBytes>
    <umbracoExtension>
    jpg
    </umbracoExtension>
    <cropset>
    <crops date="08-12-2011 22:23:48">
    <crop name="paragraph" x="230" y="0" x2="730" y2="500" url="/media/1524/stagen_rendering1_paragraph.jpg"/>
     
    <crop name="rotation" x="0" y="0" x2="960" y2="500" url="/media/1524/stagen_rendering1_rotation.jpg"/>
     
    </crops>
    </cropset>
    <rotationcaption/>
     
    </Image>
    Copy Link
  • Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib
    Jan 17, 2012 @ 00:23
    Chriztian Steinmeier
    0

    Hi Crawn,

    Actually, the crop XML doesn't tell you how big the image is - but since you're probably the one that set it up in the beginning, you are able to find the right values for the specific crops; 

    I've been using something quite elaborate for this which might be overkill for your needs, but you could try to use the same technique (creating an XML config file with the cropping setup) - take a look here on GitHub - it's not "plug and play" yet, but if you want to give it a go, I'll help you to a usable file.

    /Chriztian

    Copy Link
  • Bent Holz 100 posts 273 karma points
    Jan 23, 2012 @ 10:02
    Bent Holz
    0

    Hi 

    @Sebastian: Nope, looks like you're right ;)

    @Chriztian: Hmmm I have no idea of what your trying to tell me :/

    Copy Link
  • cchehn 28 posts 69 karma points
    Jun 03, 2013 @ 18:42
    cchehn
    1

    @Crawn

    Its pretty easy math all the pieces are there for each crop.

    <!-- Store the Crop Coords -->
    <xsl:variable name="ctaCropX" select="umbraco.library:GetMedia($ctaImage,0)//crop [@name = 'ctaCrop']/@x"/>
    <xsl:variable name="ctaCropX2" select="umbraco.library:GetMedia($ctaImage,0)//crop [@name = 'ctaCrop']/@x2"/>
    <xsl:variable name="ctaCropY" select="umbraco.library:GetMedia($ctaImage,0)//crop [@name = 'ctaCrop']/@y"/>
    <xsl:variable name="ctaCropY2" select="umbraco.library:GetMedia($ctaImage,0)//crop [@name = 'ctaCrop']/@y2"/>
    <!-- Calc the dimensions -->
    <xsl:variable name="ctaCropWidth" select="concat(($ctaCropX2 - $ctaCropX),'px')" />
    <xsl:variable name="ctaCropHeight" select="concat(($ctaCropY2 - $ctaCropY),'px')" />
    <!-- Get the crop URL -->
    <xsl:variable name="ctaCroppedMediaURL" select="umbraco.library:GetMedia($ctaImage,0)//crop [@name = 'ctaCrop']/@url"/>
    <!-- Display -->
    <img src="{$ctaCroppedMediaURL}" width="{$ctaCropWidth}" height="{$ctaCropHeight}" /> 
    Copy Link
  • Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib
    Jun 03, 2013 @ 23:21
    Chriztian Steinmeier
    0

    Hi Crawn,

    Sorry, I never noticed your reply — cchehn is right, you can actually calculate the values from the crop data, though it doesn't even need to look quite as daunting:

    <!-- Grab the crop -->
<xsl:variable name="ctaCrop" select="umbraco.library:GetMedia($ctaImage, false())//crop[@name = 'ctaCrop']" />

<!-- Calc the dimensions -->
<xsl:variable name="ctaCropWidth" select="$ctaCrop/@x2 - $ctaCrop/@x" />
<xsl:variable name="ctaCropHeight" select="$ctaCrop/@y2 - $ctaCrop/@y" />

<!-- Display -->
<img src="{$ctaCrop/@url}" width="{$ctaCropWidth}" height="{$ctaCropHeight}" />

    /Chriztian

    Copy Link
  • cchehn 28 posts 69 karma points
    Jun 03, 2013 @ 23:27
    cchehn
    0

    @Chriztian is right I posted that before I refactored but left it because I figured it would be helpful for anyone who was trying to navigate the image crop XML to have the whole thing spelled out in the current syntax.   Most of the examples I came across were pretty old.

    -C.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft