使图像显示在分页列表中的问题
Problems with getting an image to show in a paged list
我有以下代码,它在底部显示列出的文本和分页都很好。但是,当我尝试将子页面中的图像放入列表时,它对我来说是错误的。有什么想法吗?
@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><a href="?page=@(page-1)">Prev</a></li>
}
@for(int p =1; p < totalPages +1; p++)
{
var active =(p == page)?" class=\"active\"":string.Empty;
<li@(Html.Raw(active))>
<a href="?page=@p">@p</a>
</li>
}
@if(page <totalPages)
{
<li><a href="?page=@(page+1)">Next</a></li>
}
</ul>
</div>
}
<!-- Pagination END -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
您将获得 Model.Content.Children,这是 IPublishedContent 对象的强类型集合。然后您调用 item.Children.blogArticlImage,这是行不通的,因为您试图在项目的子项上获取 属性,而不是项目本身的 属性。您还尝试使用动态语法,它不适用于强类型对象。尝试将您的图像代码更改为:
<img src="@Umbraco.TypedMedia(item.GetPropertyValue<int>("blogArticleImage")).Url">
这应该可以解决问题,需要注意的一点是,如果某个项目没有图像集,或者已选择的图像已被删除,则会引发错误。更稳健的方法是这样的:
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">
我有以下代码,它在底部显示列出的文本和分页都很好。但是,当我尝试将子页面中的图像放入列表时,它对我来说是错误的。有什么想法吗?
@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><a href="?page=@(page-1)">Prev</a></li>
}
@for(int p =1; p < totalPages +1; p++)
{
var active =(p == page)?" class=\"active\"":string.Empty;
<li@(Html.Raw(active))>
<a href="?page=@p">@p</a>
</li>
}
@if(page <totalPages)
{
<li><a href="?page=@(page+1)">Next</a></li>
}
</ul>
</div>
}
<!-- Pagination END -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
您将获得 Model.Content.Children,这是 IPublishedContent 对象的强类型集合。然后您调用 item.Children.blogArticlImage,这是行不通的,因为您试图在项目的子项上获取 属性,而不是项目本身的 属性。您还尝试使用动态语法,它不适用于强类型对象。尝试将您的图像代码更改为:
<img src="@Umbraco.TypedMedia(item.GetPropertyValue<int>("blogArticleImage")).Url">
这应该可以解决问题,需要注意的一点是,如果某个项目没有图像集,或者已选择的图像已被删除,则会引发错误。更稳健的方法是这样的:
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">