Contao Manual

Contao Web CMSUser’s Manual

web

site

man

ual

Contao Web CMS - Website Manual

web

site

man

ual

Part 1. Getting Started

How to access the administration interface.

The Contao administration interface is completely browser based. The interface works with any browser and any operating system.

To access the administration interface of the website with your username and password:

1. Open your web browser.

2. In the address bar type the URL for the administration interface.

Your admin URL is: _____________________________________________

3. The login screen appears. Type in your username and password and click Enter. Your username and login are:

Username: _____________________________________________

Login: _________________________________________________

4. If the username and password are correct, the administration interface launches in the next window.


web

site

man

ual

The workspace

The screenshot below shows the different parts of the Contao workspace.

Top ToolbarThe toolbar contains basic login/logout items as well as a quick access to the front end preview of the site.

Content Management ItemsThis is where you do a bulk of the editing for the various content items on the site. These could be page text/images (or Articles), FAQ items, News Releases, Calendar Events, eCommerce Products, and reusable Content Blocks, to name a few.

Layout Items and Site StructureThe layout panel holds items that control the appearence of various content, whether it is through a module, style sheet, page layouts, or templates. It also includes the site structure, which is akin to a site map, where you can add/edit/move pages within the site heirarchy in order to create menu items.

Account ManagementThe account manager lets you control user and groups for both back-end and front-end access. Members access the front-end and users access the back-end administration.

File/System ManagementThis section control global settings and lets you upload files/images to the system.

Content AreaThe main window for most of the editing operations.

Top Toolbar

Content Management Items

Layout Items and Site Structure

Account Management

Content Area

File/System Management


web

site

man

ual

Understanding Pages vs. Content

One of the most difficult concepts to grasp for beginners is learning the difference between actual site pages and the content that exists on them. Some first-timers to CMS systems will likely come from the world of static HTML pages where a “page” and its content exist together as essentially the same thing. Database-driven CMS systems operate by separating the content from the design/page/layout, enabling the re-use of single pieces of content across multiple ‘pages’ on the site. Conversely, pages can be configured with modules that will dynamically assemble groups of content on the page according to certain parameters, i.e. upcoming events from an event calendar. Once you understand the difference between ‘content’ and ‘pages’ and are able to separate their distinct properties, you can begin to see the advantages of using a CMS as the foundation for your website.

Static vs. Dynamic

Pages in Contao are created in the Site Structure section under ‘Layout’. For the most part, this site structure will mirror the Site Map of your website in some way shape or form. These pages represent psuedo-containers for the content of your site as well as potential destination URLs for your site vistors. A majority of them will likely represent a 1-to-1 static relationship with the content on your website, meaning that the content for that page is placed directly on that page. For the most part, this content and the pages that contain it are considered ‘static’ in that unless you manually edit them, they will not change.

However, there may also be examples of pages that are designed to contain ‘dynamic’ content. A good example of this is a set of pages that are designed to display a calendar of events. Imagine that you had 100 events to list and also display on their own individual pages when someone clicked on them for more information. Instead of having 101 pages set up for each event and the listing page, you can instead set up 2 pages — a lister page and a detail or ‘reader’ page — and instead include a module that is designed to pass specific parameters to the reader module in order to pull spe-cific event information automatically from the database and display it to the user. That system is much easier, and in this case the page and its content is considered ‘dynamic’ because of its ability to change automatically.

So in the end, Pages can be considered either static or dynamic largely based on what types of Content they contain. More than likely, your web developer has set these up for you, so there is probably not much need for you to modify these on your own, but it is important to keep these general concepts in mind.

Editing

Nearly all of your website content will be contained in one of the Content modules in your back-end administration. Specific modules, such as News and Events, are part of the ‘dynamic’ content structure and will be simply edited in their respective modules. Most of your ‘static’ content editing, however, will take place in the ‘Articles’ section of the administration, and is designed to represent those ‘one-to-one’ content/page relationships, as we shall explore next.


web

site

man

ual

Editing Article (‘Static’) Content

BASIC STATIC CONTENT EDITING:

In the left hand column, click “Articles” to bring up a mirror or your site structure and list of the ‘Article’ areas that are bound to each page’s layout:

To the right of each element will be the following icons:

These icons are universal in that they will be the same for other site editing tasks as well. They are fairly self-explanatory:

