Page Settings

In this example, we will look at all page settings in-depth.

Title

title: Page Settings

This is the main page Title, and should always be set to identify the page regardless. It will be used as the h1 content title (unless hidden), and will also populate the meta tag of the page, which is important for SEO and sharing. Title should be keep short and descriptive. * Required

Label

label: Settings

The Label is an optional title, which if defined, will be used in the main menu instead of the title. This is a useful option, because often, titles are too long to be used in the menu, and need to be replaced by shorter 1-2 word phrases. * Optional

Description

description: In this example, we will look at all page settings in-depth.

The description represents a brief summary of the page content. It is used as subheader in the content (unless hidden), and in folder list layouts (albums, posts etc). Additionally, it is used to populate the meta="description" tag of the page, which is used in search results and when sharing in social media. The description is not limited at any length, but we recommend a single sentence. * Recommended

Date

date: Nov 07 2014

The date is an optional setting used to mark the date when the page was created (or updated if you wish to moderate the date). It can be displayed in pages (for example posts), as well as page/album listings. Some social services (Facebook) and search engines (google) may also use the 'updated' meta tag to determine the date of the page. You can write dates in any recognizable format, and they will be converted to a proper date stamp regardless: '07.11.2014', '07/11', '7 nov' etc.

Image

image: 3.examples/assets/sunflowers.jpg

The image setting is used to assign the main preview image for the page. The preview image may display directly in the page content (for example a blog post), in folder lists (for example albums or blog), and in the mega menu. Additionally, the preview image is assigned as as 'meta property="og:image"', which is used by social services to determine the preview image when sharing the page. If leave the image setting empty, it will default to the first image inside the folder.

image: # If undefined, will look for the first image inside the folder.
image: filename # Will look for [filename.jpg] inside the folder.
image: filename.JPG # Will look for [filename.JPG] inside the folder.
image: 3.examples/assets/sunflowers.jpg # Assign from another folder.

Menu

menu:

The menu setting allows you to set rules for how this page displays in the main menu, and a range of specific settings for the topbar MEGA menu. The menu setting supports a string, for example 'menu: limit:6 reverse'. NB! Mega menu settings can only be applied to top level pages in the content folder.


menu: limit:6 # Limits the amount of child items to display in menu.
menu: reverse # 
menu: hide # Hides this page from the menu.
menu: hideChildren # Hides all child items from the menu.
menu: list # [MEGA] Show this item as a MEGA menu, if it has 2 levels of subfolders.
menu: carousel # [MEGA] Show this item as a carousel menu, if it has child items.
menu: data # [MEGA] Show custom content in dropdown.
menu: items:label,date,preview,description,social,contactform,hr,margin10 # items
menu: w160, w240, w320, w480, w640 # force widths to mega menus that are not full

Body

body:

Special body classes which may radically change the appearance of the page. For now, there are a only a few settings which we are using in some startpage examples:


body: no-header # Hides the page header in this page.
body: no-footer # Hides the page footer in this page.
body: menu-absolute # Sets an absolute position for the header, so it may overlay.

Layout

layout:

The layout setting is used to determine layout- and global styling of all 3 main page modules context, folders and gallery. A few examples:


layout: items:gallery,context # Sets the gallery to appear before the context.
layout: narrow # Sets a narrow layout for all modules.
layout: text-center # Applies text-center for all modules.

Context

context:

The context setting is used to determine layout- and styling of the context module. The context module is basically all the page's context including title, label, description, date, amount, folders_amount, preview image and content. Examples:


context: items:title,amount,preview,content # Displays stated items in given order. 
context: hide # Hides the context module entirely.
context: text-center separator # Centers text, and adds a horizontal rule below.

Folders

folders:

The folders setting is used to determine layout- and styling of the FOLDERS module. The folders module is basically a collection of all the folder's subfolders, and would be used to list pages, albums or blog posts (however you wish to refer to it). The folders module has extensive settings, and the main layout methods are demonstrated in the folder examples, so I will only mention a few:


folders: items:title,amount,preview # Set order of folder items.
  [title,label,date,amount,description,preview,content]
folders: grid:3,2,1 # Creates a 3-grid layout from all folders listed.
  [grid, columns, justified, carousel] (listed in examples/folders/)
folders: narrow # Creates a narrow layout for the folders module.
  [wide, narrow, narrower, narrowest]
folders: split:4,8 # Splits the image/context into columns (must equal 12).
folders: assets:another/folder # Assign another folder to look for child folders.
MORE [caption:title,description caption-hover caption-bottom-left tooltip:title,descripton crop:1,1 sort:desc sort:asc hide text-center hr(horizontal rule) title-xsmall title-small title-large title-xlarge frame hover title-clamp:1 description-clamp-3]

Gallery

gallery: 

The gallery setting is used to determine layout- and styling of the GALLERY module. The gallery module is basically a collection of all the folder's images. The gallery module has extensive settings, and the main layout methods are demonstrated in the gallery examples, so I will only mention a few:


gallery: items:title,preview # Set order of gallery image items.
  [title,date,description,preview]
gallery: grid:3,2,1 # Creates a 3-grid layout from all images listed.
  [grid, columns, justified, slideshow, carousel] (listed in examples/gallery/)
gallery: narrow # Creates a narrow layout for the gallery module.
  [wide, narrow, narrower, narrowest]
gallery: split:4,8 # Splits the image/context into columns (must equal 12).
gallery: assets:another/folder # Assign another folder to look for images.
MORE [caption:title,description caption-hover caption-bottom-left tooltip:title,descripton crop:1,1 sort:desc sort:asc hide text-center hr(horizontal rule) title-xsmall title-small title-large title-xlarge frame hover title-clamp:1 description-clamp-3 landscape portrait]

Content

content: 

This is the main html content of the page, and is part of the context module. You can use markdown-formatting as demonstrated in examples/other/markdown/ aswell as html. When using markdown, it is important that you add the content on a new line after the | character, and all consecutive lines should be indented by two spaces also (this is automatic in most editors, including the X3 panel). Example:


content: | 
 Content starts on new line after two spaces.