Creating a Simple MojoPortal Website Part 3

In this article, I will use the Blog and Feed Manager modules to add a page for latest news and show a summary on the home page. I will also link the news blog into Facebook.

This is how the home page will look:

I will start by signing in as administrator and creating a new page called News.

I then select the Add/Remove Features link

From the feature list, I select Blog, give it a title, and press Create New Content. Then press view the page to see it.

That was very easy and I have already created a working blog. Now I am going to use the settings to connect link it in to Facebook. So, from the edit menu I select Settings.

On the main ‘Blog Settings’ tab, I hit ‘social settings’ to reveal the social settings options and check the boxes to show the like button and faces.

A bit further down, I also choose to enable content ratings and comments

You can find out more about making your site social-media friendly in Carole’s blog.

Now, I click Add Post

I start by entering a title and using the picture icon to add a picture.

To select an image, I use the browse button. This automatically takes me to the directory for my site (my web site directory is in the default place which is c:\users\<username>\my documents\my websites for windows 7; the site data is in \<websitename>\data\sites\1). I have created a directory called images here that has all my site images, so I select my image from here.

I set the picture alignment to left so that the text will go next to it and set the H and V spacing to 10 to give a small gap between the picture & text.

Once I have written in some text, I right click on the image and select image properties so I can change the image size to be more suitable.

Note the little lock symbol next to the size fields. This indicates that the width will be automatically changed when height is changed (and vice-versa) to keep the image in proportion. Click on the lock to unlock/lock this setting.

Before I save my new post, I am going to add a new category of ‘News’ to add it to. Note there are also options that allow you to exclude a post from the feed, hold off from publishing it right now (maybe it’s a draft you are still working on) or publish it at a future date.

Now I want to show the latest news items on my home page. I go to the home page and from the Admin menu I select Edit This Page.

I select to add a Feed Manager, give it a title and select the right pane, then press the Create button. I then select view the page.

At this point I notice my new feed module overlaps my pictures at the top of the page.

I could make those smaller, but I would prefer to keep them the same size, so I take a small detour to create a header pane (see my blog on this ) and move the top HTML module to the header pane. This is the code I added to layout.master:

With the feed module now in the right place, I can change some settings

I am going to take off the aggregate feed link and set the number of items to 3. Note there is an option for scrolling, which can look good, but I am not using that right now.

I now choose to add a feed

I now need to know my feed name, so I open a second browser window to my website and go to the news page. I right click on the feed icon for the blog and select Copy Link Address.

I can then paste that into the feed URL. I also give it a name.

I want the information coming from the feed to be a short summary and I want to control how it looks, so I am going to use excerpts for this. I go back to my blog and open up the settings page. I click on Excerpt Mode Settings to see the options for that and check the box to Use Excerpts in Feed.

I select to edit my blog post (so far my one and only blog post)

Now there is an extra page ‘Excerpt’, which I select and can copy and paste from the main entry. I also decide to make the picture smaller.

When I go back to the main page, I notice the image is not showing. I need to change a setting on the feed manager to fix that.

Click Security Settings to open up the options and select to allow external images. I also decided to check the ‘Show feed name before content’ option in the section above.