About the Editing Window

The editing window is extremely powerful and allows you to insert almost all conceivable types of web content with ease. Magnolia takes care of all of the complex technicalities automatically and provides an easy-to-use system for even the most advanced new technologies.

The screencast: Populating a page with content provides a brief overview of adding content in the editing window.

Opening the Editing Window

The editing window is accessed from AdminCentral by simply selecting and opening any page.

There are various ways to open a page, which are discussed in Managing pages in AdminCentral - Opening Pages (link).

When you open a page in AdminCentral, the selected page opens in a new tab or window in your browser. This window is referred to as the editing window.

Demo-project - Home page

Layout of the Editing Window

The content of the editing window looks similar to an actual web page. The significant difference is that in the editing window you can amend and add content to your page and view your changes as you work.

Adding and amending content is facilitated by the addition of green edit bars, which contain various function buttons.

Demo-project - Home page

The use of each function buttons is discussed in individual sections.

In summary, the:

  • Preview button allows you to view your page as it will appear on your site;

  • AdminCentral button returns you to the AdminCentral window;

  • Page Info button allows you to define information for the page;

  • Edit buttons allow you to edit current paragraphs;

  • Move buttons allow you to move or re-position current paragraphs;

  • Delete buttons allow you delete current paragraphs;

Demo-project - Home page

  • New buttons allow you to add new paragraphs.

Demo-project - Home page

In the editing window, you can navigate to any page using the navigation bar and it is not necessary to reload each page individually from AdminCentral.

Demo-project - Home page

When you click on the Page Info, Edit and New buttons, dialogs, which allow you to insert information, open. These dialogs open with a single click and if you double-click, they open twice, which may cause some confusion.

Demo-project - Home page

Page Content Areas

Each Magnolia web page consists of a number of content areas.

The appearance and layout of the editing window depends on the page template that the page is based on, but a number of content areas are common to all templates.

On all page templates other than the Home template, there are header, base element and footer areas, two navigational bars, and one or more content columns. The general templates and many of the special templates also have a section banner area.

Demo-project - About page (modified)

Demo-project - Multimedia - Flash Content page (modified)

In addition to the areas common to all pages, the Home page template has a stage area, but only a single, horizontal navigation bar.

Demo-project - Home page (modified)

On all templates, the first content column is wider than the other columns and is referred to as the main area. The main area differs from template to template and generally is the area that distinguishes each template. The extras area is the column to the right of the main area, but not all templates have an extras area as on these templates the main area extends to incorporate the extras area. The promos area is the column on the far right of the page on all templates.

Demo-project - About - Articles - Standard Article page

Demo-project - Multimedia - Image Gallery page

Content Paragraphs

The various content areas of a page are made up of a number of content paragraphs or distinct content areas.

Demo-project - Multimedia page

Above most content paragraphs, there is a green edit bar containing Edit, Move and Delete function buttons. The use of these function buttons is discussed in Editing Paragraphs, Moving Paragraphs and Deleting Paragraphs.

Demo-project - About - Articles - Standard Article page (modified)

In the content columns, paragraphs are inserted sequentially from top to bottom, but it is possible to re-arrange the sequence of most using the Move function buttons in the green edit bars.

Some paragraphs, such as the Article Header paragraph in the main content area of the Article template, can neither be moved nor deleted and the edit bar therefore has no Move or Delete function button.

Demo-project - About - Articles - Standard Article page

Paragraph Categories

There are three major paragraph categories: body content, teaser and form paragraphs. Within these main categories, a number of different paragraph types are available.

As the name suggests, teasers are paragraphs that introduce other pages, providing only a "tease" of the full content. Teaser paragraphs positioned in the second or middle content column are also referred to as extras paragraphs. Teaser paragraphs positioned right-hand column are also referred to as promo paragraphs.

On templates that allow for this, new paragraphs can be inserted at the bottom of the content column and the New function buttons facilitate this.

Demo-project - About - Articles page (modified)

Within each paragraph category, there are a number of different paragraph types.

The available types of teaser paragraphs are:

  • Internal Page Teaser;

  • External Page Teaser;

  • Link List;

  • Download File Teaser;

  • Contact;

  • Various types of Teaser Groups;

  • Latest News Teaser;

  • Next Events Teaser;

  • Calendar;

  • Various types of RSS Feed paragraphs.

The screenshot below demonstrates a few of the many available teaser paragraphs.

Demo-project - Multimedia page (modified)

In the demo-features site, the subpages of the Aggregation Paragraphs page demonstrate all the teaser paragraphs.

The available types of body content paragraphs are:

  • Header paragraph;

  • Text and Image paragraph;

  • Quoted Text paragraph;

  • Link List paragraph;

  • Flash Animation paragraph;

  • Video paragraph;

  • HTML paragraph.

The screenshot below demonstrates a couple of the available body content paragraphs.

Demo-project - About - Articles - Standard Article page

At the bottom of every page above the footer area, it is possible to insert one or more teaser paragraphs in the base element area.

Demo-project - Home page

Two types of base elements paragraphs are available:

  • Category Cloud;

  • Teaser Group - Carousel.

