image crop on slideshow

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Peter Alcock 113 posts 176 karma points

Jun 08, 2012 @ 16:52

Hi guys

Hoping someone can help it's driving me mad! I have a basic fading image slideshow built in XSLT with javascript, it works perfectly fine and resizes the images to 680x330 however i would prefer it to use a cropped image.

Anyone have any ideas as to how to replace my standard getmedia umbracofile jobby to grab the cropped version of the image?

many thanks

Pete

heres my code

<?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"
  exclude-result-prefixes="msxml umbraco.library">

<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:variable name="documentTypeAlias" select="string('FadingImage')"/>  
<xsl:param name="currentPage"/>

<xsl:template match="/">

  
<div class="slider" id="slider">
    <div class="imageSlider" id="imageSlider" >
                
    <xsl:for-each select="$currentPage/* [name() = $documentTypeAlias] ">
     <xsl:variable name="images" select="umbraco.library:GetMedia(picture, 0)" /> 
     <div class="imageSlide">    
       <div class="imageSliderImage">
        <img src="{$images/umbracoFile}" width="680px" height="330px" >
       </img>
         <div class="imageSliderInfo">
         <xsl:choose>
        <xsl:when test="string-length('textColour') &gt; 0">   
           <font>
             <xsl:attribute name="color"><xsl:value-of select="textColour"/></xsl:attribute>
           <h3><xsl:value-of select="text"/></h3>
           </font>
           </xsl:when>
           <xsl:otherwise>
              <font color="#000">
           <h3><xsl:value-of select="text"/></h3>
           </font>
           </xsl:otherwise>
           </xsl:choose>
         </div>
       </div>
      </div>

    </xsl:for-each>
   
</div>
</div>
     
</xsl:template>
      
</xsl:stylesheet>

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Jun 10, 2012 @ 07:34
0
Hi Peter,

You could try to change this part
```
 <img src="{$images/umbracoFile}" width="680px" height="330px" >
```
to
```
  <img src="{concat(substring-before(umbraco.library:GetMedia(picture, 'true'),'.'),'_cropped.jpg')}" />
```
"cropped" is the name given to DataType when creating your custom image cropper

//fuji
Copy Link
Nigel Wilson 945 posts 2077 karma points

Jun 10, 2012 @ 21:58
1
Hi Peter

Within your loop try adding the following - it should output the xml data of the media node and you can then see the crop data - if you have used the standard image cropping functionality you can access the crop file path directly - there is no need to do any concatenation.

<div class="imageSlide">
```
<textarea>
<xsl:copy-of select="$images"/>
</textarea>
```
<div class="imageSliderImage">

Cheers

Nigel
Copy Link
is working on a reply...

Please Sign in or register to post replies