Copied to clipboard

Flag this post as spam?

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


  • Kerri Mallinson 113 posts 497 karma points
    Oct 15, 2014 @ 15:10
    Kerri Mallinson
    0

    Help with razor - optimisation

    Hi

    Can anyone suggest a better way to do this:

    I have a row of images and when you click on an image a div with copy about the image expands below, there are 2 rows of images and it needs to be output as eg. image 1, image 2, image 3, copy 1, copy 2, copy 3, image 4, image 5, image 6, copy 4, copy 5, copy 6 etc. at the moment I have done it using the sort order but it means duplicating the code as below:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    <div class="row">
    @foreach (var childPage in CurrentPage.Children)
    
        {
            var image = Umbraco.TypedMedia(childPage.GetPropertyValue<int>("image"));
            var title = childPage.GetPropertyValue("serviceName");
            var id = childPage.sortOrder;
            if(id < 4)              
                {
                    <div class="col-sm-3 col-xs-6">
                        <img class="img-responsive img-center client-button" rel="@id" src="@image.Url" alt="@title" /> 
                        <p class="icon-title">@title</p>
                    </div>
                }
        }
      </div>
    
    @foreach (var childPage in CurrentPage.Children)
        {
            var title = childPage.GetPropertyValue("serviceName");
            var id = childPage.sortOrder;
            var copy = Html.Raw(childPage.GetPropertyValue("copy"));
            if(id < 4)  
                {
                    <div class="row nopadding"> 
                        <div class="col-sm-12">
                            <div class="row slide-box" id="@id" style="display:none;">
                                <div class="col-sm-8 col-sm-offset-2">
                                    <h3>@title</h3>
                                    <p>@copy</p>
                                </div>
                                <div class="col-sm-12">
                                    <div class="slide-close"><span class="hidden-xs">&times;</span> <span class="visible-xs">[close]</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                }
        }
    
            <!-- #### ROW TWO -->
    <div class="row">
    @foreach (var childPage in CurrentPage.Children)
        {
            var image = Umbraco.TypedMedia(childPage.GetPropertyValue<int>("image"));
            var title = childPage.GetPropertyValue("serviceName");
            var id = childPage.sortOrder;
            if(id > 3)              
                {
                    <div class="col-sm-3 col-xs-6">
                        <img class="img-responsive img-center client-button" rel="@id" src="@image.Url" alt="@title" /> 
                        <p class="icon-title">@title</p>
                    </div>
                }
        }
      </div>
    
    @foreach (var childPage in CurrentPage.Children)
        {
            var title = childPage.GetPropertyValue("serviceName");
            var id = childPage.sortOrder;
            var copy = Html.Raw(childPage.GetPropertyValue("copy"));
            if(id > 3)  
                {
                    <div class="row nopadding"> 
                        <div class="col-sm-12">
                            <div class="row slide-box" id="@id" style="display:none;">
                                <div class="col-sm-8 col-sm-offset-2">
                                    <h3>@title</h3>
                                    <p>@copy</p>
                                </div>
                                <div class="col-sm-12">
                                    <div class="slide-close"><span class="hidden-xs">&times;</span> <span class="visible-xs">[close]</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                }
        }
    

    I have another page to do that uses the same functionality but this one has 10 rows of images so i'm looking for a better way.

    Any help would be greatly appreciated. Thanks

  • Kerri Mallinson 113 posts 497 karma points
    Oct 15, 2014 @ 15:17
    Kerri Mallinson
    0

    sorry, forgot to say, using v7.1.4

  • Mitton 22 posts 71 karma points c-trib
    Oct 20, 2014 @ 20:45
    Mitton
    0

    Here's what I would do.

    Calculate in advance how many rows there will be, and then place your columns in a nested loop.

    Your rows will be in the outer loop, and columns will be in the inner loop.

    rows = (count-1)/columns

    Then, inside your loop, refer to the children by index.

    for (var row = 0; row < rows; row++)

    {

        <div class="row">

            for (var column = 0; column < columns; column++)

            {

                index = row * columns + column

                <div>@CurrentPage.Children[index].Image</div>

                <div>@CurrentPage.Children[index].Copy</div>

            }

    }

     

Please Sign in or register to post replies

Write your reply to:

Draft