LiveFirst provides tools that allow a customer to import their existing site, build templates from existing pages, and apply template changes that cascade across existing pages. This includes the following components:
Site Import
Percussion provides the ability to create a site and template by importing from an existing website. This can be used as the first step to migrate a site to Percussion or it can be used as a means of importing a new design provided by a design agency. The steps the user performs are fairly simple, but there is a great deal of complexity being handled in the background. When the user creates a site by typing in the URL he wishes to import, the system performs the following steps in the background:
- Creates site, template and page
- Imports theme (CSS, javascript and images)
- Imports body content
- Parses imported CSS to identify any referenced CSS, js and images
- Imports referenced css, js and images
- Carves up target page metadata
- Comments out head elements
- Comments out jquery conflicts
- Catalogues links found on page
- Converts page links to managed links
- Converts image links to managed links
- Creates thumbnail snapshot of imported pages
- Creates import log
Site Import Report
To assist customers in identifying problems with their site after import, there is a Site Import report that administrative users can access from the Design Manager. The Site Import report provides summary statistics about the site that was imported, including the number of pages, style sheets, and assets. It also identifies the number of internal links that are now managed as a result of the import process. The second section of the Import Report abstracts all of the errors that were found during the import process from the import log. This includes errors such as missing files, images, or documents, or links that could not be created.
The Import Summary is accessible from the main Design menu of your Percussion site. It contains details on import statistics and details related to any missing import content.
The missing import content section of this window will display the first 100 issues from the import report. To download the full Import Report Log open the template for editing and in Layout Mode select Help > Download Import Report Log.
Design Manager
Once the homepage of the site is imported, the user is brought to the Design Manager where they can monitor the progress of additional pages being imported. The Design Manager provides the ability to review all pages in the site and to see which templates they are associated with. New templates can be created based on imported pages by selecting a page and converting it to a template. (See How to Use the Design Inspection Tool for instructions.)
As templates are created, users have the ability to drag unassigned pages that have been imported to specific templates, updating their design in the process.
Design Inspector
The Design Inspector provides the ability to examine an HTML widget and determine if it can be broken down into regions based on the <div> structure of the HTML. This provides the ability to import a page and then break it down into editable components within the Percussion CMS. Starting with the outer-most container, the user can break down the pages into rows and columns in order to isolate the sections of the page that will be added to the template and the sections of the page that will be made editable to content contributors.
Using the Design Inspection Tool
Import FAQs and Known Limitations of LiveFirst
Content Matching
When an Unassigned page is assigned to a template, the system parses the content in the page and inserts it in the appropriate regions and widgets. For each empty HTML or Rich Text widget on the template, the system uses a series of rules to attempt to find the correct content on the unassigned page to insert into the widget.
- If the template has a named widget, it looks for a named widget on the page
- It looks for a <div> with the same ID as the name of the region on the template
- It looks for a <div> with a class that matches the name of the region on the template
These same rules are also applied when the user changes the template that a given page is assigned to. It will attempt to fit the content of the page into the corresponding regions on the template. This greatly reduces the number of steps to change a site design, assuming the new templates will have matching div IDs or class names.