Create a Blog Module

Creating a module to draft and publish blog entries can be a great way to communicate with your audience as blogs become a staple of the modern company website. This tutorial will show you how to create a Blog Module in Solodev that will allow you to add blog 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_12.19.31_PM.png


Creating a Blog Module

All modules should be built inside the managers folder under /web files/managers/ to make them easy to find and access. 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 blog module. Hover over the Add button and select Calendar.

Add Calendar


Step 2

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

Screen_Shot_2017-06-15_at_11.46.00_AM.png

Note: If you would like to customize your blog and designate your own HTML fields, select "custom" from the drop down. In order to create a custom blog 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 Blog Entries

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

Screen_Shot_2017-06-15_at_11.48.46_AM.png

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

Screen_Shot_2017-06-15_at_11.52.51_AM.png


Adding a Repeater Template

The repeater template displays all blog entries on the blog 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 Blog 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 Blog 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 Blog Module. Open the Blog 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.

blog-repeater.tpl

<link href="http://aaa.com/assets/css/blog.css" rel="stylesheet" >
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="theBlogGrid">
[repeater id="534" limit="0,4"]
<ul class="row blogGrid" id="blogGrid">
<li class="col-xs-3" id="{{calendar_entry_id}}">
<div class="imgHolder">
<a href="{{path}}"><img alt="[get_asset_file_url id={{blog_image}}]" class="grid-image img-responsive" src="[get_asset_file_url id={{blog_image}}]" /></a>
<div class="description-box animateBottomName">{{event_title}}</div>
</div>
<div class="biodescription"></div>
<div class="clearfix"></div> </li>
[/repeater]
</ul>
</div>
</div>
</div>
</div>

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 blog entry. In this case it will contain the blog title, date of publication, blog content, and blog 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 blog 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.

blog-detail.tpl

<link href="http://aaa.com/assets/css/blog.css" rel="stylesheet" />
[entry]
<div class="blog-wrapper">
<h1>{{name}}</h1>
<img alt="[get_asset_file_name id={{blog_image}}]" class="img-responsive pull-right blog-inner" src="[get_asset_file_url id={{blog_image}}]" />
<p>by {{blog_author}}</p>
<p>{{blog_details}}</p>
</div>
[/entry]

Step 2

To display the detail information of the blog 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 blog 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 blog 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 blog module by clicking on it in the left hand file tree. Hover over Add button and click Data 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 blog 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 blog module.


Styling your Blog

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

blog.css

/* ==================================
# Blog Index
================================== */
ul.blogGrid li {
list-style-type: none;
}
.blogGrid {
padding-left: 0;
margin-bottom: 40px;
}
#theBlogGrid .animateBottomName {
color: #fff;
margin-top: 20px;
width: 100%;
}
.blue-border.blog-blue-border {
margin-bottom: 20px;
}
.description-box {
background-color: rgba(50, 50, 50, 0.5);
bottom: 0;
float: left;
height: 44px;
padding: 5px 10px;
position: absolute;
}
#theBlogGrid .description-box p {
color: #fff;
padding-top: 7px;
font-size: 15px;
}
.blogGrid li:hover .animateBottomName {
background-color: #00bff3;
}
.imgHolder {
cursor: pointer;
position: relative;
}
.blogGrid .imgHolder .description-box {
height: 45px;
}

/* ==================================
# Blog Display
================================== */
img.blog-inner {
max-width: 300px;
padding: 20px;
}
.blog-wrapper h1 {
margin-bottom: 20px;
font-family: "open sans condensed",sans-serif;
font-size: 41px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}

/* ==================================
# Media Queries
================================== */
@media screen and (max-width: 1200px) {
.description-box {
height: 52px;
}
.description-box p {
font-size: 14px;
}
}

@media screen and (max-width: 991px) {
.blogGrid .blog-inner {
margin-bottom: 30px;
}
.description-box p {
font-size: 15px;
}
}

@media screen and (max-width: 767px) {
.blogGrid .blog-inner .imgHolder img {
width: 100%;
}
.blog-wrapper img {
max-width: 100%;
}
}

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

Congratulations! you have created your first blog module. If you followed the steps correctly, your index page should look just like the first screenshot in the article. After clicking on a blog 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