Edit: Edit the item Duplicate: Duplicate the Item Move: Move the item Delete: Delete the Item Publish Toggle: Click to publish or unpublish an item to/from the site Info: Basic information about the item

When you choose to add a new item, duplicate, or move an existing item, you will see a flashing “insert” box that determines where the item will be inserted:

Insert After: Inserts the item directly after the selected item (same hierarchy)Insert Into: Inserts the item into the selected item as a sub-itemClear: Removes the new or existing item from the clipboard. This item is located near the top toolbar.

Edit Duplicate Move Delete Publish Toggle Item Info

Insert After Insert Into Clear add/move/duplicate


web

site

man

ual

Editing Article (‘Static’) Content (continued)

All page content is broken down into three separate items:

Layout Sections Contao site templates can have multiple layout areas per page. These areas are where user-generated content is loaded. The most common areas are “HEADER, LEFT, RIGHT, MAIN, and FOOTER.” The layout section loads articles that are designated for that area.

Articles These are “containers” for blocks of content that can be displayed in a single layout section (LEFT, RIGHT, MAIN). An article can con-tain multiple different content elements (text, images, tables).

Elements Elements are sub-items within articles that can be arranged within the selected article’s content area.

To edit an article, click the “Edit” icon:

When you edit an article, you are shown a page that details the elements within the article. Every article has a “header” element that details some pertinent information such as which content area it is displayed in and whether or not it is published:

Article “Header”

Text element

Image element

Search/Sort/Filter

Text element


web

site

man

ual


Header element in edit mode:

To edit an article’s content elements, click the edit icon next to that element:


web

site

man

ual


Elements can take the form of a variety of content, from text to images, to file down-loads to straight HTML code, and even combinations of each.

For most purposes, the text element will be sufficient, as it allows you to work within a “What You See Is What You Get” Editor (WYSIWYG):

You will notice that the toolbars at the top look much the same as a common word-processing application such as MS Word. They function the same way as well. Here are some of the basics that you will be using:

To edit content, insert your cursor into the textarea and edit as you normally would, utilizing the tools that you would normally in a Word Processing program, and click save to save your changes.

Add/Remove Link Add/Edit Image Bold, Italics, Underline Bullet/Number Lists Tables


web

site

man

ual


Adding Images and Other Files to Your Page

The first rule of thumb when adding images and text to your page is to get them onto the webserver unless you are linking to a file/image that is hosted externally. Most likely you will need to get the files from your desktop to the webserver so that the CMS has access to them and can use them within your website.

Uploading Files

Files can be uploaded via the System > File Manager in the backend administra-tion. Once there, you will be presented with a list of files and folders on your site that contain elements used within the site itself. You have the ability to create folders for organizational purposes as well as upload files to these and any existing folders.

Click ‘File Upload’ to select the folder you wish to load your file into (using the ‘Insert Into’ icon to its right) and you will then be presented with the option to browse files and folders on your computer and upload them to the website.

Adding Images to Your Text Content

Because Contao is such a flexible system, there are multiple ways of achieving the same result for many situations, and the best example of this is in the options you have to add images to your content. We will detail two separate options here.

Method 1 - Using the text editor

This method is often ideal for people who want to quickly drop a pre-sized image into their content and are comfortable using the WYSIWYG text editor to achieve their de-sired placement. This method can be convenient but often makes it difficult to change or edit the placement of the image relative to the text.

Method 2 - Using Contao’s Built-in ‘Add and Image’ options

For those people who prefer to be guided through proper image placement and siz-ing and are likely dealing with one image per block of text, this method is preferred because of the built-in sizing and placement options that Contao offers.


web

site

man

ual


Adding Images - Method 1

To add images to your text-based content, insert your cursor to the point where you would like to insert your image. For images that will float right or left of text, insert your cursor at the beginnning/top of the paragraph which will wrap around the image.

Click the add image icon:

This will bring up the “insert image” popup:

Here you can select from a dropdown of all the images that have been uploaded to the Contao directory using the file manager. To access an image through this edi-tor, add it to the file manager before editing. To float the image left or right, click the “Appearance” tab and set the alignment to left or right, or set the class to one of the predefined styles that we have set up to do exactly that.

Click insert to load your image into your content.

Image properties can be edited by selecting the image and clicking on the image toolbar again, or by right-clicking on the image and selecting “Image Proper-ties”.


web

site

man

