Overview

Update: A newer version of this article is available here, for use with Magnolia 5.

This blog article is one of a series of articles by Priocept that provide introductory training material for the Magnolia CMS system. There are further articles on Magnolia and training; see also Getting Started with Magnolia CMS.

Introduction

This example follows a site editor making minor changes to a page in a Magnolia CMS website and then publishing that change for public viewing. It uses the Magnolia CMS Demo Area, hosted by Magnolia International to provide an area for exploring and practising. Because this website is publicly accessible some text and pages may appear differently to how it does below. Should the website appear completely different, it will be restored to its original state in no longer than thirty minutes.

The demo site is available at:

Please note that because this site is refreshed every thirty minutes, it may become unavailable while you are working. It will be restored very shortly after becoming unavailable but your changes will be lost.

This example uses one editing user for all tasks. The username is “eric” and the password is the same.

In the second part of the article you will require three image files. These are available for download below. To save an image to your own computer, right-click each one and select the option “Save picture as” or “Save image as” and then navigate to a suitable location.

Part One – Editing Text

Logging In

When first arriving at the authoring instance, the user is presented with a login screen. This prevents unauthorised editing of pages and also allows Magnolia to build up an audit log recording not just what changes but who makes the changes.

Login using the username “eric” and the password “eric“.

Admin Central

Once logged in, you are presented with a view of the demo site’s homepage in edit mode. We will return to this view shortly but we must start in Admin Central, the centre of all Magnolia editing activity. At the top of the page is a green edit bar with a button on it marked “Admin Central”. Click this.

You are now in Admin Central. The menu on the left hand side provides access to various control areas and changes to provide access to extra modules when these are added. The default view at the top of the menu is the website view which provides access to every page in the website. It is via this view that you will make your text changes.

Website Structure

The website you will be editing is represented in a tree structure with the homepage at the base of the tree which is then expanded to cover the different sections and the pages within them.  The tree can be explored by opening and closing branches using the plus and minus signs next to a section name. Explore the tree until you find the articles listed under demo-project/about/ subsection-articles.

Opening a Page for Editing

The article “an interesting article” is the target of your editing work so you must first open it in order to see what it currently contains and what can be changed. There are two ways to do this:

• Right-clicking on any page entry in the tree will launch a menu with an “Open page” option.
• Double-clicking on the page’s small icon will also open the page.

Right click the page entry in the tree and select “Open page. . .”

In-Page Editing

The selected article is now shown in edit mode. This shows the article as it will appear to a public viewer but with green edit bars that allow access to the page’s editing dialogs.

The first of these, at the top of the page, contains links to a preview mode which shows the same page without the green bars, almost exactly as the public would see it; a link back to Admin Central and a button to launch a pop-up dialog with some metadata for the page.

Inside the page there are further edit bars which control the different paragraphs that make up the page. In Magnolia the term paragraph can refer to a literal paragraph of text or another page element such as a header, an image, a preview of another page or any other combination of  page elements.

These bars always appear directly above the paragraph they control so scroll down to the paragraph with the heading “More interesting” and click the edit button on its edit bar.

Edit Dialog

Every editable paragraph has an associated form called, in Magnolia parlance, a dialog. The dialog contains menu items for every editable option and allows you to change the paragraph. To keep things well laid out, these dialogs can be separated into tabs, accessed via the green buttons at the top of the dialog. In this case, the paragraph has text entry fields for a subheading and the main text as well as image options accessed via the “Image” tab.

Click the “Image” button to see how the tabs work and then click the “Text” button to return to the text view. This is where will enter your text changes.

Editing Text

The field at the top of the dialog allows you to enter the text of the paragraph’s subheading. Because the format of a subheading is controlled elsewhere it only allows entry of plain text. The larger area below this allows entry of the paragraph’s main text and allows the use of formatting tools through the controls at the top.

To speed up editing, text can be entered by cutting and pasting from another document. If pasting in text from another web page or from a Word document, take care not to use the ordinary paste option as this can cause problems with formatting and styling being copied across. If you want to remove all formatting, use the clipboard icon with the letter T on it to paste text with all formatting removed. If you want to keep basic formatting options like font, colour, bold and italic, use the clipboard icon with the letter W on it.

Try pasting the text below using the “T” option and adding bold styling to the word “edited” and italic styling to “More interesting”.

This text has now been edited. It is the main text of a paragraph called More interesting and was edited via the paragraph’s dialog.

Part Two – Editing Images

After editing the text in a paragraph, you will now change the image. The image to be changed is the photo of three green chairs around a white table from the same “More interesting” paragraph.