Demo-features - Home page (modified)

Promo paragraphs are internal page teaser paragraphs. All promo paragraphs are uniform and there is a single promo paragraph type. New promos can be added on any page.

Demo-project - Home page

Form paragraphs are available on the Contact Form and Public Users Management templates. Whereas the Contact Form templates allows for the inclusion of a single web form, the Public Users Management templates facilitates the creation of a number of different forms suitable for managing user registration. Each form comprises of three essential paragraph types: a Form Settings paragraph, one or more Field Set paragraphs and any number of individual field paragraphs within each Field Set paragraph.

The available types of field paragraphs in the demo-project and demo-features sites are:

  • Text field;

  • Password field;

  • Hidden field;

  • Text field group;

  • Selection;

  • File;

  • Submit button.

The screenshot below shows a couple of the available field paragraphs.

Demo-project - Service - Contact page


Each paragraph type referred to above is discussed individually in Paragraph Types.

All templates, except the Home, Contact Form and Search Result templates, contain a header paragraph, which is a body content paragraph, in the first position of the main area.

Below the header paragraph in the main area:

  • the Section template contains teaser paragraphs;

  • all other templates contain body content paragraphs.

The extras area of all templates that have an extras area, and the promos area of all templates contain teaser paragraphs.

Demo-project - About page - Section template

Demo-project - About - Articles - Standard Article page - Article template

The logic behind this structure is that the higher-level pages, which are normally based on the Section template, promote or tease the content of the lower-level pages.

Inherited Paragraphs

Inherited paragraphs allow you to include identical extras or promo paragraphs on all subpages within a hierarchical group of pages. This function is extremely useful when you want to create some uniformity within a page group, and allows you to fill new pages quickly.

Lower-level pages can inherit most types of teaser paragraphs that are available in the extras area of any template containing an extras area.

Inherited paragraphs are easily identifiable, as they have no edit bars above them. Inherited paragraphs can only be edited or deleted on the page on which they were created.

Demo-project - About page (modified)

Demo-project - News and Events - Events Overview - New Year's Eve page

Creating inherited paragraphs are discussed in the individual Paragraph Type sections.

Content Area Specifics

The page template defines the positioning and the paragraph categories and types that may be inserted in any specific content area.

In the demo-features website, the subpages of the Areas page demonstrate the various content areas.

Header Area

The header area is created on the Home page and inherited by all other pages of the site. It can only be edited on the Home page. On all pages other than the Home page, there are no edit bars in the header area.

The logo image and slogan are inserted in the Page Info dialog, and the template automatically renders the navigation bar and search box. Working in the Page Info dialog is discussed in Setting Page Information - Home Page. It is possible to change the navigation bar in the header area from a one- to a two-tier structure, and this is discussed in Standard Templating Kit - Navigation (link).

A series of Internal Link paragraphs may be added in the top right-hand corner of the header area. How to add these paragraphs is discussed in Paragraph Types - General Body Content Paragraphs - Link Paragraph in Header.

Demo-project - Home page

Section Banner Area

The section banner area is included in all general and most special templates, unless they are configured differently. In the demo-project and demo-features websites, only the Contact Form, FAQ and Search Result templates do not contain a section banner area.

The section banner displays at the top of the page between the horizontal navigation bar and the body content of the page. The section banner consists of a single paragraph, the Section Banner paragraph.

Demo-project - News and Events page

The Section Banner paragraph is only available on the Section template and all subpages, other than those also based on the Section template or those that do not have a section banner area, inherit this paragraph. The Section Banner paragraph can only be edited on a section page.

Demo-project - News and Events - Events Overview page

Main Area

On all templates the first content column is larger the than the other columns. This column is referred to as the main area. The main area differs from template to template and generally is the area that distinguishes each template.

Demo-project - About - Articles - Standard Article page

The main area of the Home template contains teaser paragraphs in sequential rows of three.

Demo-project - Home page

All templates except the Home, Contact Form and Search Result templates contain a header paragraph, which is a body content paragraph, in the first position of the main area.

On the Section template, the main area contains a header paragraph followed by the Opener paragraph, which is an internal page teaser. Below these paragraphs, it is possible to add numerous different types of teaser paragraphs and you can add as many paragraphs as you like.

Demo-project - About section page - Section template

On all general templates, i.e. the Article, Large Article, Event, News, Glossary Term templates, numerous different types of body content paragraphs may added below the header paragraph, and you may add as many paragraphs as you like.

Demo-project - About - Articles - Standard Article page (modified) - Article template

On all special templates containing a header paragraph, a template-specific body content paragraph follows the header paragraph in the main area and it is not possible to add any further paragraphs below it.

Demo-project - News and Events - Event Overview page (modified) - Events Overview template

The main area of the Search Result template consists of only a template-specific body content paragraph, the Search Result paragraph, and it is not possible to add further paragraphs below it.

Demo-project - Service- Search Result page (modified) - Search Result template

The main area of the Contact Form template consists of a Form Settings paragraph followed by one or more Field Set paragraphs. Within each Field Set paragraph, a number of individual Field paragraphs may be inserted.

