Creating the News page

  Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic! Mail us feedback on this topic!  

The News page will contain a repeater displaying news. News items can be created by users with access to CMS Desk, typically content editors or site administrators. They are useful for announcing important information to all site users and visitors.

 

Creating the News page will be very simple. We will re-use the starter page template created in this chapter and add some web parts, mainly the Repeater for displaying news items.

 

1. Go to CMS Desk, select the root of the content tree and click New. Choose the Page (menu item) document type.

 

commguide_clip0200

 

2. Choose the My Community Site templates -> _StarterTemplate page template. For Page name, enter News and click Save.

 

commguide_clip0201

 

3. View the page in Page tab and enter News into the heading Editable text web part's text box. Click Save.

 

commguide_clip0202

 

4. Switch to the Properties -> Template tab and click the Save as new template link. Enter the following details into the pop-up dialog:

 

Template display name: My Community Site - News
Template code name: MyCommunitySite.News
Template category: My Community Site templates
Template description: some text describing the page template

 

Click OK. Click Save.

 

commguide_clip0203

 

5. Switch to the Design tab. Firstly, we will add a tag cloud that will display tags from the News tag group. After clicking a tag, users will be redirected  to this page again, where the repeater in the zoneCenter web part zone will display all news items tagged with the clicked tag.Click the Add web part (AddWebPart) icon of the zoneRight web part zone and choose the Tagging & Categories -> Tag cloud web part. Set the following properties of the web part, leave the rest of them at their default values:

 

Tag group name: News
Document list URL: /News
Web part container: Community Site - Orange Box
Web part container title: Tag cloud

 

Click OK.

 

6. Now we will add the Content subscription web part to enable users subscribe to receiving notifications about new news items. Click the Add web part (AddWebPart) icon of the zoneRight web part zone and choose the Notifications -> Content subscription web part. Set the following properties of the web part, leave the rest of them at their default values:

 

Display to roles: _authenticated_
Path: /News/%
Document types: CMS.News
Create event enabled: enabled
Create event display name: Community news notification
Create event template name: News notification
Web part container: Community Site - Blue Box
Web part container title: News subscription

 

Click OK. The zoneRight web part zone is finished and in Design tab, it should look as in the screenshot below.

 

commguide_clip0204

 

7. Now to the zoneCenter web part zone. The main web part will be a repeater displaying the news items. Click the Add web part (AddWebPart) icon, choose the Listings and viewers -> Repeater web part and click OK. In the web part properties window, set the following properties:

 

Web part control ID: NewsRepeater
Path: /News/%
Document types: CMS.News
ORDER BY expression: NewsReleaseDate DESC
WHERE condition:

 

({?tagid|(toint)?} = 0) OR (DocumentID IN ( SELECT DocumentID FROM CMS_DocumentTag WHERE TagID = {?tagid|(toint)?} ))

 

Transformation: Community.Transformations.NewsPreview
Selected item transformation: Community.Transformations.NewsDetail
Show new button: enabled
New button text: Add news<br />
Show Edit and Delete buttons: enabled
Content before: <div class="newsRepeater">
Content after: </div>

 

Click OK.

 

8. Now let's add the Breadcrumbs web part. This web part will be displayed only when a news item is displayed, not in the list of news items. When the News item is displayed, the breadcrumbs will make the heading of the page in format News > Title of the news item.  Click the Add web part (AddWebPart) icon of the zoneCenter web part zone and choose the Navigation -> Breadcrumbs web part. Set the following properties of the web part, leave the rest of them at their default values:

 

Show for document types: CMS.News
Breadcrumb separator: <span class="TitleBreadCrumbSeparator">&nbsp;</span>
Encode name: disabled
Web part container: Breadcrumbs box
Content before: <div class="blogsTopBreadcrumbs">
Content after: </div>

 

Click OK and drag-and-drop the web part between the NewsTitle and the NewsRepeater web part.

 

9. Finally, we will add the possibility to sign up for RSS notifications about new news items. Click the Add web part (AddWebPart) icon of the zoneCenter web part zone and choose the Text -> Static text web part. Set the following properties of the web part, leave the rest of them at their default values:

 

Web part control ID: RSSImage
Text:

 

<br /><a href="~/CMSPages/NewsRss.aspx" style="border:0; padding-left: 10px; padding-right: 10px;"><img src="~/App_Themes/Default/Images/rss.gif" border="0" alt="RSS" /></a>

 

Click OK. The News page is now ready. You can try out its functionality by adding some news items under the News page via CMS Desk. The page should display the news items correctly. In Design tab, the page should look as in the screenshot below.

 

commguide_clip0205

 

Page url: http://devnet.kentico.com/docs/communitysiteguide/index.html?creating_the_news_page.htm