Hi Tony,

I have some questions before I think I can help you. You have two foreach loops, would you like to print the summary and image for the page, and the apages. or is in the box makup where you want to print out the value of summary and image

<div class="box">
    <div class="section">
        <span style="line-height: 1.4em; font-size: 16px; font-weight: bold;">@page.Name</span>
    </div>

    <div class="section">
        <img src="@image" alt=""/>

        <p>@summary</p>
        <p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">Read more...<span class="arrow"></span></a></p>
    </div>
</div>

Looking forward to hear from you.

/Dennis

Hi Dennis

I have the 2 foreach loops to get down to the grandchild level. The @summary works ok it's just the @image that doesn't.

Thanks.

Tony

Hi Tony,

Okay what if you do something like this to get the image

@if(apage.HasValue("mediaPikerAlias")){ 
    var dynamicMediaItem = Umbraco.Media(apage.mediaPickerAlias); 
    <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name"/> 
}

You can see the documentation to get an image from a media picker here: http://our.umbraco.org/DOCUMENTATION/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors/Media-Picker look under the example called Dynmic. The HasValue checks if the media picker for the page has an image attracted

Hope this helps,

/Dennis

Hi Dennis

OK. I tried

@if (apage.HasValue("mediaPikerAlias")){
                    var dynamicMediaItem = Umbraco.Media(apage.mediaPickerAlias);}
               

in the foreach loop and

<img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name"/>

and this in the div with the <p>@summary</p> and it complains that a } is expected. But } isn't missing....

Tony

Hi Tony,

Okay, I had another look at your code and I think I have managed not get the error with this code. And I assume that it´s the box that you should get for each children of the page.

@{  
    
    <div class="column w220 gut30">
        @foreach(var page in CurrentPage.Children.Where("Visible && DocumentTypeAlias == @0 ||DocumentTypeAlias == @1 || DocumentTypeAlias == @2 || DocumentTypeAlias == @3 || DocumentTypeAlias == @4 || DocumentTypeAlias == @5", "Cafe", "Chapter", "Stuchberystaffbriefing", "News", "Learninganddevelopment", "Services" )){
        
            HtmlString summary = new HtmlString("");
            dynamic image = null;
                
            foreach(var apage in page.Children){ 
                summary = apage.summary;
                
                <div class="box">
                    <div class="section">
                        <span style="line-height: 1.4em; font-size: 16px; font-weight: bold;">@page.Name</span>
                        
                    </div>
                    <div class="section">
                        @if (apage.HasValue("MediaPickerAlias")){                                         
                            var dynamicMediaItem = Umbraco.Media(apage.MediaPickerAlias);
                            <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name"/>
                        }
                        
                        <p>@summary</p>
                        
                        <p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">Read more...<span class="arrow"></span></a></p>
    
                    </div>

                </div>
            }
        }
        
        
    </div>
}

In the example above, remember to change the "MediaPickerAlias" so it match your alias for the media picker property on the page type where you are setting the image, and summary. You can find the alias on the document type.

Hope this helps,

/Dennis

Hi Dennis

This is much closer all right! It is displaying all the Cafe posts which are the grandchildren of the Homepage, and the children of Cafe Pages. This is the original code that worked when the image was included in the @summary. Before the @summary was a RTE and now I have added in a Media picker in the Content to separate the picture from the summary. I hope this makes sense. Ideally I want to put the image to the left when it displays. One step forward and two steps backwards!!!

<div class="column w220">
        @foreach(var page in CurrentPage.Children.Where("Visible && DocumentTypeAlias == @0 || DocumentTypeAlias = @1 || DocumentTypeAlias = @2 || DocumentTypeAlias = @3 || DocumentTypeAlias = @4", "Charity","Chaucerfoundation", "Whitstablestaffbriefing", "Information", "Sportsandsocialclub"))
        {
            HtmlString summary = new HtmlString("");
            foreach(var apage in page.Children)
            {
                [email protected];                                                  
            }
            <div class="box">
                <div class="section">
                    <span style="line-height: 1.4em; font-size: 16px; font-weight: bold;">@page.Name</span>
                </div>
                <div class="section">
                    <p>@summary</p>
                    <p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">Read more...<span class="arrow"></span></a></p>
                </div>
            </div>
        }   
    </div>

There are two columns and this is from the other one hence the Document names are different.

Thanks.

Tony

Hi Dennis

Sorry to be swamping you in code, but I made a little change

<div class="column w220 gut30">
        @foreach(var page in CurrentPage.Children.Where("Visible && DocumentTypeAlias == @0 ||DocumentTypeAlias == @1 || DocumentTypeAlias == @2 || DocumentTypeAlias == @3 || DocumentTypeAlias == @4 || DocumentTypeAlias == @5", "Cafe", "Chapter", "Stuchberystaffbriefing", "News", "Learninganddevelopment", "Services" ))
        {
       
            HtmlString summary = new HtmlString("");
            dynamic image = null;
           
               
            foreach(var apage in page.Children)
            {
                summary = apage.summary;
                if (apage.HasValue("image"))
                        {                                        
                            var dynamicMediaItem = Umbraco.Media(apage.image);
                            <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name"/>
                        }
            }
             
                <div class="box">
                    <div class="section">
                        <span style="line-height: 1.4em; font-size: 16px; font-weight: bold;">@page.Name</span>
                       
                    </div>
                    <div class="section">
                        <img src="@image" align="left" height="100" width="200">
                        <!--<div id="photo" height:100; width:200>@image</div> -->
                        <p>@summary</p>
                       
                        <p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">Read more...<span class="arrow"></span></a></p>
   
                    </div>

                </div>
           
        }
       
       
    </div>
Only problem is it seems to be showing me the last 2 images. Come to think of it they are the only 2 posts since I added the Media to the Document type. The image sizes are huge, I can't figure out how to control them down!

Thanks.

Tony

is working on a reply...