Developer forum

Hi Jens

You can use a 'mod' operator to find out how many placeholders you need. So given you have a variable that is an integer, say 'i', you can do like this: x=i%3 and x will then hold the remainder  that the variable 'i' needs to be dividable by 3.

So something like this:

int listCount = 9;
int placeHolderNeededCount = 0;
if(listCount%3 == 0){
//You have something that is dividable by 3
}else{
//You have something that is NOT dividable by 3
placeHolderNeededCount = listCount%3;
}

//placeHolderNeededCount = 0, if listCount=9
//placeHolderNeededCount = 2, if listCount=10 (because 10+2=12 which is dividable by 3)
//placeHolderNeededCount = 1, if listCount=8 (because 10+1=9 which is dividable by 3)

etc.

BR Nicolai

Hi Nicolai
Thanks for the advice, i came up with this solution by trial and error :)

@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
@using System.Web;
@using System.Text.RegularExpressions
@using System.Linq;


@{
var items = GetLoop("ItemPublisher:Items.List");
var title = "";

int totalItems = items.Count;
int itemsPerRow = 3;
int remainders = totalItems % itemsPerRow;
int placeholders = itemsPerRow - remainders;
int index = 0;
}


<div class="grid">


@*Items loop*@

  @foreach(var i in items){

    title = !string.IsNullOrEmpty(i.GetString("ItemPublisher:Item.Title")) ? i.GetString("ItemPublisher:Item.Title") : "Title";
    var imagepath = !string.IsNullOrEmpty(i.GetString("ItemPublisher:Item.Image.ImagePath")) ? i.GetString("ItemPublisher:Item.Image.ImagePath") : "/Files/Images/placeholder.jpg";

    <div class="grid__col-md-4">
      <h4>@title</h4>
      <img src="/Admin/Public/GetImage.ashx?width=400&height=300&crop=0&Compression=75&image=@imagepath"/>
    </div>

}


  @*Placeholders loop*@

  @while(index != placeholders)
  {
    if(placeholders != itemsPerRow)
    {
      <div class="grid__col-md-4 placeholder">
        <h4 class="">Placeholder</h4>
        <div class="image__wrapper layered-image">
          <img src="/Admin/Public/GetImage.ashx?width=400&amp;height=300&amp;crop=0&amp;Compression=75&amp;image=/Files/Images /placeholder.jpg" class="image">
          <img src="/Files/Images/pictogram-med-navn.svg" class="image" style="height:50%">
        </div>
      </div>
    }

  index++;

}
</div>

Any performance advice?

Thanks for sharing.

Looking at it, it should be ok. You store your loop in a variable which is good, and the amount of items in the loop is probably not a problem in relation to performance.

So looks good!

BR Nicolai