ual


Adding Images - Method 2

To add images to your text-based content using Contao’s built in options, Click ‘Add an Image’ to reveal the image editing palette:

By clicking ‘Change Selection’ in the Source File option, you will be presented with options available for Images currently located on your webserver via the File Manager.

You can fill in the Alternate Text for your image as well as select its margin relative to the content around it, as well as its alignment relative to your text content (above, below, left, or right).

You can also select the option scale the image using the width and height options. This will create a scaled down version of your image, which you can also choose to diplay full size when a user clicks on it by checking the “Full Size View” option. You can also add a caption, as well as link the image elsewhere on your site. Note: You will not be able to use the Full Size option if you have the image link target in use, and the function will instead open the link in a new window.

Once you save this your image will appear near your text in the manner you selected. To change the image, use the Change Selection option again to pick a new image.

QUICK TIP: To upload an image to the File Manager directly from this screen (which can happen often if you forget), look for the following icon near the Source File option:

This will launch the File Manager in a popup window and allow you to upload images and return to your content editing to select the new files.


web

site

man

ual

Editing Content (continued)

Adding Hyperlinks

Adding links in the text editor works much the same way we added images.

To add links to your text-based content, select the text or image that you would like to serve as your link.

Click the add link icon:

This will bring up the “insert link” popup:

Here you can select from a dropdown of all the pages that exist in the site structure, or set the link to be an external URL, or a file uploaded to the file manager, or even a mailto:email link.

The target field specifies whether you want the link to open in the same window or a new one.

Click insert to set your link.

Link properties can be edited by selecting the text again and clicking on the link toolbar again, or by right-clicking on the text and selecting “Insert/Edit Link”.


web

site

man

ual

Adding Pages/Editing Site Structure Adding/Editing Pages:

In the left hand column, click “Site Structure” to bring up a site map and list of the pages that are in your site:

To the right of each element will be the same icons that we see in basic content edting. These items should be self-explanatory as well.

Editing a page item brings up the following menu, with choices for page-level variables, such as page title, meta-description, and other items:


web

site

man

ual

Adding Pages/Editing Site Structure (continued) The most important items in the menu are the ones that control whether the page is published and whether it is visible in the navigation. This will control whether or not your page (and its content) is visible on the front end and accordingly whether it shows up in navigation modules. You can use these setting to hide pages from view or to keep them from appearing in a menu item, but still be live on the site.

You can also schedule when certain pages can go live on the front end using the scheduler at the bottom of the page. This same technique can be used for articles as well, and can be set in the article headers. This is useful for scheduling promotions and other items on your site or making sure that old information is removed in a timely manner.


web

site

man

ual

Editing Global Content Box Items

While page content items are unique to that page unless you duplicate them and paste into another page (or reference them as an alias), Global Content Box items can exist on multiple pages at once in the same content area. It makes it easy to deploy things like calls to action on a side column or banner ads across a site. Editing these items works much the same as editing normal content, only you specify on which pages the content boxes exist. Since the content box is a module, it is first set up in the modules editor, which you should consult with an administrator before you decide to use.

When clicking on the content box item in the content pane, you should see the available content items that correspond to the pre-created module, in this case “Left Column Image Box”:

To edit a content item, click the “Edit” icon:

This will bring up an editor similar to a text or image page content element. Since they are essentially the same thing, you can add the same types on content here. The difer-ence being that at the bottom of the section you have the option of specifying the pages on which the item appears:

Check the box at the right to make that content appear in the content-box module section, in this case, LEFT column.


web

site

man

ual

Editing FAQs

FAQs are another module that operates similar to the normal page content, but is dynamic in the sense that you enter each FAQ item into the system once, and you can configure how that data is displayed on the front end using templates and other display modules.

To edit a FAQ item, click on “FAQ” in the left content panel. This will show you a list of the FAQ categories that you have running on the site (you can have more than one).

To edit your category, click the edit tool. This will show you a list of the FAQ items you currently have on that category:

To edit a FAQ item, click on the edit tool, or to add a new one, click “New Question” and insert it where you want in the FAQ order.

The edit tool will bring you toa simple screen where you enter the question and answer. Click save to load your FAQ item onto the live site.


web

site

man

ual

Editing eCommerce Items/products

This tutorial assumes that your storefront has already been set up for you and that you simply need to either edit/add products and attributes in your store. For a more in-depth look at the store configuration options and setup instructions, please read the Isotope eCommerce configuration manual located here:

