Create a News Module

Creating a module to draft and publish news entries can be a great way to keep your audience up to date with the latest company and industry news. This tutorial will show you how to create a News Module in Solodev that will allow you to add news entries without any coding knowledge.

This type of module requires the use of two different STML pages. Generally these pages would be an index and a detail page. The index page will hold the repeater template and the detail page holds the detail template.

Screen_Shot_2017-06-15_at_3.29.11_PM.png


Creating a News Module

All modules should be built inside the modules folder under /web files/modules/ to make them easy to find and access. Note: If you haven't already done so, create a "modules" folder under "web files." Each module should have its own folder within this directory. Click here for more information on how to add a folder.

Step 1

Open the folder to which you want to add your news module. Hover over the Add button and select Calendar.

Add Calendar


Step 2

Name your calendar and select 'News' from the Choose Type dropdown and click Submit. This will auto-populate standard HTML fields for your newsroom so you can begin adding news entries right away.

Screen_Shot_2017-06-15_at_3.32.20_PM.png

Note: If you would like to customize your newsroom and designate your own HTML fields, select "custom" from the drop down. In order to create a custom newsroom you will need to create a form using one of the three methods below and upload your form prior to clicking submit:
  • Table schema
  • Select a form previously created with the form builder
  • Upload an HTML form

Click here to learn more about creating a calendar and adding forms.


Adding News Entries

Now that you've created your newsroom, it's time to start creating entries. Click Add Entry as shown below.

Screen_Shot_2017-06-15_at_3.36.30_PM.png

The default "news" HTML fields will appear as shown below and you can begin adding entries immediately.

Screen_Shot_2017-06-15_at_3.37.42_PM.png


Adding a Repeater Template

The repeater template displays all news entries on the news index page. This generally goes into the index.stml file, but it depends on the website. In this instance we will use the index.stml file.

Step 1

You will need to add a new file in the same folder you created the News Module. Open that folder from the left hand file tree and hover over the Add button and click File.


Step 2

Name the file and add the extension .tpl at the end of the file name.

The file name should be written in lowercase with no spaces. Add a dash (-) between words. Click here for more information on adding a File.

Now you can write the code to make the entries show. Please refer to the Shortcodes section to find more information on this topic.

However, we have provided a repeater template for this tutorial. Navigate to the folder that contains the News Module. Hover over Add button and click File. Copy the code below and make the edit that is required to pull the ID of the correct Module. Then click Save.

Note - the only thing that needs to be edited in this code, is the following section:

[repeater id="" limit="0,9"]

The repeater id="" needs the ID of the News Module. Open the News Module, and look for the ID at the top left under the name of the Module. Place the ID number inside the quotes ("").

The image below outlines where to find the ID of the Module.

Screen_Shot_2017-06-15_at_3.41.35_PM.png

news-repeater.tpl

[repeater id="537" limit="0,4"]
<div class="row news" onclick="window.location='{{path}}'">
<div class="col-sm-4">
<div class="fauxcrop image_crop"><img alt="[get_asset_file_url id={{image}}]" src="[get_asset_file_url id={{image}}]" /></div>
</div>

<div class="col-sm-8 newstitle"><span class="news-index-date">[print_date format="F d, Y g:ia" start_time="{{start_time}}"]</span>

<h2><a href="{{path}}">{{event_title}}</a></h2>

<p>{{news_intro}}</p>
</div>
</div>
[/repeater]

Step 3

If you haven't already, create an index page that will hold your repeater template. Click here for more information about adding a page.

Navigate to the index page that will contain your repeater template. In order to place the file into your STML, you need to click on the Dynamic Div into which you would like to place it. Once it turns blue, select the file from the left hand file tree. Click here for more information on adding content to a page.


Creating the Detail Template

The detail template displays the detail information for each news entry. In this case it will contain the news title, date of publication, intro, description and news graphic. It will also show the categories associated with the entry. Follow these steps to create the detail template and detail STML.

Step 1

Open your news module folder by clicking on it in the left hand nav. Hover over Add button and select File. Name the file and make sure you use .tpl at the end of the file name. Paste the code below into the file. Then click Save.

news-detail.tpl

[entry]
<div class="container news-detail-container">
<div class="col-sm-4 news-img"><img alt="[get_asset_file_name id={{image}}]" class="img-responsive img-thumbnail image-left" src="[get_asset_file_url id={{image}}]" /></div>

