Hi Olst,

The key point to remember with umbraco is that no mark up gets changed at all, so the basic concept is:

1) Get your Gallery / slider working in HTML within your Umbraco site (just hard coded and using static images etc.)

2) Write some XSLT / Razor macros to pull data from Umbaco which mimics your mark up exactly so effectivley swapping out the static html for dynamic Umbraco values.

There is no 'Wizard' to do this as every image gallery is different as if every Umbraco solution.

Make sense?

Rich 

Hi rich, and thanks for the reply,

let's break this down to pieces.

I've been reading some material about using razor in umbraco...

so, I created a document type called ImageSliderItem, which has the properties image and teaser text.

then I created another document type called ImageSlider which has a child document type - ImageSliderItem.

How would I reference the ImageSliderItem properties in an Xslt file ?

I've seen this example:

 <xsl:variable name="sliderNode" select="$currentPage/parent::*/child::*[@level=1]"/>

but how do I format the select in my case ?

Which plugin you using for image slider ?

I'm using estro slider.

my Xslt is as follows:

<!-- start writing XSLT -->
  <xsl:variable name="sliderNode" select="$currentPage/parent::*/child::*[@level=1]"/>

<div id="home-carousel">
  <div class="peKenBurns" data-mode="swipe" data-logo="disabled" data-shadow="disabled"
         data-thumb="fixed" data-controls="inner" data-autopause="image" data-captions="disabled">
    <xsl:for-each select="$sliderNode/child::MediaSlider">
      <div id="CarouselItem" runat="server" class="peKb_active" data-delay="5" data-align="center"
             data-thumb="{imageSmall}" data-transition="flyBy">
        <img src="{image}" />
        <h1><xsl:value-of select="teaserText" /></h1>
      </div>
    </xsl:for-each>
   </div>
</div>

</xsl:template>

I've created a top level content node called Homepage Image Slider,

where my editors can upload the actual images and content.

Now, how do I use this specific image slider (with its respective images) in the content template ?

Hi Mr A,

I've used your code and modified it a bit for my needs, but I get an error message in the page, saying object reference not set to an instance of an object.

I've checked it and the loop runs only 1 time, maybe I need to reference the children's children? What am I doing wrong ?

 let me just say that the slideshow content item i've created for uploading the images is not yet published (if that matters).

@using umbraco.MacroEngines
@{
    
    DynamicNode node = new DynamicNode(1068); //nodeid of slideshow content item

    int i = 0;     
}

<div id="home-carousel">
@foreach (var page in node.ChildrenAsList)
{
    <div id="[email protected]()" runat="server" class="peKb_active" data-delay="5" data-align="center"
           data-thumb='page.GetProperty("smallImage").Value'
           data-transition="flyBy">
         <img id="[email protected]()" src='page.GetProperty("image").Value' alt='@page.GetProperty("caption").Value' />
         <h1>@page.GetProperty("teaserText").Value</h1>
    </div>
                   
    i++;
}
</div>

can you post your navigation tree , also have you got properties image and caption in your document type. What version are you using ?

I'm using version 4.7, my content tree is :

Content

-> Simple Site (document type is Homepage) ----> some more pages beneath.

-> Homepage Image Slider (of type ImageSlider) ---> Item1, Item2, Item3, Item4 (all of type ImageSliderItem)

ImageSliderItem has the following properties:

Image of type upload, ImageSmall of type upload, TeaserText of type Textbox Multiple

p.s. I changed the "caption" reference in the razor code to "teaserText", but it still didn't help.

Thanks, we're close to solving it ....

Can you send the link for estro slider plugin so that i can reproduce and test on my test website .

The above code works fine for the slider on my test website which is (www.steelescarpets.co.uk)

I guess this is a paid slider , cant find a free demo version of it .Have you bought this slider looks oryt

As it turns out, I had to publish the ImageSlider content item before I could reference it in razor,

otherwise it just would not get a reference to that node.

So the final code is;

@foreach (var page in node.ChildrenAsList)
{
    <div id="[email protected]()" runat="server" class="peKb_active" data-delay="5" data-align="center"
           data-thumb='@page.GetProperty("imageSmall").Value'
           data-transition="flyBy">
         <img id="[email protected]()" src='@page.GetProperty("image").Value' alt='@page.GetProperty("teaserText").Value' />
         <h1>@page.GetProperty("TeaserText").Value</h1>
    </div>
                   
    i++;
}

Thanks again for your help.

p.s. it's a great slider plugin, I bought it and am using it in my site...

Glad to hear it worked out , can you accept the answer so that other users can find it easy in future

Hi,

I have done this as follows and working for me.

Tree Structure

Content

  Image

ImageGallery(from ImageGallery_Master Doc Type )

Image1.(from ImageGallery_Item Doc Type )

Image2(from ImageGallery_Item Doc Type )

Image3(from ImageGallery_Item Doc Type )

Macro Script As follows Search Gallery Item first then take Photo and PhotoText of particular Node 

@inherits umbraco.MacroEngines.DynamicNodeContext

@{    

    var root = Model.AncestorOrSelf();

   var nodes = root.Descendants("ImageGallery_Item");

    foreach (var node in nodes)

    {

     <div class="product-wrap">

                <div class="photo-bor">

                    <img [email protected]("Photo") width="204" height="121" alt="@node.GetProperty("PhotoAltText")" /></div>

                <div class="photo-sadow">

                </div>

                @node.GetProperty("PhotoText")

            </div>

    }

}

is working on a reply...