Hi Desley,

You have different options here.

1. The first option is to create a slideshow container documentype and a slideitem documenttype. So you could make a folder beside your home node and make it posible for the user to create elements of the slideshow container documenttype in the folder and under this container the user should be able to add the slideitem where you can add the picture for each slide. After that you need to write some XSLT get the data from the item, and pull out each slideitem.

To get XML from specific node. http://our.umbraco.org/wiki/reference/umbracolibrary/getxmlnodebyid-%281%29

<xsl:variablename="node"select="umbraco.library:GetXmlNodeById(1979)"/>

The second method is faster, the user just pick a folder from the media library and then we will pull out all the images in this folder. So each image will be a slide.

I have made a example for the method two, where the user are picked a folder with image.

<?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:param name="currentPage"/>
  <xsl:template match="/">

    <xsl:variable name="images" select="$currentPage/sliderimage1"/>

      <xsl:variable name="mediaItems" select="umbraco.library:GetMedia($images, true())"/>

      <xsl:for-each select="$mediaItems/Image">
        <xsl:variable name="picFile" select="umbracoFile"/>
        <div class="thumb">

    <!-- this can be used to link to the image -->

          <xsl:element name="a">
            <xsl:attribute name="href">
              <xsl:value-of select="./umbracoFile" />
            </xsl:attribute>

        <!-- the rel and id attribute can be used to fire fancybox -->

            <xsl:attribute name="id">
              <xsl:text>gallery</xsl:text>
            </xsl:attribute>

            <xsl:attribute name="rel">
              <xsl:text>gallery</xsl:text>
            </xsl:attribute>

            <img>
              <xsl:attribute name="src">
             
                <xsl:value-of select="$picFile"/>
               
              </xsl:attribute>
            </img>

          </xsl:element>

        </div>

      </xsl:for-each>

  </xsl:template>
</xsl:stylesheet>

When you work with images i Umbraco I will recommened you to take a look at the ImageGen package.http://our.umbraco.org/projects/website-utilities/imagegen

With this package you can automatically resize photos, screenshots, and images from icon to thumbnail to full-screen retina sizes.

If you choose to use the ImageGen package you have to make some small changes to the piece of code above. You have to change this part:

<img>
  <xsl:attribute name="src">
     <xsl:value-of select="$picFile"/>
   </xsl:attribute>
</img>

To:

<img>
    <xsl:attribute name="src">
        <xsl:text>/ImageGen.ashx?image=</xsl:text>
        <xsl:value-of select="$picFile"/>
        <xsl:text>&amp;width=150&amp;height=98%&amp;constrain=true</xsl:text>
    </xsl:attribute>
</img>

Hope this helps, and make sense. Or just keep asking and I will try to help you.

/Dennis

Sorry I can't get the above code to work for me but that is most likely my fault.

I have the following Multiple Media Picker connected to my 'Home'. Here I want to be able to upload the images. The alias of the Multiple Media Picker is multiMediaPicker.

For the carrousel the images need to be in a 'li' in the following structure.

<ul class="slider">
        <li>
            //image 1
        </li>
        <li>
            //image 2
        </li>
        <li>
            // image 3
        </li>
    </ul>

I hope this makes it a bit clearer.

Sorry double post.

Does anyone know how I can make this work or get the code above to work?

If I understand it right the code above tries to get all images out of the folder in my Media section? I have a folder called Slider with the images in it but if I try to point it there (change the sliderimage1 to Slider) it says "Value was either too large or too small for an Int32." aka it can't find anything.

Help is greatly appreciated.

Okay got it to work!

@inherits Umbraco.Web.Macros.PartialViewMacroPage

        @if (Model.Content.HasValue("MultiMediaPicker"))
{
    var imagesList = Model.Content.GetPropertyValue<string>("MultiMediaPicker").Split(new string[] { "," StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    var imagesCollection = Umbraco.TypedMedia(imagesList).Where(x => x != null);

    foreach (var imageItem in imagesCollection)
        {   
           <li>
            <img src="@imageItem.Url" />   
           </li>   
        }                                                               
}

Thanks for the help Dennis :)

For any future users who come by this forum with the same question, I ended up using the following code because I had a path-issue with the above code:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@{
var homepage = Model.Content.AncestorOrSelf(1);

if (homepage.HasValue("MultiMediaPicker"))
{
    var imagesList = homepage.GetPropertyValue<string>("MultiMediaPicker").Split(new string[] {","}, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    var imagesCollection = Umbraco.TypedMedia(imagesList).Where(x => x != null);

    foreach (var imageItem in imagesCollection)
    {
        <li>
            <img src="@imageItem.Url" />
        </li>
    }
  }
} 

The issue I had is explained here

is working on a reply...