Hi Anwar,

Try this instead and see if it goes better:

<umbraco:Macrorunat="server"language="cshtml">
 @foreach (var page in Model.Children) {
 //Get the first EstatePhoto node under the current page in the loop

 var imageNode = @page.DescendantsOrSelf("EstatePhoto").First(); 
 if(imageNode.HasValue("MediaPickerAlias")){ 
 // Write the code to print the image
 }
 }
</umbraco:Macro>

/Dennis

Hi Dennis,

Many thanks for your post, I have ammended the template code as follows, but I still get the same error whenn the page runs, Error loading MacroEngine script (file: )

<%@ Master Language="C#" MasterPageFile="~/masterpages/Master.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderId="pageContent" runat="server">
 <!-- Insert "pageContent" markup here -->
<h2><umbraco:Item field="pageName" runat="server" /></h2>

    <div id="grid" class="locations group">
  
  
<umbraco:Macro runat="server" language="cshtml">
 
            <!-- For each child page of the current page -->
            @foreach (var page in @Model.Children) {
                //Get the first EstatePhoto node under the current page in the loop
                var imageNode = @page.DescendantsOrSelf("EstatePhoto").First();
                 if(imageNode.HasValue("MediaPickerAlias"))
           {
             var imageURL = imageNode.image;
                   
                //Get the number of estates
                var numberOfEstates = page.Children.Count();
            {

                <article>
                    <a href="@page.Url">
                        <!-- Use ImageGen querystring to automatically generate a thumbnail & setup fallback image -->
                        <img src="/ImageGen.ashx?image=@imageURL&height=173&width=173&crop=resize&align=center&altImage=/img/no-image.png" alt="@page.Name (@numberOfEstates)"/>
                        <div>
                            <h4>@page.Name (@numberOfEstates)</h4>
                        </div>                           
                    </a>
                </article>
            }
            }

</umbraco:Macro>

      
    </div>       
</asp:Content>
 

<asp:Content ContentPlaceHolderId="scripts" runat="server">
 <!-- Insert "scripts" markup here -->
</asp:Content>

It appears that the error is within the template, when it calls @page.DescendantsOrSelf("EstatePhoto").First(); I tried the @page.... that works in the locationarea and that fails aswell.

Now I am really confused, the following code works, but a simple for loop (see cheat sheet gives the error. This code works in the master template and when I moved it into the locations template, this is why I assumed that razor was working.

This does not work @for(var i = 0; i < 10; i++){ This is record @1}

The following code does work... why?

<umbraco:Macro runat="server" language="cshtml">
<ul>
                        @{ var homeNode = Model.AncestorOrSelf("Home"); }
                        <li><a href="@homeNode.Url" class="@Library.If(homeNode.Id == Model.Id, "selected", "")">@homeNode.Name</a></li>
                       
                        @foreach (var page in homeNode.Children.Where("Visible"))
                        {
                            <li>
                                <a href="@page.Url" class="@Library.If(page.Id == Model.Id, "selected", "")">@page.Name</a>
                           
                                <!-- If the page has child nodes (2nd level) -->
                                @if (page.Children.Where("Visible").Count() > 0)
                                {
                                    <ul>
                                        @foreach (var childPage in page.Children.Where("Visible"))
                                        {
                                            var isSelected = false;

                                            if (Model.Id == childPage.Id || (Model.Parent != null && Model.Parent.Id == childPage.Id)) {
                                                isSelected = true;
                                            }

                                            <li><a href="@childPage.Url" class="@Library.If(isSelected, "selected", "")">@childPage.Name</a></li>   
                                        }
                                    </ul>
                                }
                            </li>  
                        }
                    </ul>

</umbraco:Macro>

Hi Anwar,

I've just taken another look at your code, I think something like this will work for you (I hope). Just say if you do not know how to check alias media picker. The code is written so simply select a folder section, the media, and it will take the first picture.

<umbraco:Macro runat="server" language="cshtml">
 @{ 
    
    foreach (var page in Model.Children) {
    // This will only be printed out if page have a link to an item in the media section and with a media picker alias is called gallery 
    
    if(page.HasValue("gallery"))
        var MediaGalleryFolder = Library.MediaById(page.gallery);
        var numberOfPhotos = MediaGalleryFolder.Children.Count();
        
        // Get the first image in the folder
        
        var imagenode = MediaGalleryFolder.Children.First();
        var imageUrl = imageNode.umbracoFile;
        <article>
            <a href="@page.Url">
                <!-- Use ImageGen querystring to automatically generate a thumbnail & setup fallback image -->
                <img src="/ImageGen.ashx?image=@imageURL&height=173&width=173&crop=resize&align=center&altImage=/img/no-image.png" alt="@page.Name (@numberOfPhotos)"/>
                <div>
                    <h4>@page.Name (@numberOfPhotos)</h4>
                </div>                           
            </a>
        </article>
    
    }
    
 }

</umbraco:Macro>

/Dennis

Hi Dennis,

Thanks again for this post. I have dicovered that the macro code does not work even if I place something as simple as

@for(var i = 0; i < 10; i++){This is record @1} into it.

However on the master page the following code works even when I copy this into the locations template.

<umbraco:Macro runat="server" language="cshtml">
<ul>
                        @{ var homeNode = Model.AncestorOrSelf("Home"); }
                        <li><a href="@homeNode.Url" class="@Library.If(homeNode.Id == Model.Id, "selected", "")">@homeNode.Name</a></li>
                       
                        @foreach (var page in homeNode.Children.Where("Visible"))
                        {
                            <li>
                                <a href="@page.Url" class="@Library.If(page.Id == Model.Id, "selected", "")">@page.Name</a>
                           
                                <!-- If the page has child nodes (2nd level) -->
                                @if (page.Children.Where("Visible").Count() > 0)
                                {
                                    <ul>
                                        @foreach (var childPage in page.Children.Where("Visible"))
                                        {
                                            var isSelected = false;

                                            if (Model.Id == childPage.Id || (Model.Parent != null && Model.Parent.Id == childPage.Id)) {
                                                isSelected = true;
                                            }

                                            <li><a href="@childPage.Url" class="@Library.If(isSelected, "selected", "")">@childPage.Name</a></li>   
                                        }
                                    </ul>
                                }
                            </li>  
                        }
                    </ul>

</umbraco:Macro>

Perhaps I should try re-installing umbraco with WebMatrix? This time checking that the razor code is working before proceeding?

As a newbie, after reinstalling and checking I still got the same error, After some time thinking that Razor was not working I place the following simple code into the locations page and it worked.

<ol>
  @for (var i = 0; i < 5; i++)
  {
  <li>Line number @i</li>
  }
 </ol>

This means that if the code that I place in the template is not valid then I get the error.

Dennis, thank you very much for the above code, I am about to try it and will let you know the outcome.

Hi Dennis,

As a complete beginner I tried your script but again got the same error. I was not sure what you meant by  // This will only be printed out if page have a link to an item in the media section and with a media picker alias is called gallery but I inserted an image into the galley folder (not sure is this is correct?), see picture below.

Okay I will try to help you. 

I assumed that you have a document type for the type of the page where you want the image to display. On the page you need to have a field where the user can add a folder from the media section. If you don´t have it yet, you need to add a new proppery to the document type. To get my example to work, you can give the new field any name but the alias must be gallery to get the example to work.

The data type of the new field needs to be media picker. I have made some screenshots to make it easier to understand.

On the page it will look like this:

Then you select a folder in the media section, and the code should now display the first image.

I hope my explanation makes sense.

/Dennis

Hi Dennis,

I am most grateful for the help that you have given. I have followed your instructions by creating a new template called "textpage2". I still get the error, I have provided screenshots of what I did, not sure where I went wrong?

Hi Anwar,

Maybe is the comments in the code that gives you the error, so I have try to make a code without any comments. I hope that makes the difference. If not try to break down the code step by step and see when it goes wrong. It is always a good way to debug I think.

<umbraco:Macro runat="server" language="cshtml">
 @{ 
    
    foreach (var page in Model.Children) {
    
    if(page.HasValue("gallery"))
        var MediaGalleryFolder = Library.MediaById(page.gallery);
        var numberOfPhotos = MediaGalleryFolder.Children.Count();
            
        var imagenode = MediaGalleryFolder.Children.First();
        var imageUrl = imageNode.umbracoFile;
        <article>
            <a href="@page.Url">
                <!-- Use ImageGen querystring to automatically generate a thumbnail & setup fallback image -->
                <img src="/ImageGen.ashx?image=@imageURL&height=173&width=173&crop=resize&align=center&altImage=/img/no-image.png" alt="@page.Name (@numberOfPhotos)"/>
                <div>
                    <h4>@page.Name (@numberOfPhotos)</h4>
                </div>                           
            </a>
        </article>
    
    }
    
 }

</umbraco:Macro>

If you have acess to Umbraco TV I think that you should see this video. http://umbraco.com/help-and-support/video-tutorials/umbraco-fundamentals/razor-recipes/gallery I think is what you are trying to do.

The link above is to the old version of Umbraco TV the new verson can be found here: http://www.umbraco.tv

Hope this helps you.

/Dennis

Hi Both,

I would suggest you add a try/catch around your code or us debug mode so that you can see what the error is

E.g.

@{
    try
    {
    //do stuff
    }
   catch (Exception e)
    {
        <div style="color:red">@e.Message</div>
    }

}

Jeavon

Hi Jeavon,

Thanks for that function, I didn't know that it was possible to see the error message.

So today I learn something new thanks for that :-)

/Dennis

Hi Dennis,

No problem, it's quite useful for people who don't want to/can't enable debug mode. Do you know about debug mode?

Jeavon

Hi Jeavon,

Yup if you mean the ?umbDebudShowTrace=true thing?

http://www.yourdomain.com/?umbDebudShowTrace=true

/Dennis

Yes indeed, of course you need to set umbracoDebugMode to true in your web.config first. You will find the errors from MacroEngine issues in the trace.

Hi, thanks everyone. I used http://localhost:59660/test.aspx?umbDebugShowTrace=true and firstly found that { } were needed after the if(page.HasValue("gallery")). But now I get imageNode does not exist in the current context. As a newbie I do not know how to resolve this. Any ideas?

Hi

The reason why you get this error is because the var imagenode = MediaGalleryFolder.Children.First(); and the place where you called it from my code is imageNode I´m sorry for that:

<umbraco:Macro runat="server" language="cshtml">
 @{
  
    foreach (var page in Model.Children) {
  
    if(page.HasValue("gallery")){
        var MediaGalleryFolder = Library.MediaById(page.gallery);
        var numberOfPhotos = MediaGalleryFolder.Children.Count();
          
        var imageNode = MediaGalleryFolder.Children.First();
        var imageUrl = imageNode.umbracoFile;
        <article>
            <a href="@page.Url">
                <!-- Use ImageGen querystring to automatically generate a thumbnail & setup fallback image -->
                <img src="/ImageGen.ashx?image=@imageURL&height=173&width=173&crop=resize&align=center&altImage=/img/no-image.png" alt="@page.Name (@numberOfPhotos)"/>
                <div>
                    <h4>@page.Name (@numberOfPhotos)</h4>
                </div>                         
            </a>
        </article>
        }
  
    }
  
 }

</umbraco:Macro>

/Dennis

Hi Dennis, thanks again. I tried this code but I still get the same problem.

Hi Anwar,

Change this:

 var imageUrl = imageNode.umbracoFile;

to:

var imageURL = imageNode.umbracoFile;

/Dennis

Hi Dennis,

Good news is that I no longer get the error, thanks for this. Bad news is that the page is not recieving the image (I just get a blank screen). I think I placed it where as you instructed?

Hi Anwar, 

Sorry for the late reply.

I have just tested the code a it works like a charm. I have made some screenshots to make it easier to understand.

First you need to create a page to list the different galleries. I my example it the page with the name List galleries, It´s also on this template I added our Razor script. So to get this to work you need to have two templates one for the list of the galleries, and one template for the gallery

.

Under need the List galleries page, we are creating our galleries. I called it gallery one and two. On those pages, the user need to pick a folder from the media section, On the picture I choose the gallery one folder from the media section.

On the page i will look like this:

It print the first image out for each gallery, and the name of the gallery, and the total of pictues in each gallery.

I hope with those screenshots, it more easier to understand for you.

/Dennis

Hi Dennis,

You will have to excuse me, I am just a beginner. I have tried to follow your instruntions and screenshots but the localhost does not even have a page.

1. I created a fresh install of Webmatrix and Umbraco (empty site)

2. I installed ImageGen from the developer tab.

3. I created a textpage document type, just a folder type. I created gallery one and gallery two documents as media pickers

4. I created the templates Gallery and ListGallery and pasted your macro code into the List Gallery

5. I created Content List galleries and because I created the document types gallery one and gallery two I was able to created these under this folder.

6. In Media I created folders gallery one and gallery two and placed images within the folders

7. In Content I picked the media types and then published the entire site ( but there is no home page)

I realise that you have gone to great efforts in providing me with this information and I am most grateful. However, as a complete beginner, I will need further guidance if I am to get your code to execute. Below are screen shots to help confirm how I went about following your instructions.

Hi Anwar, what is the alias of your property shown as "Pick a gallery"?

Jeavon

Hi Jeavon,

Not sure if this is what you are asking me but both galleries setup with this alias:

Can you please post a screenshot of the Textpage document properties also?

Also, to check you are viewing the "list galleries" page?

Hi Anwar,

It is totally okay, we've all been beginners, and it's good to see you don´t give up, but keep working with Umbraco.

1. Created a fresh install of Umbraco example by using Webmatrix (You have done that).

2. Install ImageGen from the developer tab (You have done that).

3. Then create a document type for the page that should show lists of galleries, and a document type for a gallery item (In my example ListGallery and Gallery). When you do this it will automaticly creates templates for these. On the document type for each gallery item add a proppery named Pick a gallery and with a alias of gallery.

4.When you have created the ListGallery document type go to the structure tab, and check the allow at root. When you have created the Gallery document type go back to the ListGallery choose structure again, and set the tick in Gallery. Like this:

5. Go the ListGallery template and paste the code into the template.

6. In Media section create folders gallery one and gallery two and placed images within the folders (You have done that).

7. Go the the content selection right click on the Content, choose create, and pick then ListGallery from the dropdown list.

When you have created this you can right click on this ListGallery item and create a gallery item.

On this Item you can pick a gallery from the media section (The media picker).

I hope this make sense, I have uploaded my example site to a domain.http://example.dennisaaen.dk/

If you want a login just send me an email at denaaen (at) gmail.com, maybe it´s more easy to see how it´s done and then you can play with it. 

I will also recommend you to take a look at these videos.

http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/sitebuilder-introduction/document-types/

http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/sitebuilder-introduction/templates/

http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/sitebuilder-introduction/stylesheets.aspx

http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/sitebuilder-introduction/what-are-macros.aspx

http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/developer-introduction/macro-parameters/

These links is to video at the old version of Umbraco TV, but the principles of the video I have linked to is the same as the new version of Umbraco.tv this can be found here: http://www.umbraco.tv

/Dennis

Hi Dennis,

Many many thanks and thanks for your patience.

Success, with your instructions above I have been able to get the code to execute. The code was slightly changed a couple of times during the post, therefore for any subsequent readers I have included a copy below.

<umbraco:Macro runat="server" language="cshtml">
 @{
  
    foreach (var page in Model.Children) {
  
    if(page.HasValue("gallery")){
        var MediaGalleryFolder = Library.MediaById(page.gallery);
        var numberOfPhotos = MediaGalleryFolder.Children.Count();
          
        var imageNode = MediaGalleryFolder.Children.First();
        var imageURL = imageNode.umbracoFile;
        <article>
            <a href="@page.Url">
                <!-- Use ImageGen querystring to automatically generate a thumbnail & setup fallback image -->
                <img src="/ImageGen.ashx?image=@imageURL&height=173&width=173&crop=resize&align=center&altImage=/img/no-image.png" alt="@page.Name (@numberOfPhotos)"/>
                <div>
                    <h4>@page.Name (@numberOfPhotos)</h4>
                </div>                         
            </a>
        </article>
        }
  
    }
  
 }

</umbraco:Macro>

During this post and including the knowledge about debug (?umbdebugshowtrace=true - after setting debug true in webconfig) I was able to find some problems. I was able to get most of the problems fixed, but I could not complete the tutorial because I did not understand how to get the JSON script working in the master template. I have opened a seperate post about this.

Hi Anwar,

I am so happy you got success, with getting the galleries listed, and I'm glad I could help you to get it to work.

/Dennis

Hello, I have a code in Umbraco 6 to display Image on my website and suddenly it was not working:

getting error "Error loading MacroEngine script (file: )"

"/////////

@member.name

@member.roleOfMember

@member.describeMember

Could you please help me with the image code from media picker. I have used src="@Library.MediaById(@member.memberImage).Url" and now it's not working.

Please provide me the code ASAP as it's failing while opening the page.

is working on a reply...