There are three ways you might change an image and we will cover all three:

Upload a Completely New Image
You may decide that the image previously chosen is no longer correct and wish to change it for something completely new.

Reuse an Image
If an image is used elsewhere on the site which you want to reuse, there should be no need to store two copies of the same image. Magnolia gives you access to all the images in use and allows you to select one to reuse.

Replace an image
Particularly useful where an image is being used in several places is the option to replace it with an updated image which will then be used everywhere in place of the original. For example, if several pages detailing events at a company’s headquarters use a map image and the company decides to move then the map becomes obsolete and every event must be updated. In this case you can replace an existing image with a new one and update every page or paragraph that uses it.

Uploading a New Image

Open the edit dialog for the same paragraph you changed previously and open the Image tab. The first option here is “Choose image type” which must be changed to “Upload” to allow a completely new image to be uploaded.

Click on the “Browse” button to open a file selection window, browse to the photo of the Magnolia logo you saved earlier and select “Open”.

The image file’s location will be displayed in the upload control.

The name of the selected file will be added to the “Filename” field. If necessary this can be edited so that the image is saved inside Magnolia with a different name.

Click the “Save” button at the bottom of the dialog and wait while the image is uploaded from your computer. The edit dialog will close and the page will reload, showing the new image in place of the old one.

Introduction to DMS

As mentioned previously, sometimes images are reused throughout a website and it would be a waste of space if multiple copies of the same file had to be maintained. For this reason, Magnolia CMS contains a feature called the DMS or Document Management System which organises all the images and downloads within a website.

To access the DMS, return to the Admin Central screen using the link at the very top of the page and select “Documents” from the menu on the left of the page.

The DMS will show a new tree view, this time of folders and the files within them.

Ignoring any other folders that are shown, look into the demo-project folder and find the original green chairs image that was used in the paragraph. It will be stored as demo-project/img/opener/green-chairs-and-white-table. To check this is the correct image, double click the icon next to it or use the right-click menu and the option “Edit document”. When opened, the image will be shown in a dialog along with some metadata fields. If you open the wrong image, just click the cancel button.

Through this interface, images can be edited much like paragraphs but the task here is to add a new image so close the dialog with the cancel button and return to the tree view.

Adding a New Image to DMS

As one of the main roles of the DMS is to help organise images, we must consider where to store our new image. We will use the same demo-project/img path but will add a new folder under img. To do this, right click the img folder and select “New folder”.

A new folder will be created with the default name “untitled”. To change the name, double click on the text, highlight untitled and enter something more suitable such as “new” and press enter.

The tree will refresh to display the new name. Right-click on the newly renamed folder and select “New document” to launch an empty image dialog.

The form should be familiar from the first image replacement exercise. Using the “Browse” button, navigate to the image file called “flower.png” and then add a subject and a brief description of your image.

Click the “save” button to add the new image to the DMS and then open the “new” folder to see an entry for the new image file.

Use an Image from DMS

To make use of the new image, repeat the earlier process of opening a paragraph for editing. To do this, first click the Website option in the left menu, explore the website tree to find the Interesting Article and then right-click and select “Open page. . .”

With the page open in edit mode, find the same paragraph as before and click the “Edit” button in the edit bar.

Open the “Image” tab in the dialog but this time make sure that “Dms” is the selected image type option and click the “Internal link. . .” button. This will launch a tree browser similar to those seen before but in its own pop-up window.

Navigate to the recently added “new” folder and open it to see the newly added image. Before selecting this image, double click on the icon to open the same image dialog seen previously. This will contain the subject and description added before and a preview of the image. This helps ensure the correct image is used.

Close the dialog with the cancel button, ensure the correct image is selected, click OK to close the tree browser and the paragraph dialog will now contain the tree location of the selected image. Click “Save” and the paragraph will update to display the new image.

Replace an Image in DMS

The final usage example of images covers replacing an image file with an updated one. As discussed before, an image used in multiple locations may be replaced in one central location and then used in place of its predecessor. In this example, you will replace the recently added image with a new one and then check that it appears on the Interesting Article page.
Return to Admin Central, open the DMS tree under Documents and find the new image. Right-click it to open the context menu and select “Edit document”. The familiar image dialog will appear with an image preview and a “Remove file” button.

Click the “Remove file” button to remove the uploaded image file.

The image preview will be replaced with the file upload control seen previously. Use this to browse to the pink_flower.png file, updating the subject and description as necessary.
Click the save button to save the update and then return to the Interesting Article via the Website tree. Open the Interesting Article and check that the new image has appeared in place of the one selected previously.