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">×</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">×</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.
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:
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
sorry, forgot to say, using v7.1.4
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>
}
}
is working on a reply...