The Classic Set Newscoop Template Package Documentation
About these templates
The Classic template package was originally created by Sebastian Göbel, Micz Flor, and Douglas Arellanes as a way of showcasing useful features and functionality in the Newscoop content management system, as well as showing how each of the different features and functionality works. Ljuba Ranković implemented the changes included in the version that can be downloaded from the link at the bottom of this document.
In this way, the template package serves both an educational and functional purpose
- you can use these templates "out of the box," or you can use them to increase your understanding of how Newscoop and its various functions work.
As of Newscoop 3.3.5, the Classic Template Package is the default sample publication in Newscoop. If you've chosen to do so, please skip over the installation instructions.
Install the templates/DB
The demo template is delivered as an package of template files and database dump. The newscoop-restore will copy the templates and database content to your existing newscoop installation.
Attention: all existing content/templates are overwritten.
Configuring the publications
When installing the template set, it uses the default publication name "localhost". If your machine has another servername, change the page alias in the newscoop admin:
Skins (.css) and Functions (.tpl)
Newscoop comes with its own template language. This makes it very flexible to fit with your web design. The following examples will illustrate how to replace elements of your design with Newscoop lingo to generate the site (e.g. a list of articles, blogs, etc.). The sample templates contain a set of .tpl files with HTML and Newscoop lingo to create the functionality. They are constructed in such a way that you can adjust the look and feel (if you like) by altering only the CSS files.
The CSS files are located in individual folders inside the folder templates/classic/css like templates/classic/css/green. We decided to use one CSS file that calls all the other CSS files used. In the case of the green set, this is called like this:
Wheras the style.css file calls all the other relevant files:
Switching among the skins included in the Classic template set
The Classic template set includes two design variations, or skins. One of the designs has a green logo and is called 'green' in the templates directory.
Creating your own skins based on the sample template set
You can use the Classic template set as a base to create your own templates. Here's a good way to start:
1. make a copy of the green folder in the templates/classic/css folder, e.g.: templates/classic/css/myskin
2. open the .tpl file that calls the CSS: /templates/classic/tpl/header.tpl
3. change the link to the CSS file to: <LINK href="/templates/classic/css/myskin/style.css" rel="stylesheet" type="text/css">
4. now you can edit the files in the folder myskin
Displaying Topics in the Classic template set
In this template set, topics are used in five places:
- On the front page at the top of an article's box, next to the section name and the date the article was posted.
- On the section page at the top of the article in light gray.
- On the article page at the top of the article
- In the blogs, where a topic can either be attached to a blog globally or to an individual blog entry
- In the search box with the "Browse All Topics In This Issue" link
In the first four instances, the attached topics are displayed and are clickable; when a user clicks on a topic they are taken to a page that automatically lists all other articles that also have this topic.
In the search box, "Browse all topics in this issue," links to a page which displays all the topics attached to articles.
Working With Images in the Classic Template Package
The Classic Template Package takes advantage of Newscoop's ability to assign a number images; these numbers are then used to determine the positioning and size of the photo on the front page and section front page. Newscoop does not resize the photos, so you will get the best results if you upload a separate smaller version of your image along with the full-size one.
You can assign the image number when you upload the image. The same menu includes fields for the photographer's name, the date, the location and the photo caption. Don't worry if you get the image number wrong; you can always go back and edit the image information later.
Image sizes in the CSS package
Depending on what skin you decide to use, the image sizes will change
- obviously. Rarely two publications have the exact same size of images. However, the sample database has a number of images uploaded. These images have (again: obviously) specific measurements. To make these images fit the different designs, the sizes are set in the CSS files.
In the classic template set, there are four specific images for each article. These are for the left columng (banner size and square) and for the right column (again: banner size and square). Specific numbers are reserved for these sizes. So when you upload an image to be one of these specific images, make sure that you give it the right number on upload.
The numbers and sizes of the images in the green skin are for example:
- A. banner image: image number: 200 / width: 569px;
- B. square image: image number: 201 / width: 188px;
- A. banner image: image number: 202 / width: 350px;
- B. square image: image number: 203 / width: 115px;
Image:Photo number 202.jpg
Images in the admin interface
A good example of this is the article called "Are Electric Cars The Future?" in the Cars section. There you will see that there are two versions of the same photo uploaded, one with a number of 1 and sized at 569 x 378 and one with a number of 202 and with a number of 350 x 233. The number 202 photo is the one used on the front page, while number 1 is what is displayed in the article, full size.
Any of the photos with a number of 200-203 will display on the front and section pages automatically. But to put a photo in the article, you must first upload it, then add it to the body text using the WYSIWYG editor's photo button, which you can see in this screenshot. Image:Image button.jpg
We recommend that you use photo editing software to resize your photos. If they are not resized to the sizes listed above, the CSS will force the resize and this may make them look grainy.
In the examples in this package, we have kept the original photo dimensions for the article page, but have cropped the image to a 188 x 188 size.
Automated publishing to change article positions
As an illustration of Newscoop's automated publishing feature, we have set a couple of events on the article called "Calls for Traffic Safety After Last Week's Fatal Collision."
Automated publishing means that you can display articles on the front page or section pages, change an article's status from unpublished to published (or back), or remove articles from the front or section pages, all on the date and time of your choice.
We have intentionally made the front page and section page templates keep all articles on them until they are removed by an automated publishing function.
The article called "Calls for Traffic Safety After Last Week's Fatal Collision" has two items scheduled for April 28, 2009: Add to Front Page and Add to Section Page.
On 28 March, 2011, the articles are set to be removed from the front page and from the section page. The article will still keep its status as "published" and is available for browsing through the archive and search engine.
Article Types Used in The Classic Template Set
In Newscoop terminology, article types are a group of form fields that together define a news article. allows you to create different article types. The Classic template set uses a relatively simple article type, called "News Article," which includes the following fields, which are then displayed on the Article Edit page:
- a short text field for a smaller headline before the main headline.
- Lead and SMS
- a field for the first couple of sentences of the article, which may later be used for sending by SMS.
- the rest of the article's text.
By default, Newscoop always includes the following editable fields, which are added to the ones you define in your article types:
- Creation Date
- Publish Date
You could have different article types for different types of information. Wire service articles, extended captions and press releases would be others that come to mind.
The article types
- and the fields they contain
- are important because each can be used from the template files and Newscoop templating language.
You can find out more about article types in the Newscoop manual here: http://newscoop.sourcefabric.org/manual
Newscoop's templating language is a set of extensions to the Smarty templating language for PHP. If you're familiar with Smarty or with other templating languages, this should be fairly straightforward for you. But if you're not, that's OK too. We're going to try to explain each of the things going on inside the template files here, and in many cases we'll do so step by step.
Where are the template files located?
You can work with Newscoop templates in two ways: Either through a web browser and the Newscoop administration interface in Administer -> Templates, or through SCP or FTP directly on the server's filesystem.
All Newscoop template files which are in the top-level directory for templates (i.e. directly in the "classic" folder) are called directly. For example, index.tpl is the template for each issue, search-result.tpl the template for the search results page.
Newscoop allows templates to include other template files. We will use this a lot in the top-level templates, where we have tried to create separate template files for each of the major functionality provided in the Classic Template Set.
Here is the index.tpl file, which includes directives to Newscoop templating (these use the double curly brackets, in Smarty style) and XHTML, which defines the stylesheet tags (these use the <tags>). Each of the lower-level templates have specialized functions, and are in the subdirectories. By separating each of these, we're able to reuse different snippets (with each in their own .tpl file) and therefore cut the amount of work required.
Step by Step with index.tpl
at this stage, we keep calling the snippet that creates the box for each article listed with the above command
Step by Step
First we will include the header (inside the header.tpl file). We also set which CSS files are loaded.
Now we add some divs for CSS
The headernav.tpl file will generate the register, logo, and navigation of sections functions.
The banners can be called from anywhere with these snippets (see also the advertisment.css info)
Now we start the first column, with styles defined in columns.css
All content for the left column goes beneath this tag.
The first thing is to list all articles in section 10 with "show on front page" turned ON. This is done in the article edit menu with the "Show Article on Front Page" checkbox. Then we go through the sections one by one. If you want to change the hierarchy
- to put the articles from the business section first, for example
- all you have to do is change the order of section numbers.
Here is the part that defines another banner in the middle of the page:
and now the next set of sections:
Now we're done with the left column, so we can close all our open tags and open the right column:
All right column content goes beneath this tag. First we include the snippet for the search box, which also holds the links to issue archive and topic tree
Now we include the blog entries teaser box:
Now we list the articles from the remaining sections:
Now we will include the footer, which also lists the five most read articles of the current issue.
Finally, we close the divs from the top and close the page...
Includes called by index.tpl
The following includes are called by index.tpl:
- header.tpl (classic/tpl/header.tpl)
- headernav.tpl (classic/tpl/headernav.tpl)
- articlelistleft.tpl (classic/tpl/teaserframe_articlelistleft.tpl)
- bannerleftcol.tpl (classic/tpl/banner/bannerleftcol.tpl)
- search-box.tpl (classic/tpl/search-box.tpl)
- entrylistright.tpl (classic/tpl/blog/entrylistright.tpl)
- teaserframe_articlelistright.tpl (classic/tpl/teaserframe_articlelistright.tpl)
- bannerrightcol.tpl (classic/tpl/banner/bannerrightcol.tpl)
- footer.tpl (classic/tpl/footer.tpl)
This template file creates each section's front page. All articles where the 'Show on Section Front Page' has been checked in the article edit menu will show up in the page's left column. The articles which are published without this turned on show up in the right column.
left column: all articles which are published and "show on section page" is ON, independent from the issue. The left column is referred to as "col1" in the CSS.
right column: list 9 articles from this section where "show on section page" is OFF, independent from the issue. the template classic/tpl/pagination.tpl will create a previous and next link, if there are more than 9 articles. The right column is referred to as "col2" in the CSS.
If you decide to have something special for each section, like an image or color scheme, you can use the body ID tag. In the section.tpl file, the section number is also in the ID:
This will for example produce inside section number 100:
This template prints the content of the article, attachments and comments in the left column. This template also gives a good illustration of how the Newscoop code lies inside the HTML.
The right column of this page lists two types of articles.
First, it lists three articles which have the same topics (as set by the editors) as the one currently displayed:
Then it lists three articles from the same section:
This template lists all articles in all sections of an issue in the left column.
First we use the command set_default_issue to make sure that we list from the issue chosen (this is done in the right column, see below). then we list through all sections and within this loop through all articles. for each article, we also display the topics linked to this article.
In the right column, we display a link to each issue by listing the issues. Clicking on an issue will then change the display of the left column. 10 issues are displayed. but if there are more, the pagination.tpl template will create previous/next links.
This template makes use of Newscoop built-in user registration functions. Users registering for a trial or paid subscription of your publication call this template when they click on register. Here's what this template does:
1. builds the html for the entire page
2. decides what to do in the left column, display form, check for error, display success message
Step By Step:
First, if everything is OK, it will display the user form for registering (from the subtemplate classic/tpl/user-form.tpl):
Here's what happens if it isn't OK: If the user pressed 'Submit' and Newscoop detects an error, it will display the error message and the form again (from classic/tpl/user-form.tpl):
If the user is registered, the form is displayed to change the user profile information:
This template displays the results from a user's search request, as typed into the search box (handled in search-box.tpl).
EXPLANATION TO BE ADDED
the image folder will contain any kind of image important to the site but independent from the layout. i.e. the logo might go in here, bannerads could go in here. but the background.jpg file called by the css might be better off in the css folder (or e.g. in clasic/css/green/ to be precise)
The 'banner' folder holds the template files including the code snippets for banners. Google AdSense code or OpenX code goes into these individual snippets
- not into any of the other templates!
In the case of The Custodian, they contain the gray sample images, which are located in the folder: classic/img/banner
- bannerleftcol.tpl .tpl
This template displays the "breadcrumbs," or the intermediate pages between the home page and the page. It displays the section name, or, if the template name is 'topic.tpl' or 'archive.tpl' it displays their names.
EXPLANATION TO BE ADDED
EXPLANATION TO BE ADDED
EXPLANATION TO BE ADDED
EXPLANATION TO BE ADDED
EXPLANATION TO BE ADDED
EXPLANATION TO BE ADDED
EXPLANATION TO BE ADDED
EXPLANATION TO BE ADDED
this will display the block with the teaser of an article in the left column (e.g. on the section page or list of articles for a specific topic on the topics page). note: depending on the availability of image number 200 or 201, this will return different HTML (see below). also, the section number is added in the class of the sourounding div tags, to make it easier when adjusting the CSS files.
inside, this is the code that builds different HTML according to the image numbers found. if there are neither 200 or 201, no HTML is written in this part. the similar list of articles for the right column checks for image numbers 202 and 203.
this is the equivalent of teaserframe_articlelistleft.tpl but for the right column. here the template checks for different image numbers, since the iamges used in the right column require different styling.
this code snippet can be called whenever we want to display the topics linked to this article. this could either be on the article page itself, but also on the section page for each listed article and on the archive page for each article in the listed sections.
important: if there are no topics, this code will return nothing but the two HTML comments at top and bottom. this is because it uses the conditions if $gimme->current_list->at_beginning and if $gimme->current_list->at_end to build the div tags around the topics.
This CSS file governs the display or hiding of banners and their styling information. The easiest thing to do is to leave this and only decide which ones you want to show / hide by changing the 'display' value to 'none' or to comment the entire line out. To make changes to the banners (for example to paste the code from Google AdSense or OpenX) go into the folder: classic/tpl/banner.
To hide a banner:
To show a banner:
background.css and colors.css
This CSS file sets the colors of things like the headlines, with each section number having its own color style. To find out the number of a section, you can pull down 'Content -> Issue Name' in the admin interface and then make a note of each section's number.
In the case of The Custodian, it's pretty straightforward:
- News: 10
- Business: 20
- Sports: 30
- Lifestyle: 40
- Cars: 50
- Real Estate: 60
The additional pages have the following numbers:
- Blogs: XXX
- Archive: XXX
- Search Results: XXX
- Topic Browse: XXX
- Register: XXX
In the example below, the section is 10 (for News) and the color value is #649C13. To change the section's color, edit each of the color values to colors of your liking.
TO BE COMPLETED: which include has this information? Logic: dynamically generated from section names and using section colors List of section names Link to each section front page CSS styles inherit color value from template based on section number Which CSS document contains the navbar's style information? What are the relevant CSS entities for the navbar?
wTO BE COMPLETED: which include has this information? Where is the CSS for this? Straight plain text search How is the search called? What are the parameters? How can a person use advanced search instead? How is the search result order determined? Where can I find out more about Newscoop search functions?
Browse all topics Link to topics URI
Browse all issues Link to archive URI
Blogs teaser box
Styling: Inherits blogs section number and changes color (and other style) accordingly?
Which CSS file has the blog teaser box entities, and what are they called?
Why are the blogs in their own section? Do they have to be?
Are there other considerations in using a plugin with templates?
Print section name Link to blogs section URI
Logic: 3 latest entries from the blogs plugin Entry title Teaser text Read more Link to blog entry URI Blog name Count of comments Link to blog entry URI with comments
Right Column Article Teaser Boxes
Styling: in color of section, similar to left column boxes, smaller fonts (from which stylesheet) Latest article not on front page but on section front page Read more Image (with right column numbering) Comments (if enabled)
Left Column Article teaser
Article date/timestamp List all attached topics Link to page displaying all articles with this topic Image handling same as front page (left, center, right according to photo number) Deck Name Link to article URI Lead Read more Link to article URI
Search Box Same as front page Straight plain text search Browse all topics -> topics page Browse all issues -> archive page
Right Column Article Teaser Article date/timestamp List all attached topics? Link to topics URI Deck Name Link to article URI Lead Read more Link to article URI Paging of right column article teaser items
Most read articles
Logic: Uses statistics functions to determine the 5 most read articles in the section Name Lead (is it truncated?) Link to article URI
Footer Repeats section listings Links to section front pages Permanent info pages on separate publication called 'info'
Search Results page (search.tpl)
Prints search results for: <search term> Found <count> articles matching the condition
Name Link to article URI Section Date/Timestamp Deck?
Where can I find out more about Newscoop search functions and how this can be changed?
Should an option for advanced search be included by default from the search results page?