On certain special templates, such as the Home, Image Gallery, FAQ and Glossary templates, the template design does not allow for the inclusion of an extras area and the main area is larger.

Demo-project - Multimedia - Image Gallery page

Extras Area

The extras area is the column to the right of the main area. The extras area is used to display teaser paragraphs on all templates that contain an extras area, and numerous types of teaser paragraphs may be inserted. You may insert as many teaser paragraphs as you like.

Demo-project - About page

On certain templates, such as the Home, Image Gallery, FAQ and Glossary templates, the template design does not allow for the inclusion of an extras area.

Promos Area

The promos area is the column on the far right of the page on all templates and contains teaser paragraphs.

Demo-project - About page (modified)

Promo paragraphs are internal page teaser paragraphs, which are usually used to promote sections of the site or specific offers. In the promos area there is no choice of paragraph type and only a single, unique and uniform promo paragraph type can be inserted.

On medium sized screens, when the templates adapt to a user's screen resolution, the promos area moves from the right of the screen to below the main and extras areas.

Base Element Area

The base element area is above the footer area and spreads across the entire page. There is a base element area on all templates.

The base element area is used to display teaser paragraphs and it is possible to insert a Teaser Group - Carousel and/or a Category Cloud paragraph.

Demo-project - Home page

Footer Area

Like the header area, the footer area is created on the Home page, inherited by all other pages of the site and can only be edited on the Home page. On all pages other than the Home page, there are no edit bars in the footer area.

The footer area consists of a single paragraph into which footer elements or subparagraphs may be inserted.

Demo-project - Home page (modified)

The Home template offers the choice to insert two types of footer elements or paragraphs: the Footer Links and the About this Site paragraph.

Demo-project - Home page

Stage Area

The stage area is unique to the Home page template is located between the header and main areas.

Demo-project - Home page

The Stage consists of a single paragraph and either a Stage Teaser or Teaser Group - Stage Paging paragraph may be inserted. The Stage paragraph can be deleted, but not moved

Page Templates

All Magnolia web pages are template-based.

The demo-project and demo-features sites contain a number of different templates, which are well demonstrated on the on the Content Templates and Special Templates section pages of the demo-features site.

There are two categories of templates: general and special templates.

General templates include the Section, Article, Large Article, News, Event and Glossary Term templates.

Special templates include the Home, Image Gallery, Glossary, FAQ, Site Map, Contact Form, Public Users Management, Search Results, Event Overview, News Overview and Category Overview templates.

The page templates available vary according to the page levels in AdminCentral:

  • The Home template is unique to level-one pages and is not available for use for any other-level pages. Similarly, it is not possible to use any of the other available templates on new level-one page.

  • Level-two pages may be based on any one of nine templates. These are the Section, Contact Form, Search Result, Site Map, Glossary, News Overview, Glossary Letter, Events Overview and Category Overview templates.

  • Level-three pages may be based on the templates available for level-two pages and, in addition, on the Article, Large Article, News, Event, Glossary Term, Image Gallery, FAQ and Public Users Management templates, i.e. all available templates except the Home template.

  • Level-four and lower-level pages, i.e. level-five, six etc., may be based on all templates available for level-three pages, except the Section template.

The template used to create any particular page can be viewed in the Template column of AdminCentral.

The common characteristics of all templates are:

  • The header and footer section is inherited from the Home page;

  • A base element can be inserted above the footer section;

  • A promos area is included to the right of the other content areas.

The section banner is included at the top of the page below the navigation bar on all general and special templates, except the Contact Form, FAQ and Search Result templates.

The remaining areas of the templates, i.e. the main and extras areas, vary from template to template, and can accommodate the content of virtually all types of web pages.

Section Template

The Section template is designed to create section pages, but can also be effectively used to create subsections.

The Section Banner and Opener paragraphs are unique to the Section templates.

All subpages of the section page, inherit the Section Banner paragraph and it can only be amended on the section page. Inserting content in the Section Banner paragraph is discussed in Paragraph Types - Special Paragraphs - Section Banner Paragraph.

The Opener paragraph is an internal page teaser paragraph. Inserting content in the Opener paragraph is discussed in Paragraph Types - Teaser Paragraph - Opener Teaser Paragraph.

The main area consists of firstly a header paragraph, then the Opener paragraph and then various types of teaser paragraphs. Below the header and opener paragraphs and in the entire extras area, it is possible to insert various types of teaser paragraphs. Some types of teaser paragraphs that are available in the main teaser area are not available in the extras area and vice versa. The template determines the specific paragraph types that are available in each area.

Demo-project - About section page (modified)

The Section template can be used to create subsections within a site, and the main section and all subsections can have different Section Banner paragraphs. For example, the demo-project - About section page has a different section header to the demo-project - About - Articles (subsection) page. This was achieved by using the Section template for both of these pages.

Demo-project - About page - Section Template

Demo-project - About - Articles page - Section Template

General Templates

The Article, Large Article, News, Event and Glossary Term templates are all similar in design. Each has two body content columns. The main area contains body content paragraphs and the extras area contains teaser paragraphs.