<div class="col-sm-8">
<h2>{{event_title}}</h2>
<span class="news-date"><strong>[print_date format="F d, Y g:ia" timestamp="{{start_time}}"] </strong></span>

<div class="clearfix"></div>

<p>{{news_details}}</p>
</div>
</div>
[/entry]

Step 2

To display the detail information of the news entry you will need to create a detail page. Check these links for more information on adding a page and updating a page.

Step 3

In order to place the detail template in your Detail STML page, you will need to navigate to the new detail page you created. Click on the Dynamic Div into which you would like to place the detail template. Once it turns blue, select the file from the left hand file tree. Once your template is in the STML, click Publish.

Click here for more information on adding content to a page.


Mapping Module to the STML

Now that you have created the news module and have the index and detail pages in place, you will need to map the Module to the correct page.

Step 1

Open the news module by selecting it from the left hand file tree. Click the Modify button.


Step 2

Open the Website Properties tab. Scroll down until you see the SEO URL Encoding field and click Browse.


Step 3

A new window will open with the file tree. Click Browse and select the detail.stml page for your module. After selecting the STML, you MUST click OK at the top of the window.

Step 4

Next to the SEO URL Encoding Input Field is the Asset Category Map Anchor (Folder Anchor) field. Click Browse and a new modal will popup displaying various folders - select the folder storing the index.stml and detail.stml pages of your module and click Okthen click Submit in the bottom right of the page.


Adding Categories

Categories are a good way to group up content, or tag multiple things within the same group. Follow these steps to create categories and add them to the module.

Step 1

Open the folder that contains the client module by clicking on it in the left hand file tree. Hover over Add button and click Datatable Category Group.

Client Module


Step 2

Give the category group a name and click Save.


Step 3

Open the category group module that was created by clicking on it in the left hand file tree. Type the name of the category in the name window and click the Add button. This can be repeated as many times as necessary.


Step 4

The next step is to link the category group to the module. Navigate back to the news module and click Modify. Open up the Advanced Options tab.

In the Datatable Category Group field add the ID of the module to the field or click Browse. A new window will open with the file tree. Select the category group that was just created. Click OK then click Submit. The category group is now connected to the news module.


Style your Newsroom

Add the CSS below to the main stylesheet of your website.

news.css

/* ======================
# News
====================== */
.newsContainer {
margin-bottom: 50px;
}
.newstitle h2 {
font: bold 24px 'open sans condensed', sans-serif;
margin-top: 10px;
color: #000;
padding-top: 0;
}
.newstitle p {
font-size: 16px;
margin: 0 0 10px;
}
.row.news:hover {
background: none repeat scroll 0px 0px #f5f5f5;
color: #00689b;
cursor: pointer;
}
.news {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 12px 0;
}
.news .fauxcrop {
height: 220px;
overflow: hidden;
}
.newstitle span {
color: #00bff3;
display: inline-block;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.45em;
margin: 10px 0 0;
vertical-align: middle;
}
.news:hover {
background: none repeat scroll 0px 0px #f5f5f5;
color: #00689b;
cursor: pointer;
}
.news-bottom-section {
padding-top: 20px;
}
/* ==================================
# News Detail Page
================================== */
.news-detail-container {
margin-top: 20px;
margin-bottom: 80px;
}
.news-detail-container p {
margin-top: 20px;
}
.news-detail-container .news-img {
padding-left: 0;
}
.news-detail-container .news-img .img-thumbnail {
border-radius: 0;
}
.news-detail-container .news-date,
.news-detail-container h3 {
color: #00bff3;
}
/* ==================================
# Media Queries
================================== */
@media screen and (max-width: 991px) {
.news-filter {
margin-top: 14px;
}
}
@media screen and (max-width: 767px) {
.newsContainer .input-group-btn #search_btn {
padding: 1.58rem 2.6rem;
}
.input-group-btn button#searchBtn {
padding: 1.4rem 2.6rem;
}
.newsContainer .input-group #table_filter {
height: 43px;
}
}

@media screen and (max-width: 480px) {
.news-filter {
margin-top: 10px;
}
.news-filter .items {
text-align: left;
}
#pagingTotal p {
padding-top: 0;
}
}

Congratulations! You have created your news module. If you followed the steps correctly, your index page should look just like the first screenshot in the article. After clicking on a news entry, it should take you to the detail page, which should look like the image below.

 

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request