I'm working on a navigation and for some reason, I can't increase a variable.
<ul id="menu">
<li>
Home
<div class="dropdown_2columns">
<!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
#foreach (var mainNode in rootNode.Children())
{
int childCount = 1;
int numChildren = mainNode.Children().Count();
int num = 0; #*<-------------- Num variable*#
<li>
#mainNode.Name
<div id=main-#num class="dropdown_5columns"> #*<----------Using the variable here*#
<!-- Begin 2 columns container -->
<div class="col_5">
<h2>#mainNode.Name</h2>
</div>
#* note if you want ALL descendants change .Children to .Descendats*#
#foreach (var childNode in mainNode.Children())
{
// if first node or new set of three open the div and ul #: is used to stop razor trying to
// "balance" the tags
if (childCount == 1 || (double)childCount % 3 == 1)
{
#:<div class="col_1">
#:<ul>
}
#childNode.Name
// close the div and list if this is either a multiple of 3 or the last one
if ((double)childCount % 3 == 0 || numChildren == childCount)
{
#:</ul>
#:</div>
}
childCount++;
num++; #*< -----------Increasing the varable here*#
}
</div>
</li>
}
</ul>
}
The problem is that the varable doesnt increase after looping. The div id is always main-0 even after looping multiple times. Does anyone know the cause of this?
"Num" is placed inside the mainNode loop, so it's always set to 0.
You have to move the num variable outside the mainNode loop and it should work :-)
Related
Hi I am new user to Bootstrap (and coding), I have some looped content which takes an image and text for each loop (of different image heights and text lengths) to create 4 columns. But the result does not flow how I would like it too - see image example [image shows how img/text layout in 4 columns] Any help or advice greatly appreciated!
Here's the code example;
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-sm-3">
<some loop code which gets 1 image and 1 set of text>
</loop>
</div>
</div>
You need to start a new row every fourth iteration of your loop..
$i = 0; //Count
//Start your loops
if($i % 4 === 0) {
echo '</div><div class="row">';
}
++$i;
I agree that you should start with a row every 4th turn but you should also close the end tag of the div properly
Here is the sample code
var i = 0;
for(your logic){
if( i%4 === 0 {
Append <div class="row">
}
elseif(i%4 !== 0 && i%4 !==3){
Append the following code
<div class="col-sm-3">
The image should be here
</div>
}
else if( i%4=== 3){
Append </div>
}
}
I have a selection generated from the children of the current page. Within that selection (let's call it Fruit) I have items and each item has a fruitType.
This code doesn't work:
#{
var selection = CurrentPage.Children("fruit").Where("Visible");
}
<ul>
#foreach(var item in selection){
#if(#item.fruitType == "Apple"){
<li>
#item.Name<br/>
#item.fruitName<br>
#item.fruitType<br>
#if (item.image != null && !(item.image is Umbraco.Core.Dynamics.DynamicNull))
{ var m = Umbraco.Media(item.image);
<img src="#m.Url" alt="Picture of #item.Name" />
}
</li>
}
}
</ul>
What I'm trying to do is to only list the items with a fruitType of "Apple". This value is selected from a "fruitType" dropdown list and I've tried using both the numeric and string values that Umbraco uses from Dropdown datatypes.
It all works perfectly if I remove the if conditional except that it displays all fruit types.
Any suggestions?
sigh Just one too many declarations..
Turns out neither the if nor the item references need the additional # declaration in front of it so the correct code looks like:
#{
var selection = CurrentPage.Children("fruit").Where("Visible");
}
<ul>
#foreach(var item in selection){
if(item.fruitType == "Apple"){
<li>
#item.Name<br/>
#item.fruitName<br>
#item.fruitType<br>
#if (item.image != null && !(item.image is Umbraco.Core.Dynamics.DynamicNull))
{ var m = Umbraco.Media(item.image);
<img src="#m.Url" alt="Picture of #item.Name" />
}
</li>
}
}
</ul>
I want to display 3 Cells in a row and then create row <tr> dynamically for remaining cells. When I searched for this logic, I am getting same answer from multiple articles about using modulo and it seems working for evryone but I'm not getting desired output. What am I missing here?
Code:
<table>
#for (var i = 0; i < deliveryProvider.DeliveryTagInfo.DeliveryProviderTagList.Count; i++)
{
var deliveryTag = deliveryProvider.DeliveryTagInfo.DeliveryProviderTagList[i];
if ((i%3) == 0) //Create new row for 4th item
{
#:<tr>
}
<td>
<div class="input-element checkbox">
#Html.CheckBoxFor(x => x.DeliveryProviderList[j].DeliveryTagInfo.IsDeliveryTagSelectedList[i], new
{
name = deliveryTag,
id = deliveryTag
})
<label for="#deliveryTag">
<span></span>#deliveryTag</label>
</div>
</td>
if ((i%3) == 0)
{
#:</tr>
}
}
</table>
Output:
Expected Output:
Test1
ALCOHOL SPILLABLE COLD_BAG
HOT_BAG HEAVY SIZE
Test2
abc pqr xyz
Some of the problem code is in your closing tag.
if ((i%3) == 0)
{
#:</tr>
}
On your first iteration, i%3 is == 0, so you put a closing tag on your first statement. Essentially you are only creating <tr> tags on every third one.
Here is an example of how you could remedy this:
var listCount = 11;
for (var i = 0; i < listCount; i++)
{
if (i%3 == 0)
{
#:<tr>
}
//Add Checkboxes
//Closing Tag
if (((i+1) % 3 == 0 )|| i == listCount - 1)
{
#:</tr>
}
}
Closing tag Explained...
For the first condition of the closing tag:
(i+1) % 3 == 0 )
Since the item has been added, we check to see if it is the third one- by using i+1, we will know how many items
are in the row and we can close it if it is.
For the second condition:
i == listCount - 1
We also need to account for if it is the last item. If the list only has 2 items for example, we still need to close the row.
I have the following code, and it displays the listed text and the pagination at the bottom all fine. But when I try to get the images from the child page into the list it errors for me. Any ideas why?
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "SiteLayout.cshtml";
}
<div role="main" id="main">
<div id="blogPageFeatures">
<!-- loop through all of the child pages (blog posts) and grab data to output as a summary -->
#{
var pageSize =3;
var page =1;int.TryParse(Request.QueryString["page"],out page);
var items =Model.Content.Children().Where(x => x.IsDocumentType("BlogArticle")).OrderByDescending(x => x.CreateDate);
var totalPages =(int)Math.Ceiling((double)items.Count()/(double)pageSize);
if(page > totalPages)
{
page = totalPages;
}
else if(page <1)
{
page =1;
}
}
#foreach(var item in items.Skip((page -1)* pageSize).Take(pageSize))
{
<a href="#item.Url">
<!-- The next image line is where it errors -->
<img src="#Umbraco.Media(item.Children.blogArticleImage).Url">
<h2>#item.Name</h2>
<p class="blogTileDate">#item.CreateDate.ToString("dd/MM/yy")</p>
</a>
}
<div class="clearfix"></div>
<!-- Pagination START -->
#if(totalPages >1)
{
<div class="pagination">
<ul>
#if(page >1)
{
<li>Prev</li>
}
#for(int p =1; p < totalPages +1; p++)
{
var active =(p == page)?" class=\"active\"":string.Empty;
<li#(Html.Raw(active))>
#p
</li>
}
#if(page <totalPages)
{
<li>Next</li>
}
</ul>
</div>
}
<!-- Pagination END -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
You are getting Model.Content.Children, which is a strongly typed collection of IPublishedContent objects. You are then calling item.Children.blogArticlImage, which is not going to work, as you're trying to get the a property on the children of the item, not a property of the item itself. You're also trying to use dynamic syntax, which won't work on the strongly typed objects. Try changing your image code to:
<img src="#Umbraco.TypedMedia(item.GetPropertyValue<int>("blogArticleImage")).Url">
That should do te trick, one thing to note is that if an item doesn't have an image set, or the image that has been selected has been deleted, it'll throw an error. A more robust approach would be something like this:
var imageSrc = "ADD DEFAULT IMAGE PATH HERE";
var media = Umbraco.TypedMedia(item.GetPropertyValue<int>("blogArticleImage"));
if (media != null && !string.IsNullOrEmpty(media.Url))
{
imageSrc = media.Url;
}
<mig src="#imageSrc">
i try without luck to insert 6 images into 2 lines,
the problem is that the line number 2 break the last 2 images and push them down.
i'm using Umbraco and bootstrap 3.
here is my code
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "InnerPage.cshtml";
}
#section slider
{
#{Html.RenderPartial("ImageSlider");}
}
#{
<!-- PROGRAM PAGE -->
<script src="js/script.js"></script>
<div class="caption-button caption-gray left-top" style="font-size:14px;">UPCOMING EVENTS</div>
<div class="padding-top-60">
<div class="row row-lg-height">
<div id="eventCarousel" class="carousel slide vertical" >
<div class="carousel-inner">
#{
var content = Umbraco.Content(1122);
int itemsCount = content.Children.Count();
int sliders = itemsCount / 6;
for (int i = 0; i <= sliders; i++)
{
var items = content.Children;
if (i == 0)
{
#Html.Raw("<div class=\"item active\">")
items = content.Children.Take(6);
}
else
{
items = content.Children.Skip(i * 6).Take(6);
#Html.Raw("<div class=\"item\">")
}
foreach (var childContent in items)
{
var contentService = ApplicationContext.Current.Services.ContentService.GetById(int.Parse(childContent.Id.ToString()));
var title = childContent.Name.ToString();
var image = Umbraco.Media(contentService.Properties["Thumbnail"].Value.ToString());
var description = contentService.Properties["shortDescription"].Value.ToString();
var img = image.Url.ToString();
<div class="col-lg-4">
<img src="#image.Url" class="media-object pull-left img-responsive" />
<h1 class="media-heading" style="color:#606060;">#title</h1>
<div style="padding:0px 5px; ">#MvcHtmlString.Create(#description)</div>
</div>
}
#Html.Raw("</div>")
}
}
</div>
</div>
</div>
</div>
<a class="caption-button caption-red right-bottom" href="#eventCarousel" data-slide="next">MORE</a>
}
i attached 2 images so you can see what firebug showing to me and what happened on the screen.
PLEASE HELP ME ! I am breaking my head 2 days already and it's wasting my time..
What do i do wrong ??
I think your code is a littlebit difficult. If you use another approach you will be able to debug much easier.
Try some approach like this:
#{
var allNodesToLoop = Umbraco.Content(1122).Children;
}
#foreach(var nodegroup in allNodesToLoop.InGroupsOf(2) {
<div class="row">
#foreach(var item in nodegroup) {
<div class="col-md-4">
#item.Name
<!-- and other stuff you want to render in this grid cell -->
</div>
}
</div>
}