Page Configuration

A core feature of Vertex sites is the page configuration console in which users can update the content of various pages with a visual editor. This is useful for making quick updates without the need to redploy your entire site each time. It is also convenient for non-programmers (such as clients or colleagues) to make changes without the need of a developer.

Page Editor

The page editor for Vertex sites is accessed by clicking the "Configuration" menu link on the sidebar of your site's admin dashboard:



Here, you will see your site loaded into an editing console with a vertical menu bar on the left. Click the top blue button labeled "Page" to access the page editor:



Click on one of the sections that appears in the modal. Here you will see a series of inputs which correlate to text, images and links that appear on your site. To change a value, simply type the new value in the input field and click "Apply Changes"

Page Config Files

The page editing console for Vertex sites is supported by JSON config files for each page in the source code. These files are stored in the "pages" folder and must be formatted as valid JSON structures. The image below shows the home.json config file which supplies the data for the home page layout of the site:



The "home.json" config file is automatically matched to the "home.mustache" template via redering. Note that the names must match in order to the template to be properly configured the corresponding json file. "home.json" matches with "home.mustache", "about.json" matches with "about.mustache" and so on.



Pages are not required to have a corresponding config json file but the ones that do will be matched with their json file on render as shown below:



The illustration above shows the "home.mustache" template matched with its corresponding "home.json" config file. When this takes place, the config file is passed to the template data under the "page" key as show on line 19 above ("page.hero_section.title").

Updating Config Files

To update a config file for a specific page, simply change the JSON values, add or remove keys/value pairs, and reload the site on localhost. This should immediately render the chages visually. However, the changes will not be reflected on the staging server until the updates are pushed. To push changes made to the "home.json" config file, enter the command below:

$ turbo page home

This command also works for adding new config files for either new pages or pages that do not already have a config file associated with them. Simply add the new json file under the "pages" folder and after setting the JSON configuration, enter the command above (with the coresponding page name) and the staging server will be updated.

Data Types

The page config files support most standard data types such as strings, numbers, booleans and nested objects. However, certain reserved "prefixes" are used to distinguish between various visual properties on the editor. For example, images should be prefixed with "img_" which invokes uploading capability on the visual editing dashboard:



The "img_" prefix activates the "change image" button on the visual editor which enables image uploading capability. The images are then automatically hosted on our robust image platform which allows for dynamic cropping and scaling. See HERE for more details.

The "color_" prefix activates a color selector for background colors, text colors and such:



When changed, the color selector returns a hex value for the selected color. For example, the color white returns as "#FFF".

Summary

The visual page editor is one of the most powerful features of Vertex sites. It enables developers to quickly update their projects without manually changing code and redeploying every time. It also provides a liaison for working with non-developers on the same project - such as freelance clients, friends and colleagues. Though not required by every site on Vertex 360, the page editor is a tremendous time saver and we encourage you to take advantage of its benfits.

Contact

If you have any questions, comments or feedback, feel free to contact us at matthew@turbo360.co