The significant difference between these templates is the introductory header paragraph in the main area, which allows you to insert content that is specific to the template type.

On all general templates, below the header paragraph it is possible to insert different types of body content paragraphs, and in the extras area, various types of teaser paragraphs may be inserted. The types of teaser paragraphs available in the extras area is consistent for all templates, but the available types of body content paragraphs vary. On the:

  • Article and Large Article templates, all body content paragraphs are available and in addition, the Teaser Group - Horizontal Tabbed and Finger Tabbed paragraphs.

  • News and Event template, all body content paragraphs are available, except the HTML paragraph.

  • Glossary Term template, all body content paragraphs are available.

In addition, the commenting feature is available in the main area on all templates.

Demo-project - Multimedia - Flash Content page - Article template

The headline and abstract inserted in the header paragraph is included, by default, in all teaser paragraphs that reference the page.

Article Template

The Article template is designed to create article pages with ease, but this format can also be effectively used for multiple purposes. For example in the demo-project site, the Multimedia - Embedded Video, Video Player and Flash Content pages are all based on the Article template.

The Article Header paragraph allows you to include a headline, kicker, date, image, abstract and categories of the article. The print and bookmark functions are rendered automatically by the paragraph.

The headline, kicker, image and abstract are used by default in all teaser paragraphs that reference the page.

Demo-project - About - Articles - Standard Article page (modified)

Inserting content into the Article Header paragraph is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs.

Large Article Template

The Large Article template is designed to accommodate lengthy articles, but this format can also be effectively used for multiple types of information, for example, a research report.

The fields available in the Article Header paragraph of the Large Article template are identical to those of the Article template, i.e. a headline, kicker, date, image, abstract and categories can be included. The significant difference is that the Large Article Header paragraph includes a table of contents that links to the subheadings of the body content paragraphs below the header paragraph. Only paragraphs containing a Subheading field, i.e. Text and Image and Link List paragraphs, are included in the table of contents.

Demo-project - About - Articles - Article with TOC page (modified)

Inserting content into the Article Header paragraph is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs.

News Template

The News template is designed for news articles and is normally used in conjunction with the News Overview template.

The screencast: News Management demonstrates the process of creating a new news page. Please note that this screencast is based on Magnolia 4.0. In Magnolia 4.2 teaser images are no longer inserted in the Page Info dialog, but are acquired automatically. This is discussed in Teaser Paragraphs - Default Internal Teaser Images.

The News Header paragraph allows you to include a headline, kicker, date, location, image and abstract. The print and bookmark functions are rendered automatically by the paragraph.

Demo-project - News and Events - News Overview - Annual Report Presented page (modified)

Inserting content into the News Header paragraph is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs.

Event Template

The Event template is designed for event-specific details and is normally used in conjunction with the Events Overview template.

The Events Header paragraph allows you to include a page headline, event title, start and end date and time, location, link title, URL, abstract and image. The paragraph is rendered so that event details can be automatically imported into calendaring software like Outlook or iCal, and the print and bookmark functions are rendered automatically by the paragraph.

The image does not display in the Event Header paragraph, but the image, headline and abstract is used by all teaser paragraphs that reference the page.

Demo-project - News and Events - Events Overview - New Year's Eve page (modified)

Inserting content into the Event Header paragraph is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs.

Glossary Term Template

The Glossary Term template is designed for content entries of a glossary and is normally used in conjunction with Glossary and Glossary Letter template. The information in the Glossary Terms pages are automatically aggregated on the Glossary and Glossary Letter templates.

The screencast: demonstrates how to create a glossary.

The Glossary Term Header paragraph allows you to include a headline, date, author and abstract. The paragraph automatically renders the print and bookmark functions.

Demo-project - Service - Glossary - A - Art page (modified)

Inserting content into the Glossary Term Header paragraph is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs

Special Templates

Special templates include the Image Gallery, Glossary, FAQ, Site Map, Contact Form, Public Users Management, Search Result, Event Overview, News Overview and Category Overview templates. Each template is designed to accommodate special types of content.

All special templates, except the FAQ, Contact Form and Search Result templates, inherit the Section Banner of the higher-level section page.

Demo-project - Multimedia - Image Gallery page

The main area of all special templates, except the Contact Form and Public Users Management templates, consists of either only a header paragraph, or both a header paragraph followed by a template-specific paragraph. For example, the main area of the Category Overview template consists of only the Category Overview paragraph, whereas the main area of the Image Gallery template consists of the Image Gallery Header paragraph followed by the Image Gallery paragraph.

Demo-project - Service - Category Overview page - Family Category

Demo-project - Multimedia - Image Gallery page

Unlike the general templates, it is not possible to include other types of body content paragraphs in the page area below the header and/or template-specific paragraphs.

The Image Gallery, Glossary and FAQ templates are similar in design. Each has a single body content column, i.e. the main area and no extras area. These templates all have header paragraphs followed by template-specific paragraphs suitable for the intended content.

The Event Overview, News Overview and Sitemap templates are similar in design. Each has two body content columns, i.e. a main area and an extras area. In the main area, these templates all have introductory header paragraphs followed by specific overview paragraphs and the Sitemap paragraph in the case of the Sitemap template.

