Building a Better Blog

CM1
1

This question will describe two blogs. The first is what we have built, and the second is what we aspire to build. The screen shots included shot help explain what we have done and where we would like to go.

What we have:
Three Pages
-1. Index (like a blog homepage that appears when you click “blog” in the top Nav bar)
-2. Archive (linked to the home page, so that all stories can be accessed)
-3. Post template (where one would enter text for a new post creation)

Problems

  • The index page features a huge image pulled from the latest post (done through the blog list widget?) The index page also only lists the five most recent stories. This page auto list is not in a good place for user experience and doesn’t display enough content

  • The archive is merely a black list of links. We want to display dates and more info, but the date displayed is always the publish date. We are trying to build our catalog of posts from 2010 and 2011. It is silly to have these posts written June 2010 and time stamped July 17, 2012.

  • The post template features a huge image that the index page draws from. This is a negative because it takes away from the text. Also, many of these posts don’t have a compatible subject for artwork.

Now for Screens:

  1. The Index

  2. The Archive

  3. The Post template

GOALS!!!

  1. One index page that displays all stories in a visually appealing fashion. Shows the date written, author and a brief summary or first paragraph. Can be navigable by clicking next page to go to older stories. Should be linked to top Nav Bar
  2. No archive page needed
  3. Blog posts without large images needed.

Shining example:

2

The question is, how do we get from where we are to where we want to be. I understand that we will likely need to rebuild everything, and I am okay with that. However, building templates has proved to be very difficult and we are amateurs at writing CSS. Thanks in advanced for the help

3

Joseph,

In order to deal with this issue:

  • The archive is merely a black list of links. We want to display dates and more info, but the date displayed is always the publish date. We are trying to build our catalog of posts from 2010 and 2011. It is silly to have these posts written June 2010 and time stamped July 17, 2012.

You should use the Post-override date found in the page meta-data. You can give the posts from 2010 a date of June 2010 with this feature.

4

Joseph,

First let’s look at the index page. If the image is in fact being pulled from your blog post, you can try two things. One, edit the content of the blog post (by double-clicking on the page which contains the blog post in Finder, clicking Edit, and then clicking on the pencil icon to upper right of the Blog Post widget), and making sure that the “More link” embedded in the post (defined by clicking on the page break icon on the far right of the edit widget toolbar) is situated before the image the blog might contain. Or two, for more precise control over what displays in the Blog Auto List widget, you can open the page which contains the blog post in Editor (by following the same directions as above), and then click Actions>Edit Meta-data. From here you can deselect “Auto generate summary” (this will override the “More link” in the blog post) and then you can input a custom summary to be displayed through the Blog Auto List widget.

However, from looking at your screenshots, I’m not certain that large image is being pulled from one of your blog posts. You might want to double check your index page’s template (Admin>Design and then click the blue pencil icon on the upper-right corner of the template which the index page is using) and verify that it’s not part of the design, or not being dropped in there by another widget.

To further clarify the origin of this large image, I would look at the content of your Blog Post widget and see if it contains the image you’re referring to (again, double-click on the page which contains the blog post in Finder, click Edit, and then click on the pencil icon to upper-right of the Blog Post widget). If there is no image within there, then I would follow the steps above, this time to check the template the Blog Post page is using and see if the your large image is part of the template’s design, or maybe if it’s being dropped in there by another widget.

Now, to have the Blog Auto List display more than five stories on the index page, open the template which houses the Blog Auto List (again, Admin>Design and then click the blue pencil icon to the upper-right corner of the template the index page is using), select the Layout tab, and then click the blue wrench icon to the upper-right of the Blog Auto List. From there, expand the Properties menu, and scroll down to the “Number of posts per page,” and input as many posts as you want to appear on the index page. There are also other useful options which can be modified in this menu, so look them over.

As for the archive displaying just the published date, refer to Mark’s post.

Please let me know how you make out with all this, and let me know if / when you need further directions.

Nathaniel

5

In the last screenshot posted, the one of the Percussion blog, the Title of the blog, which is included in the Blog list, is displayed on top. The Byline is the next line beneath that, and the Post date is listed beneath that. CSS controls the look, feel, and alignment of the elements. You can use a tool like Firebug or the inspect tools in Chrome, FireFox, and IE to see what styles are applied.

The rest of the post is from the blog post itself. Similar to what Nathaniel posted about, the blurb used here is selected by using the “More” button in the bottom right corner of the Rich Text editor toolbar. The Meta-data settings dialog has a checkbox to auto generate summary, which uses that “More” button. As long as that box is checked, the summary will contain everything that appears above the “More” tag.

The images you see in the post in the screenshot are actually inserted in the blog post, which is evidenced by click on the blog post title and viewing the entire post. The position of those is floated using CSS.

The final item, the paging at the bottom, is added by the Blog List widget and is styled using some basic CSS, which can be identified with a simple browser inspection.

I hope that helps add guidance to Nathaniel’s post.

6

Gentlemen, great advice as usual but I am afraid that I’m still a bit lost. I am starting to get a grasp on how I would create posts that should show up well in a blog list. But, our Blog list widget on the index page is not listing blogs! It is displaying the large banner image from the blog post template with a linked title below. I understand that I can configure what data is shown about each post in the blog list, but my posts aren’t showing up in the blog list. How do I remedy this? Will I need new templates? Is it possible to get the percussion blog template?

7

The large image is in fact part of the post template. The blog list populates a large image, drawing from the post. We don’t want large images at all. We just want the blog list to display a list of blogs, as well as the summary, date and author

8

Joseph,

It looks as though one of two things might be happening here. One, the region which contains your Blog Auto List (and Blog Post, but we’ll focus on your index page for now) has already been heavily stylized through your CSS file. A way to verify this is to open the template which the index page uses (Admin>Design, double-click on your site in Finder, and then locate the correlating template and click the blue pencil icon). Be aware that when you created your blog, CM1 will have created a copy of the template you chose for it and will have renamed it in this manner: - (this is the template you’ll want to open, not the original template). Once you have opened this template for editing, click the Layout tab, identify the region which contains your Blog Auto List, click anywhere inside of it, and then select the blue wrench icon in the upper-right corner of the region. Here you will find a region name and possibly a CSS root class. First, save these names into a separate text file in case you want to revert back to them later, and then rename the region (and CSS root class, if it has one) to something generic which will unlink the region from your CSS file (“unlinkFromCSS1,” for example). Hit OK and save the template, and now open the index page in preview mode to see if this has affected your page.

If it has no effect, go back into the same template as before, click the Style tab, find the Blog Auto List widget, select it, and then click on the blue wrench icon in the upper right. Here rename the root class (if it has one) following the same steps as above (be sure to save the current name in order to revert back to it later), hit OK, save the template, and then reload the index page in preview mode.

One of these two steps should removing the Blog Auto List’s styling, making it appear as a generic, un-styled list. If one of these methods works, it will tell us where your styling is coming from, and then next we can look in your CSS file and edit the appropriate fields.

Let me know how this goes, and any screenshots you can include of what you end up with would be helpful.

Nathaniel

9