http://www.isotopeecommerce.com/manual.html

About Products, Product Types, Variants, and Attributes

To really understand the relationship between products and attributes, it is important to see how they are used and grouped in order to make an editable product. The rela-tionship can be explained as follows:

Attributes: The individual building blocks that consist of anything from basic text, a series of options or descriptions, and even images and PDFs that can be associated with a product. A single product can have many attributes, ranging from size, color, title, main image, instruc-tion manual, etc. If an attribute is directly related to another attribute (for example, if the SIZE of an product affects its PRICE) then we call that attribute a Variant Attribute. (More on this later).

Product Types: Product Types allow you to assemble a group of attributes together to form a series of complete products, all with their own unique attrubutes. Because a T-shirt may not have the need for all the same attributes that a DVD has, it allows you to create specififc attribute ‘bundles’ for each unique type of product. These bundles can also use their own unique templates as well, which can help with the styl-ing of your store.

Products: Once you have assembled your attributes into unique product types, you can then begin to add the individual information for each prod-uct. A product’s editable fields are defined by its product type and the attributes that are contained within. To add or make a change to a specific attribute, you can edit the orginal attribute, but it is important to remember that this change will affect ALL Product and Product Types that use that attribute.

Variants: If your product type contains attributes that are designed to affect other attributes (or variant attributes) then you will be able to create Variant Products as sub-products within that parent product. When creating a variant product, you will need to be specific in filling out all required variant attributes for a product as defined by your prod-uct type. Variant products will inherit the properties of their parent product unless otherwise specified. For example, you may want to sell 3 sizes of hammers, each with its own price. You would create a par-ent hammer product, then 3 variant products underneath it and set their individual size and price values.


web

site

man

ual

Editing Existing Products & their Variants

To edit existing products in your store, click on ‘Product Management’. You will see a list of existing products in your store. You can search and filter your products using the options in the top panel.

You main products (or parent products if you have variants) will be editable by click-ing on the pencil icon. You can also use the duplicate, delete, and publish/unpublish toggle.

When editing, you will see the list of available product types in the dropdown list. Changing the product type of a product will change its available editable attributes and, in turn, its available variant attributes if different.

CategoriesIn order to assign a product to categories, you must set up the page for the category in the site structure. Because Isotope is designed to blend seamlessly with your own website structure, it uses that structure to determine its product categories. To add a new category, create a new page in your Site Structure and it will become available in your product categories selection.


web

site

man

ual

Editing Existing Products & their Variants (continued)

Images Isotope stores its own images and files in a separate area away from the rest of the normal Contao files and images. This is to ensure that a) files are never moved or con-flict with each other, and b) that the image and file management takes place specific to each product. While there are many advantages to this approach, one drawback is that you cannot share these images between products and/or use them across other modules on your site. However, it does make it easier to manage your images on a product to product basis.

To assign an image to a product, use the upload tool found at the bottom of the images section:

Choose an image file from your local system, then click “Save” at the bottom of the editing window to upload your image to the product.

To re-order the sequence of images, use the green up/down arrows to change the order. Be sure and save your product to save the changes. The top-most image will always be the primary image displayed with your product.

If your product types contains extra media fields, these will function the same way. The attribute will define what types of files (PDF, DOC) are available for upload, so check with your system configuration to see what each one allows.

Variants Variant products are the result of having attributes that you want to be able to tie to-gether with one another on a single product, so that you can create variations of that product by adjusting its attribute values. Some good examples of this are size, color, and length. By creating various values for each it allows you to create both a MEDIUM BLUE 2-FOOT hammer as well as a LARGE RED 3-FOOT hammer form the same product. It makes it easy for the customer to browse to ‘hammers’ on the storefront and simply select from the various attribute combinations available to find their spe-cific product.

If your product-type contains variant attributes you will see a Tools-wand icon:


web

site

man

ual

Editing Existing Products & their Variants (continued)

Also, you will be able to expand the product to reveal its existing variant products using the +/- icon to its left:

To add a new variant product, it is important to use the “Add Variant” option in your top menu as opposed to “Add Product”, which will add a new parent product. When clicking “Add Variant” you will be given the option to choose which parent product you want to add the variant to, and the variant will automatically accept all the parent’s product’s existing attributes according to its product type.

