EPiServer web controls: NewsList

Posted on July 25, 2009 by Frederik Vig in EPiServer

The NewsList control differs from controls like the PageList, with its template options. It has four templates for the first four items. Which makes it good to use in situations where you need to have different code/markup for the first pages.

Templates

The properties are the same as with the PageList class (they both inherit from PageListData).

The NewsList is per default sorted by PageStartPublish with the newest at the top.

Example

<EPiServer:NewsList runat="server" ID="News">
	<HeaderTemplate>
		<div id="Wrapper">
	</HeaderTemplate>
	<FirstNewsTemplate>
		<div id="MainNews">
			<h2><EPiServer:Property runat="server" PropertyName="PageLink" /></h2>
			<%# Container.CurrentPage.GetMainNewsImage() %><p><%# Container.CurrentPage.GetIntroText(350) %></p> 
		</div>
	</FirstNewsTemplate>
	<SecondNewsTemplate>
		<ul id="News"><li>
		<h3><EPiServer:Property runat="server" PropertyName="PageLink" /></h3>
		<span class="date"><%# Container.CurrentPage.StartPublish.ToString("dd.MM.yyyy") %></span>
			<%# Container.CurrentPage.GetNewsImage() %><p><%# Container.CurrentPage.GetIntroText(200) %></p> 
		</li>
	</SecondNewsTemplate>
	<ThirdNewsTemplate>
		<li>
			<h3><EPiServer:Property runat="server" PropertyName="PageLink" /></h3>
		<span class="date"><%# Container.CurrentPage.StartPublish.ToString("dd.MM.yyyy") %></span>
			<%# Container.CurrentPage.GetNewsImage() %><p><%# Container.CurrentPage.GetIntroText(200) %></p> 
		</li>            
	</ThirdNewsTemplate>
	<FourthNewsTemplate>
		<li>
			<h3><EPiServer:Property runat="server" PropertyName="PageLink" /></h3>
		<span class="date"><%# Container.CurrentPage.StartPublish.ToString("dd.MM.yyyy") %></span>
			<%# Container.CurrentPage.GetNewsImage() %><p><%# Container.CurrentPage.GetIntroText(200) %></p> 
		</li></ul>
		<div id="NewsArchive"><h3>Archive</h3><ul>            
	</FourthNewsTemplate>
	<NewsTemplate>
		<li>
			<EPiServer:Property runat="server" PropertyName="PageLink" />
		</li>
	</NewsTemplate>
	<FooterTemplate></ul></div></div></FooterTemplate>
</EPiServer:NewsList>

As you can see I’m using a few extension methods (GetIntroText, GetNewsImage, GetMainNewsImage):

