I've media picker in Umbraco 8 and I want to display image in my cshtml page.
#inherits Umbraco.Web.Mvc.UmbracoViewPage
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<body>
<section class="section">
<div class="page-header-box">
<img src="images/Leadership.png" />
</div>
<div class="ld-content-box gradientbackground">
<div class="inner-container">
<h3 class="ip-title">Leadership</h3>
<ul class="aboutus-leadership-listing">
#foreach (var childPage in Model.Children())
{
<li data-aos="fade-up">
<div class="abll-image-box">
#{
var leaderImage = childPage.Value<IPublishedContent>("leaderImage");
}
But I am getting error :
The type or namespace name 'IPublishedContent' could not be found (are
you missing a using directive or an assembly reference?)
I don't it is issue because of Umbraco V8 or is there anything missing?
UPDATED:
IPublishedContent is defined in the Umbraco.Core.Models namespace.
You should have an entry
<add namespace="Umbraco.Core.Models" />
in the system.web.webPages.razor/pages/namespaces section of Views\Web.config.
IPublishedContent moved again, now it resides in Umbraco.Core.Models.PublishedContent:
using Umbraco.Core.Models.PublishedContent;
For namespace and Library
#using Umbraco.Core.Models
For Model
#model Umbraco.Core.Models
For Iterate the list on Razor Page (You Have to use foreach loop for access the list items)
Related
How to check the empty list on Sightly?
I wanted to prevent render the item-list DIV if there was no item on itemImgaeList. But it returns me one (1) always if there were no items while trying with -
LIST_SIZE_PRINT = "${container.itemImgaeList.size}"; // retrun 1
HTL:
<div data-sly-test="${container.itemImgaeList.size > 1}">
<sly data-sly-list.imageList="${container.itemImgaeList}">
<div class="item-list">
<picture>
<img alt="${imageList.qlImageText}" src="${imageList.qlImagePath}" />
</picture>
</div>
</sly>
</div>
Any help?
data-sly-list can be used for implementing the above requirement of rendering the list elements only when the list is not empty.
The use of 'data-sly-test' is not required for checking a list, as the check for emptiness is done inherently by data-sly-list.
Here is a working example using data-sly-list:
<div class="item-list" data-sly-list.item="${container.itemImgaeList}">
<picture>
<img alt="${item.qlImageText}" src="${item.qlImagePath}" />
</picture>
</div>
More information:
https://www.aemquickstart.in/2016/08/htl-sightly-notes.html
I'm having trouble posting my wysiwyg content to my controller in asp.net core. I can't seem to get any value from the form editor. The value for the Content property comes to the controller as null. I'm using the summernote form editor to handle my richtext box editor.
Here is my code
public class Editor
{
public int EditorId { get; set; }
public string Content { get; set; }
}
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Editor editor)
{
if (ModelState.IsValid)
{
_context.Add(editor);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(editor);
}
View:
<h2>Create</h2>
<h4>Editor</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Content" class="control-label"></label>
<textarea asp-for="Content" id="summernote" name="editordata"></textarea>
<span asp-validation-for="Content" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
<script>
$(document).ready(function () {
$('#summernote').summernote();
});
</script>
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
}
#section Styles{
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
}
So the issue is when I post the form it's gets to the controller but the content comes over as null. I'm not sure how to post the content
Here are my thoughts, I'm thinking i'm missing a some attribute that allows html to come over the wire to my controller, but all the reserach i've found is that asp.net core doesn't require that. Or I need to handle this type of request in the middleware pipeline, but that doesn't make much sense since it's just html strings i'm sending over the wire to the controller.
It looks like the top of your view was not left out, I assume you have Editor as model.
The problem is on your text area you are using both asp-for and then setting the id and name to something that doesn't match your model property.
You should just use asp-for and let it decide the id and name instead of adding those yourself.
What is really getting posted is a string named editordata because you used that name on the textarea. remove that and it will be named Content to match the property of the model
You also don't need the [Bind] attribute shown in the controller action in your screenshot.
I have been sitting with the same issue and was able to resolve it due to Joe's answer!
Could I suggest working on the summernote class for the text area instead of using your id?
I noticed when I use the id that my textarea's display property doesn't get set to none, but it works when i use the class="summernote".
<textarea asp-for="Instructions" class="summernote"></textarea>
<script>
$(document).ready(function () {
$('.summernote').summernote();
});
</script>
Put this script in your page head:
<script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
Lets say you have model called ForumModel where you save contents of editor. Property where you your content is saved is called answer:
public string Answer { get; set; }
So in your view you have following tag:
#model ForumModel
Therefore if you want to add editor:
<textarea id="editor1" asp-for="#Model.Answer" class="form-control" required=""></textarea>
<script>
CKEDITOR.replace("editor1");
</script>
And now all that is left is to call your controller on submit button. When your form is submitted you go to constructor that saves your contents.
public IActionResult Reply(ForumModel forumModel)
{
forumModel.SaveReply();
return RedirectToAction("SomeRandomPage");
}
I'm creating a tag system on my website. So far it's all working great. But now I wish to create a page that shows all my tags under their own tab like you have with a portfolio page.
Example: http://www.don-zalmrol.be/tags?tag=Electronics
My page already displays the tags for a specific tag under it's own tab (i.e. electronics), but as you might guess I wish to populate the other tags in their respective tab as well.
So in short you land a view that displays the tag you've selected, but on the same page you can see the others as well.
Anybody has any idea how I can do this? I don't think I'm far away from the solution as I can already load the projects for specific tags under it's own tab. Now I only need to populate the remaining tabs with the tags!
Thanks!
This is my code so far:
http://pastebin.com/jwGW0NKZ
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
var portfolio = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
string tag = Request.QueryString["tag"];
if (!tag.IsNullOrWhiteSpace())
{
var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);
if (publishedContent.Count() > 0)
{
#* Show title *#
<div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<center>
<div>
<i class="fa fa-tags"></i>
</div>
<br />
<div class="media-body">
<h2>Tags</h2>
<p>Browse content by tag</p>
</div>
</center>
<br />
</div>
#* Show tag titles in tabs *#
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default" href="#" data-filter="*">All tags</a></li>
#foreach (var tags in tagList)
{
<!-- Create a selected tag -->
if(#tags.Text == #tag)
{
<li><a class="btn btn-default active" href="#" data-filter=".#tag">#tag</a></li>
}
#* Show all other tags *#
else
{
<li><a class="btn btn-default" href="#" data-filter=".#tags.Text">#tags.Text</a></li>
}
}
</ul>
<div class="row">
<div class="portfolio-items">
#* Start picture content *#
#foreach (var tags in tagList)
{
#* Put selected tag in the right tag tab *#
if(#tags.Text == #tag)
{
#* Show tag content *#
foreach (var item in publishedContent.OrderByDescending(i => i.CreateDate))
{
<div class='portfolio-item #tag col-xs-12 col-sm-4 col-md-3'>
<div class="recent-work-wrap">
#* IF the project has a picture *#
#if(item.HasValue("pictureOfTheProject"))
{
var featureImage = Umbraco.TypedMedia((int)item.GetPropertyValue("pictureOfTheProject"));
<img class="img-responsive" src="#featureImage.GetCropUrl(250, 250)" alt='#item.GetPropertyValue("titleOfTheProject")' />
<div class="overlay">
<div class="recent-work-inner">
<h3>#item.GetPropertyValue("titleOfTheProject")</h3>
<a class="preview" href="#featureImage.GetCropUrl(250, 250)" rel="prettyPhoto">
<i class="fa fa-eye"></i> View
</a>
</div>
</div>
}
#* Else when the project doesnt have a picture, show default one *#
else
{
var noImage = "http://www.don-zalmrol.be/media/1440/no_image_available.png";
<img class="img-responsive" src="#noImage.GetCropUrl(250, 250)" alt="No image" />
<div class="overlay">
<div class="recent-work-inner">
<h3>#item.GetPropertyValue("titleOfTheProject")</h3>
<a class="preview" href="#noImage.GetCropUrl(250, 250)" rel="prettyPhoto">
<i class="fa fa-eye"></i> View
</a>
</div>
</div>
}
</div>
</div>
}
}
#* Put the other tags under there own tab *#
else
{
}
}
#* End dynamic tags *#
</div>
</div>
}
#* No content matching the tag? *#
else
{
<p>There isn't any content matching that tag.</p>
#Html.Partial("TagList")
}
}
#* Show the tag list with amount *#
else
{
#Html.Partial("TagList")
}
}
EDIT 27-03-2016
Ok so I now know that I need to play around with my tag query or use the IEnumerable. But I can't seem to find it out how I can do this without breaking the code...
#* Get all tags and order them by name *#
var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
#* Get requested tag *#
string tag = Request.QueryString["tag"];
#* Show all content by requested tag *#
var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);
Above are the pieces of code that list all the tags I have in a var, gets the name from the URL (i.e. Electronics) and one that then displays all content that matches said queried tag.
So in short I need to change the last part of the TagQuery to list all content that has a tag and then filter it out by the querystring to display them in their own category.
But how can list all tagcontent?
Cheers,
Don
Your issue is on line 76 of the pastebin where you loop through the published content, which is already filtered by the selected tag. Because of this, only content with the selected tag ever gets written to the template.
What you need to do is use the loop on line 70 where you're looping through all tags. The jQuery plugin you're using will handle the filtering by using the CSS class you add on line 78. You can get rid of the loop on line 76.
For clarity, I would also change the
#foreach (var tags in tagList)
to
#foreach (var item in tagList)
since the foreach is producing a single tag rather than plural "tags" as your code insinuates. This has the added bonus of allowing you to keep the rest of your code the same once you remove the loop on line 76.
I am using ng-include directive to include partial views in IBM websphere Portlet.The code snippet is below
1.Defining render URL
<portlet:defineObjects />
<portlet:renderURL var="resourceURL" windowState="MINIMIZED" portletMode="view">
<portlet:param name="jspPage" value="/partials/list.html" />
</portlet:renderURL>
2.Main.js
<script>
var myApp = angular.module("App", []);
myApp.controller("myCtrl", function ($scope )
{
$scope.page='<%=resourceURL%>';
});
</script>
3.Home.jsp
<div id="<portlet:namespace />main" data-ng-app="App" data-ng-controller="myCtrl" >
<div ng-include src="'page'"></div>
<div>
But the partials are not included. Can anyone suggest me how to fix this?Am i missing anything?
You would need to change your code to go to the portlet context path:
Replace:
<%=resourceURL%>
with
<%=renderResponse.encodeURL(renderRequest.getContextPath():%>
This will work:
<div ng-include="'<%= renderResponse.encodeURL(renderRequest.getContextPath() + "/scripts/mypage.tpl.html") %>'"></div>
I'm new about hpple and xpath. for the below html code,I want to get both "title" and "tag" information.
From hpple's example code, I can get a array of title, and another array of tag. But if there are six properties I'm interested, there will be six arrays.
can I find the div[class="entry"], then get its child's , div[class="meta"]? (can anybody share the code?)
Thanks.
<div class="content">
<div id="1" class="entry">
<h2 class="title"> title for entry 1 </h2>
<div class="meta"> tag:xxx </div>
</div>
<div id="2" class="entry">
<h2 class="title"> title for entry 2 </h2>
<div class="meta"> tag:xxx </div>
</div>
...
</div>
#"//div[#class='content']//div[#class='entry']//div[#class='meta']"
This returns tag:xxx for both entries.
I want to get both "title" and "tag" information
//div[#class='content']/div[#class='entry']/*[#class='meta' or #class=title"']
This XPath gets all tags with class title or meta children of div class entry child of any div class content.