Variants Quick Edit In the diagram above you can see an option in the tools menu for a parent product to “Quick Edit Variants.” This is a shortcut for editing variant attributes such as SKU, price, and publishing.

To quickly edit these variant options, use this option, then scroll down and save to make your changes.

Related Products In your Store Configuration you likely have set up at least one category of related products. Use the Tools wand to reveal the related products option. If no related categories exist for this product, add a category and select the category option as set up in your Store Configuration. From here you can use the search field to search for products in your store matching your keywords. Be sure to save your selections.


web

site

man

ual

Editing Existing Attributes

If you need to make edits to an existing attribute (most likely to edit the options available for either product variants or some customer-definable field) you can do so be going to ‘Store Configuration’ > ‘Attributes’. Here you will see your list of available attributes throughout your store. To edit an attribute, click its pencil icon.

You wil then be able to see the various options available if the attribute has been designated as a select menu, radio button, or checkbox option:

Click the ‘+’ sign to add a new option row and use the green arrows to re-order them, and the red ‘x’ to delete options. The ‘Value’ is a setting used only internally by the software, but is best kept with alphanumeric values and no spaces. The Label is what is displayed to customers on the frontend. Be sure and save your edits.

When you create new options, these will now be available when you edit and/or cre-ate new products or variants in the Product Management section. If you delete any options, be sure to go into Product Management and also delete any corresponding variant products if applicable, because although the system will not allow the custom-er to select these options on the frontend, they will still be visible.

Adding Attributes

If you need to add an attribute to your product that does not exist, create it in ‘Store Configuration’ > ‘Attributes’. Define the type of field you want to add (select menu, radio button, checkbox field, text field) and be sure to give it a Internal name that is aplhanumeric with no spaces (as it is used as a database field). Add your options if ap-plicable, and if the item will be used to creat a variant product, check off the field that says ‘Add to Product Variants Wizard.” This will ensure that the field is recognized as a variant attribute.

Be sure to add your new attribute to the corresponding product types. If your attri-bute is a variant option, be sure that “Enable Variants” is checked in your Product Type and that the variant attribute is selected in the main “Attributes” list. It will not appear in the “Variant Attributes” list since those will be included automatically, and instead those are meant to be options that will override the parent product’s settings.


web

site

man

ual

Editing Catalog Items

Catalog items are designed to be custom databases of information that we can then present to a user on the frontend using various listing and reader modules. It gives them the ability to visualize and interact with the data in a user-friendly fashion while making it easy to maintain the data in the backend ofthe website.

Depending on your setup, when clicking into Catalog you will see the different catalogs available to you.

You will notice the same basic options for editing. However, the icon second to the right is a special icon that allows you to define which fields are editable in your data-base. To see a list of which fields are editable, click that icon.

If you want to add fields to your database, you can do so here. You can define the field type and the options avaiable to select for that field, as well as even validate the data that is entered.

To edit a catalog, go back to the main Catalog screen and edit the catalog you wish to view by clicking the pencil. You will be able to filter, search and sort your options depending on the fields setup (using the field setup icon above).


web

site

man

ual

Editing Catalog Items (continued)

You can add entries by clicking the “New Item” option, or to edit a particular entry in the database, click the edit icon on that row. You will then be displayed the list of edit-able fields that were included in the Field Setup for this catalog.

Fill in the values for each field or edit as needed, and then save your changes. They will automatically be included on the frontend.

Catalog Items With Mapping

If your catalog item is tied in directly with the ChartisMaps mapping software (for example if you have a Google Map list of dealer locations) then you may need to Geocode your address listing if you edited or added an address in your Catalog. This is so that Google can assign a unique latitude and longitude to your address for the purpose of mapping.

To initiate a batch geocode, go to ChartisMaps Google Maps and select the Batch Geocode Option:

You will then need to select your corresponding Catalog Map configuration and then click “Batch Geocode”. The system will tell you the number of entires it was able to place. Google only allows you to perform up to 2500 geocode requsts in a day and only at around 300 at a time, so you may need to try Geocoding several times until you get the error message that tells you to stop.

Some addresses may fail if Google is unable to match an address to their list. Be sure to use the official Post Office format for all addresses and try geocoding again.


web

site

man

ual

Further Information

For further information on using Contao or any of the modules here, please call:

Winans [email protected]

Documents

Contao Manual