The Category Overview and Search Result templates are similar in design. Each has two body content columns, i.e. a main area and an extras area. In the main area, these templates have a single paragraph, the header paragraph. On these templates, the header paragraph renders the template-specific content.

The Contact Form and Public Users Management templates are similar in design and are both specifically designed to create web forms. Each has two body content columns, i.e. a main area and an extras area. Form content is created using the Form Settings paragraph followed by one or more Field Set paragraphs, which contain the actual form fields. In this respect, these templates are identical, but the Public Users Management template has an introductory header paragraph and includes the commenting feature, whereas the Contact Form template does not. In addition, on the Public Users Management template it is possible to include multiple types of forms.

On all special templates that have an extras area, various types of teaser paragraphs can be inserted. The type of extras paragraphs available in extras areas is consistent for all templates.

Header Paragraphs

The header paragraphs of the special templates that contain both a header paragraph and a template-specific paragraph i.e. the Image Gallery, Glossary, FAQ, Event Overview, News Overview and Sitemap templates, are all identical and allow you to include a headline and abstract for the page.

Demo-project - News and Events - Events Overview page (modified)

Image Gallery Template

The Image Gallery template is designed to display a gallery of images.

The Image Gallery template has a single body content column consisting of the Image Gallery Header paragraph followed by the Image Gallery paragraph.

The Image Gallery paragraph allows you to select a folder of images from the DMS that will display in the gallery and it is possible to limit the number of images displayed.

Demo-project - Multimedia - Image Gallery page

Inserting content into the Image Gallery Header and Image Gallery paragraphs is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs and Template-specific Body Content Paragraphs - Image Gallery Paragraph.

Glossary Template

The Glossary template is designed to create a glossary page and is used in conjunction with the Glossary Letter and Glossary Term templates. The Glossary template aggregates glossary term pages into a single overview page. Glossary letter pages are generated automatically by Magnolia as soon as a new glossary is created. Glossary letter pages aggregate all the glossary term pages of a particular letter of the alphabet.

The screencast: demonstrates how to create a glossary.

The Glossary template has a single body content column consisting of the Glossary Header paragraph followed by the Glossary paragraph.

Demo-project - Service - Glossary page

Glossary letter pages, which are based on the Glossary Letter template, are automatically generated and there are therefore no edit bars in the main area.

Demo-project - Service - Glossary - Letter "A" page

Inserting content into the Glossary Header and Glossary paragraphs is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs and Template-specific Body Content Paragraphs - Glossary Paragraph.

FAQ Template

The FAQ Template is designed to create a Frequently Asked Questions (FAQ) page. On this template, each question can be preceded by an automatically created index, which allows the user to expand and or collapse the answers.

The screencast: Frequently Asked Questions (FAQ), provides a brief overview of the FAQ template.

The FAQ template has a single body content column consisting of the FAQ Header paragraph followed by the FAQ paragraph.

Demo-project - Service - FAQ page

Inserting content into the FAQ Header and FAQ paragraphs is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs and Template-specific Body Content Paragraphs - FAQ Paragraph.

Site Map Template

The Site Map template renders an automatically generated site map. It can be configured to display only parts of a site, which is useful for micro-sites. Other options allow you to restrict the depth of the site-map and chose the information to display within the site-map.

This template has two body content columns, i.e. a main area and an extras area. The main area consists of the Site Map Header paragraph followed by the Site Map paragraph.

Demo-project - Service - Site Map page

Inserting content into the Sitemap Header and Sitemap paragraphs is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs and Template-specific Body Content Paragraphs - Site Map Paragraph.

Events Overview Template

The Events Overview template is designed to display a summary of all events. It automatically aggregates all content pages based on the Event template on the site and displays them, month-by-month, on a single page. The automatically generated page displays events for the current month with links to previous and future months. Within a specific month, you can specify the number of results displayed per page, resulting in a number of paginated pages. Aggregation and display can be restricted to events found on a specified sub-tree of pages, i.e. a specific page and all its subpages. This allows you to have several different sections on your site displaying different types of events.

The screencast: provides an overview of the Events Overview template.

The Events Overview template has two body content columns, i.e. a main area and an extras area. The main area consists of the Events Overview Header paragraph followed by the Events Overview paragraph. When a new page based on this template is created, the calendar paragraph automatically displays as the first teaser paragraph in the extras area and the dates on which there are events are highlighted. The Calendar paragraph may be moved or deleted.

Demo-project - News and Events - Events Overview page (modified)

Inserting content into the Events Overview Header and Events Overview paragraphs is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs and Template-specific Body Content Paragraphs - Events Overview Paragraph.

News Overview Template

The News Overview template is designed to display teasers to the latest news and is very similar to the Events Overview template. It automatically aggregates all content pages based on the News template and displays them on a single page. News articles are displayed in descending date order, i.e. the most recent is displayed first and thereafter the less recent. You can specify the number of results displayed per page, resulting in a number of paginated pages. Only news with a current or earlier publishing date is displayed and future news articles, if any, are excluded. Aggregation and display can be restricted to news articles found on a specified sub-tree of pages, i.e. a specific page and all its subpages. This allows you to have several different sections on your site displaying overviews of different types of news.

The News Overview template has two body content columns, i.e. a main area and an extras area. The main area consists of the News Overview Header paragraph followed by the News Overview paragraph.

Demo-project - News and Events - News Overview page (modified)

Inserting content into the News Overview Header and News Overview paragraphs is discussed in Paragraph Types - Body Content Paragraphs - Header Paragraphs and Template-specific Body Content Paragraphs - News Overview Paragraph.

Category Overview Template

The Category Overview template is designed to display a summary page of all articles pages that have been assigned a specific category. It is very similar to the Events and News Overview templates. It automatically aggregates all content pages based on the Article or Large Article templates within a specific category and displays them on a single page.

When a user clicks on a category listed in the Article Header paragraph of any article, all the articles assigned that category display on the category overview page.

Demo-project - About - Articles - Standard Article page

It is only necessary to set up a single Category Overview page, which will be used for all categories. For each category, the overview page is generated automatically and no further configuration is necessary. You can specify the number of results displayed per page, resulting in a number of paginated pages. Typically, the category overview page is hidden in the navigation, as the page only renders meaningful content if it is requested for a specific category.

The Category Overview template has two body content columns, i.e. a main area and an extras area. The main area consists of a single paragraph, the Category Overview Header paragraph. In the extras area, the Related Categories paragraph displays automatically in the first position, but you can move or delete this paragraph.

Demo-project - Service - Culture Category Overview page (modified)

Categories are managed in the Data workspace and are easy to set up and manage. This is discussed in Working in the Data Workspace - Categories (link).

Inserting content into the Category Overview Header paragraph and Related Categories paragraph is discussed in Paragraph Types - Header Paragraphs - Category Overview Header Paragraph and Teaser Paragraphs - Standard Teasers - Related Categories Teaser Paragraph.

.

Search Results Template

The Search Result template is designed to display a summary page of all pages containing a selected search term.

Typically, the search result page is hidden in the navigation, as the page only renders meaningful content if a search term is entered in the Search box, which is displayed on each page. You can specify the number of results displayed per page, resulting in a number of paginated pages. It is also possible to specify the positioning of the links to further pages, i.e. to pages 2, 3, etc. Within the search results, the search term is highlighted in yellow.

The Search Result template has two body content columns, i.e. a main area and an extras area. The main area consists of a single paragraph, the Search Result paragraph.

Demo-project - Service - Search Site page (modified)

Inserting content into the Search Result paragraph is discussed in Paragraph Types - Template-Specific Body Content Paragraphs - Search Result Paragraph.

Contact Form Template

The Contact Form template is designed to create configurable custom forms and paragraphs specifically designed for forms can be included.

The Contact Form template has two body content columns, i.e. a main area and an extras area. The first paragraph in the main area is the Form Settings paragraph, which is followed by one or more Field Set paragraphs. The individual elements of the form are created using various types of Field paragraphs, which are grouped together within each Field Set paragraph. Form data can be validated and sent via email or logged to the file system, and a separate confirmation mail can be sent.

Demo-project - Service - Contact page

Inserting content into the various Form Paragraphs is discussed in Paragraph Types - Form Paragraphs.

Public Users Management Template

The Public Users Management template is designed to create all the forms necessary for public user registration and management. The specific forms are discussed in Public User Registration.

This template allows you to include multiple forms suitable for public user registration and management on a single page, if appropriate. Each form has its own settings and behaviors. Additionally, the Article Header paragraph and the commenting feature are included and it is also possible to insert Text and Image and Link List paragraphs in the main area.

There are two body content columns, i.e. a main area and an extras area.

Demo-project - Members Area - Login page (modified)

Inserting content into the various paragraphs is discussed in Paragraph Types - Form Paragraphs.

Images

Automatic Resizing

Magnolia's imaging engine significantly simplifies working with images. A single source image is used to generate many different image sizes. The imaging engine automatically resizes, crops and caches the image to fit into the different areas of the site.

The screencast: Imaging Engine (scale, crop & filter images), provides an overview of the imaging engine.

To demonstrate the principle, we inserted the "grey keyboard 588x368.jpg" image into the Section Header paragraph and then added an extras paragraph and a promo paragraph to the demo-project - About page. The original image has automatically been resized to fit into the different areas.

Demo-project - About page - Section Header paragraph (modified)

Demo-project - About page - extras and promo paragraphs (added)

Inserting Images

The Digital Asset Management tool offers the choice to upload an image from your computer or to insert an image from the DMS.

In the editing window, numerous dialogs facilitate the insertion of images. The use of the various dialogs is discussed in the relevant individual sections, but the upload and insertion processes are collectively discussed here.

In the numerous dialogs that allow you to include an image, there are radio buttons offering the choice to either upload an image or insert one from the DMS. For example, on any of the body content templates it is possible to insert a new Text and Image paragraph below the header paragraph. The Text and Image paragraph is inserted in the Text and Image dialog, and in this dialog, the first section of the Image tab area offers the choice to either upload or insert an image.

When you click on either alternative, the dialog reloads to display the set of controls applicable to your choice.

Uploading Images

To upload an image from your computer:

  • Select the Upload option by clicking within the small circle next to this option and the radio button will indicate your selection. When you select this option, the dialog reloads to display input options relevant to uploading a file.

  • Next, click on the Browse button to the right of the field.

  • When you click on the Browse button, in Windows the standard Choose File to Upload dialog opens where you can navigate to the file you would like to upload. In this dialog, navigate to the file and either double-click on the file name, or click on the file name to highlight it and then click on the Open button in the bottom right-hand corner of the dialog.

  • When you click on the Open Button, the Choose File to Upload dialog closes returning you to Magnolia's dialog, where the file path of the file that you are uploading appears in the field next to the Browse button and the file name and file extension in the boxes beneath it.

  • When you save the contents of the dialog, the image appears in the paragraph in the editing window.

Demo-project - About - Articles - Standard Articles page (modified)

  • If, at a later stage you reopen the dialog, a thumbnail of the uploaded file, the file name and extension, and a Remove file button appears in the Image tab area of the dialog.

  • To upload a new image, click on the Remove file button. The current image will be removed and the dialog will reload to display the Browse button, which allows you to navigate to and upload a new image.

As an alternative to uploading an image when creating a paragraph, you could first upload it to the DMS and then insert it from the DMS in the dialog. This way, it will be available for further use without the necessity of uploading it again. How to upload a file to the DMS is discussed in Documents Workspace - Uploading Single Documents and Files (link).

Inserting Images from the DMS

To insert an image from the DMS:

  • Select the DMS option by clicking within the small circle next to this option and the radio button will indicate your selection. When you select this option, the dialog reloads to display input options relevant to inserting a file from the DMS.

  • Next, click on the Internal Link button on the right of the field.

  • When you click on the Internal Link button, a new dialog containing the file structure of the DMS opens. In this dialog, select the image that you would like to insert by clicking on the file name, and then click on the OK button at the bottom of the dialog. When you click on the file name, the file path of the selected file appears in the last row of the dialog.

  • When you click on the OK button, the DMS dialog closes returning you to the first dialog where the DMS file path of the selected file appears in the Choose Internal Image field.

  • When you save the contents of the dialog, the image appears in the paragraph in the editing window.

Demo-project - About - Articles - Standard Articles page (modified)

Inserting Dates

In the editing window, numerous dialogs facilitate the insertion of a date and/or time. The use of the various dialogs is discussed in the relevant individual sections, but the date insertion process is collectively discussed here. For example, the Article Header dialog, accessed by clicking on the Edit Article Header button on any page based on the Article Template, has a Date field, which allows you to include the date of an article, and on the Event template, the Start Date and Time of the event is a mandatory field in the Event Header dialog. Mandatory fields are indicated by an * in the dialogs.

Article Header dialog

News Header dialog

In the date fields, you have the option to either insert the date and/or time manually or use the Select date button to access the calendar.

Manual dates should be in the yyyy-mm-dd format and where a time is required, it should be in the hh:mm:ss format.

In the editing window, dates display in the dd-mm-yyyy format.

Demo-project - About - Articles - Standard Article page (modified)

The Select date button allows you to select a date from a calendar. To use this function, click on the Select date button and the calendar will appear.

The calendar is simple to use and offers many possibilities. When you point to the different areas of the calendar, the instructions relevant to the area pointed to appear in the row at the bottom of the calendar. For example, if you mouse over the greater-than sign in the second row, to the right of the word "Today", the instructions in the bottom row will change to "Next month (hold for menu). Following these instructions, if you then click on the greater-than sign, the calendar will display the following month, and if you click and hold on the greater-than sign, a drop-down menu containing all the months of the year appears. You can select the appropriate month from the menu by clicking on it. The different options on the calendar work in the same way and are annotated in the screenshot below.

Once you have located the date you would like to insert, click on it, and it will be inserted into the Date field in the dialog.

Where a time is required, the calendar has an additional row at the bottom that allows you to select the time.

Linking Internally

In numerous dialogs opened from the editing window, it is possible to include links to internal pages, files, contacts and RSS aggregators.

For example:

  • When creating an Internal Page Teaser paragraph in the Teaser dialog, the Page field in the Teaser Main tab area, allows you to link to an internal page of the site.

  • When creating a Download File Teaser paragraph in the Teaser dialog, the Download File field in the Teaser Main tab area, allows you to link to an internal file in the DMS.

The Internal Link button facilitates the linking process and in all dialogs that allow for internal linking there is an Internal Link button on the right of the relevant field.

The use of the various dialogs is discussed in the relevant individual sections, but the linking process is collectively discussed here.

The process is identical irrespective of whether you are linking to a page, file, contact or RSS aggregator, except that the information contained in the dialog that opens when you click on the Internal Link button is relevant to the type of link that you are inserting.

Linking to Internal Pages