public static string GetIntroText(this PageData pageData, int maxLength)
{
	if (pageData == null)
	{
		return string.Empty;
	}
 
	var text = pageData["MainIntro"] as string;
	if (!string.IsNullOrEmpty(text))
	{
		return TextIndexer.StripHtml(text, maxLength);
	}
 
	text = pageData["MainBody"] as string;
 
	if (string.IsNullOrEmpty(text))
	{
		return string.Empty;
	}
 
	//If the MainBody contains DynamicContents, replace those with an empty string
	var regexPattern = new StringBuilder(@"<span[\s\W\w]*?classid=""");
	regexPattern.Append(DynamicContentFactory.Instance.DynamicContentId.ToString());
	regexPattern.Append(@"""[\s\W\w]*?</span>");
	text = Regex.Replace(text, regexPattern.ToString(), string.Empty, RegexOptions.IgnoreCase | RegexOptions.Multiline);
 
	return TextIndexer.StripHtml(text, maxLength);
}
 
public static string GetMainNewsImage(this PageData pageData)
{
	if (pageData == null)
	{
		return string.Empty;
	}
 
	if (pageData.IsValue("MainNewsImage"))
	{
		string altText = pageData["MainNewsImageAlt"] as string ?? pageData.PageName;
		return string.Format(@"<img src=""{0}"" alt=""{1}"" />", pageData["MainNewsImage"], altText);    
	}
 
	return string.Empty;
}
 
public static string GetNewsImage(this PageData pageData)
{
	if (pageData == null)
	{
		return string.Empty;
	}
 
	if (pageData.IsValue("NewsImage"))
	{
		string altText = pageData["NewsImageAlt"] as string ?? pageData.PageName;
		return string.Format(@"<img src=""{0}"" alt=""{1}"" />", pageData["NewsImage"], altText);
	}
 
	return string.Empty;
}

You also have to add <%@ Import Namespace="EPiServer.Templates.Util"%> (replace it with your namespace for your extensions class) to your web form.

protected override void OnLoad(EventArgs e)
{
	base.OnLoad(e);
	if (IsValue("NewsContainerPage"))
	{
		News.PageLink = PageReference.Parse(CurrentPage["NewsContainerPage"].ToString());
		News.DataBind();
	}
}

HTML markup rendered

<div id="Wrapper">   
	<div id="MainNews">
		<h2><a href="/en/News/In-nunc-eros1/">News1</a></h2>
		<img src="http://dummyimage.com/200x150" alt="News1" /><p>Nullam ut lorem augue. Duis id erat at felis blandit porttitor sit amet ac ligula. Integer enim tortor, sagittis tempus imperdiet in, dignissim vel orci. Ut id metus massa. Praesent at metus vel lorem consequat varius. Sed viverra est sit amet eros ultricies imperdiet. Aenean sit amet metus tortor. Donec rutrum sagittis mi, et consequat orci fri...</p> 
	</div>
 
	<ul id="News">
		<li>
			<h3><a href="/en/News/In-nunc-eros2/">News2</a></h3>
			<span class="date">12.11.2007</span>
			<img src="http://dummyimage.com/100x75" alt="News2" /><p>Donec tincidunt erat sed erat lobortis sed molestie dolor placerat. Integer volutpat dictum ante eu semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeo...</p> 
		</li>
 
		<li>
			<h3><a href="/en/News/In-nunc-eros3/">News3</a></h3>
			<span class="date">12.10.2007</span>
			<img src="http://dummyimage.com/100x75" alt="News3" /><p>Fusce libero sem, tempor in commodo sit amet, feugiat id augue. Duis at nunc libero. Phasellus dui tortor, iaculis ac sollicitudin at, dignissim vitae lectus. Nulla facilisi. Vivamus ut porttitor l...</p> 
		</li>            
 
		<li>
			<h3><a href="/en/News/In-nunc-eros4/">News4</a></h3>
			<span class="date">12.09.2007</span>
			<img src="http://dummyimage.com/100x75" alt="News4" /><p>Phasellus mi tellus, imperdiet eu semper ut, varius ut nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam gravida, neque bibendum dapibus malesuada, ...</p> 
		</li>
	</ul>
	<div id="NewsArchive">
		<h3>Archive</h3>
		<ul>            
			<li>
				<a href="/en/News/In-nunc-eros/">News5</a>
			</li>
			<li>
				<a href="/en/News/Lorem-ipsum-dolor/">News6</a>
			</li>
		</ul>
	</div>
</div>

Now with a little CSS we can do a lot of cool things to the layout.

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
 
p {
	float: left;
	margin-top: 0;
}
 
img {
	float: left;
	margin-right: 1em; 
}
 
#MainNews img {
	width: 17%;
}
 
#News img {
	width: 26%;
}
 
#News p {
	width: 62%;
}
 
#MainNews p {
	width: 73%;
}
 
.date {
	display: block;
	font-size: 0.8em;
	margin-bottom: 0.3em;
}
 
#News {
	clear: left;
}
 
#News li {
	float: left;
	width: 33%;
}
 
#NewsArchive {
	clear: left;
}
 
#NewsArchive ul {
	padding: 1em;
	list-style: square inside
}

Result

NewsList working example result

Other posts in this series

Related Posts: