Publish Web Content Efficiently with Magnolia CMS [con't]
Create a Contact Form
A contact form is a very common requirement of most Web sites, and Magnolia CMS makes it easy to add this via its Contact Form template. To see how this works, click your way through the site menus until you reach the "Inquiry Form", where you'll see something like Figure 21.
Figure 21: The Default Contact Form Template with Editing Controls Displayed
To begin adding the form, use the New Fieldset option and enter a title for the fieldset (leave blank for no title), as shown in Figure 22.
Then use the New Field option to add fields to the form, as shown in Figure 23.
Figure 23: Configuring the Contact Form Input Fields
As Figure 23 illustrates, the Contact Form template supports a number of different field types, including standard text fields, password fields, hidden fields, selection groups, file fields and submit buttons. For each field, you can specify a field name, label, validation and whether or not it is mandatory. Figure 24 illustrates the process of setting up form fields.
Figure 24: Configuring the Contact Form Input Fields
When you've got all the fields defined, use the Edit Form Settings -> Form dialog to define the form title, name, message and marker for required fields, as shown in Figure 25.
Figure 25: Configuring the Contact Form Template
You can also link form fields to email message fields with the Edit Form Settings -> E-Mail dialog, which lets you specify the email recipient of form submissions, together with the message subject, message type and message body. Figure 26 illustrates an example of how this dialog can be completed.
Figure 26: Configuring the Contact Form Email Template
Figure 27 illustrates what the end result looks like.
Figure 27: The Populated Contact Form Template
Attach Custom Styles
From the previous sections, it should be clear that Magnolia's STK offers templates for most common uses, and a fair number of options to let you customize these templates without needing to know any JSP or Freemarker programming.
Now, although Magnolia's templates are very easy on the eye, you can't always use them as is. At the very least, you'll usually need to customize the appearance and colors of each page. This too is extremely easy to do, because Magnolia allows you to collect all the CSS and JavaScript files for a particular site into a single "theme," and then apply this theme to the entire site.
By default, the STK includes a default theme called "pop." It's this theme (black, white and pink) that you've been seeing in all the screenshots so far. However, it's extremely easy to create your own theme as well. To do this, head back to the AdminCentral -> Templating Kit -> Themes workspace, where you'll see something like Figure 28.
Figure 28: The Default Theme Definition
Figure 28 displays some of the resources that make up the "pop" theme. You can find the corresponding CSS and JS files within the AdminCentral -> Templating Kit -> Resources workspace, as shown in Figure 29.
Figure 29: The Default Theme Resource Files
To create a new theme, simply copy the existing theme and its resources to a new folder and give it a different name. You can then use the AdminCentral -> Templating Kit -> Resources workspace to modify the CSS files for your theme to customize the appearance of the output pages, as shown in Figure 30. For a complete reference to CSS, take a look at this link.
Figure 30: Editing CSS Files in the Magnolia AdminCentral Workspace
To see your new CSS and JavaScript in action, head to AdminCentral -> Site Configuration and set the theme.name property to your new theme, as shown in Figure 31.
Figure 31: Activating the New Theme
When you next head to the preview pane, your new theme will be applied to every page. Figure 32 shows a couple of examples.
Figure 32: The New Theme Applied to Content and Home Page Templates
Remember that you can also reorder and move the page nodes around, simply by dragging and dropping them at the appropriate point in the AdminCentral -> Website workspace.
Publish Final Content
When you've got the content set up and styled to your satisfaction, the final step is to publish it.
You can download a Magnolia "bundle" that includes preconfigured versions of both Apache Tomcat and Magnolia. The Magnolia bundle comes pre-configured with two instances: an authoring instance and a public instance. The authoring instance is the instance you've been using so far, and it's specifically designed to allow authors and content editors to set up and populate CMS pages. The public instance is what the rest of the world will see, and it's where editors publish the result of their work in the authoring instance.
There are a couple of good reasons for this separation. First, it allows experimentation and testing to be performed in the authoring instance without affecting the public instance, and it also allows content problems to be identified in an "almost real" environment prior to the content going live. Second, it provides an additional layer of security, as it becomes possible to disallow login access to the public instance (which is on the public Internet) while still allowing editors to access the authoring instance (which can be placed behind a secure firewall).
A complete list of the differences between authoring and public instances can be found here
In order to publish content from the authoring instance to the public instance, you need to perform two steps:
- Configure the public instance as a subscriber of the authoring instance -- This can be done in the AdminCentral -> Configuration -> Subscribers workspace. If you're using the Magnolia bundle, this step is already done for you, as shown in Figure 33.
Figure 33: Configuring Magnolia Subscriptions
Magnolia supports multiple public instances per authoring instance, meaning that you can control multiple sites using a single authoring instance.
- Publish the content nodes from the authoring instance to the public instance -- This is done by activating them in the AdminCentral -> Website workspace on the authoring instance. Node status is shown as one of a set of three traffic lights: red for inactive (unpublished), green for active (published) and orange for active but modified.
To see this in action, navigate to the AdminCentral -> Website workspace, right-click the root node of the pet store node tree and select Activate incl. sub pages (see Figure 34). Performing this step will "push" the node (and all its children) to the public instance. You should then be able to view the content in the public instance, by browsing to the URL https://localhost:8080/magnoliaPublic/my-pet-store. You can, of course, configure Tomcat later to set this URL as the default Web server document root to use for all HTTP requests.
Figure 34: Activating and Publishing Content Nodes
Remember that you must also activate your updated theme definitions and resources to the public instance in order for the updated styles to be used correctly.
Note that before publishing content from the authoring instance to the public instance, you should ensure that the public instance is completely updated with all the libraries used in the authoring instance, including the STK. The procedure to accomplish this is the same as that performed for the authoring instance, as explained previously.
Summary
Magnolia provides a full-featured CMS for content-heavy Web sites, as well as a powerful, graphical interface to manage and update content. Its tree-based document management system allows for maximum flexibility when outlining Web site navigation structures, and its multi-tiered publishing process ensures security and reliability. Finally, its support for third-party modules, plus its rich templating kit, allows for extensive customization of the core engine to support custom requirements.
The topics discussed in this article are just the tip of the Magnolia iceberg. However, hopefully they will have encouraged you to try it out the next time you have a Web site to create. Remember that, as with all open source projects, your participation is crucial -- so try it out, get support from other users on the Magnolia mailing lists or learn more from the community wiki!
Find a programming school near you