To link to an internal page:

  • In the relevant field of the dialog, click on the Internal Link button on the right of the field.

  • When you click on the Internal Link button, a new dialog containing the entire page structure opens. In this dialog, select the page that you would like to link to by clicking on the page name, and then click on the OK button at the bottom of the dialog. When you click on the page name, the file path of the selected page displays in the last row of the dialog.

  • When you click on the OK button, the second dialog closes returning you to the first dialog, where the file path of the selected page appears in the field.

Linking to Internal Files

To link to a file in the DMS:

  • In the relevant field of the dialog, click on the Internal Link button on the right of the field.

  • When you click on the Internal Link button, a new dialog containing the file structure of the DMS opens. In this dialog, select the file that you would like to link to by clicking on the file name, and then click on the OK button at the bottom of the dialog. When you click on the file name, the file path of the selected file displays in the last row of the dialog.

  • When you click on the OK button, the second dialog closes returning you to the first dialog, where the file path of the selected file appears in the field.

Categories

Magnolia's categorization feature allows you to assign categories to articles and teasers to all articles in a category display on the category overview page of the selected category.

The screencast: Categories view provides an overview of the categorization feature,

On all pages based on the Article and Large Article templates, it is possible to assign categories to an article and to include a list of categories in the Article Header paragraph. The category overview page, which is normally not included in the navigation structure, can be accessed either by clicking on a category in the list on the article page or in a category cloud.

Demo-project - About - Articles - Standard Article page

Demo-project - About - Articles - Standard Article page - Base Element area (modified)

The Category Overview template aggregates all article pages that have been assigned to the specific category. When you click on a category, Magnolia automatically creates the overview page for the selected category.

Demo-project - About - Articles - Standard Article - Family Category Overview page

It is only necessary is to create a single page based on the Category Overview template. This page will be used automatically for all categories.

Inserting content into the Category Overview Header paragraph is discussed in Paragraph Types - Header Paragraphs - Category Overview Header Paragraph.

Commenting

Magnolia has built-in commenting. On any page based on the Article, Large Article, News, Event, Glossary Term and Public Users Management templates, it is possible to include a commenting section on the page.

Demo-project News and Events - Events Overview - New Year's Eve page

When commenting is enabled on a page, users are encouraged to comment on the subject matter of a page.

Demo-project - About - History page

To enable commenting, simply click on the Enable commenting button on any page on which the function is available and a commenting section will be included on the page.

The screencast User Generated Content (UGC) provides an overview of the Commenting module.

The Forum module can be used to moderate commenting and this is discussed in Forum Workspace (link).

The Public User Registration module facilitates user registration, which allows users to register on the site, and this is discussed in Public User Registration.

Print and Bookmark Functions

The header paragraphs in the main area of the Article, Large Article, Event, News and Glossary Term templates automatically render Print and Bookmark functions that allow users to either print or bookmark a page.

Demo-project - About - Articles - Standard Article page

When a user clicks on the Print icon, the content in the main and extras areas of the article, news, event or glossary term page prints, with the main content appearing first and the extras content beneath it. The navigation column and promos area are excluded from the printed document, and the header area is replaced with the print logo.

Demo-project - About - Articles - Standard Article page - print format

When a user clicks on the Bookmark icon, a drop-down list offering numerous bookmarking options appears.

Demo-project - About - Articles - Standard Article page

Public User Registration

The Public User Registration module provides the functionality to register and manage users on the public site of magnolia. Registered, logged in users can access private or personalized content that is not available to normal users and comment on content.

The Public Users Management template allows you to include multiple forms, which are available in the form of paragraphs, and are specifically designed for this purpose. These unique paragraphs are:

  • Login Form paragraph;

  • User Registration Form paragraph;

  • Users Profile Update Form paragraph;

  • Password Retrieval Form paragraph;

  • Logout Form paragraph;

  • Members Area paragraph.

How to create and use the form paragraphs is individually discussed in Paragraph Types - Form Paragraphs and the Members Area paragraph is discussed in General Body Content Paragraphs - Members Area Paragraph.

Screen Resolution

Magnolia templates are designed to be adaptable to a users screen resolution. The templates automatically detect the size of the user's screen and dynamically adapt to it. The web page content automatically rearranges to make optimum use of the available screen space.

The screencast: Dynamic viewport adoption demonstrates this concept.

For example, on the Home page of the demo-project website on:

  • Large screens, the teaser paragraphs in the main area, display in vertical rows of three, and the promos area displays as a vertical column.

Demo-project - Home page (modified)

  • Medium screens, the teaser paragraphs in the main area, display in vertical rows of three, and the promos area is moved to below the main area and displays in a row, as opposed to a column.

Demo-project - Home page (modified)

  • Small screens, the teaser paragraphs in the main area, display in vertical rows of two, and the promos area is moved to below the main area and displays in a row, as opposed to a column.

Demo-project - Home page (modified)

This concept is discussed and demonstrated in Demo Project Website - Adaptable Screen Resolution (link).

For the screenshots in this manual, the screen resolution was adapted to show all or most of the relevant information and most screenshots were taken on a large screen. Any explanations regarding positioning assume the large screen resolution. Please bear this in mind if you are viewing Magnolia on a medium or small screen.