Getting started
Sections
Help

Layout studio

From Snowfire Wiki

Jump to: navigation, search


With Layout studio a user is able to visually create layouts. These layouts are built with snippets. Snippets are added, sorted and removed in a snippet area, which is defined in a snippet container.

Only layouts created in Layout studio will be editable in it.

Contents

Snippets

A snippet is a named piece of HTML code that may contain components, depending on the snippet function.

  • image
  • image-left-image-right
  • text
  • text-left-image-right
  • text-left-text-right
  • text-right-image-left
  • video
  • form
  • heading (h2)
  • title (h1)
  • map

Snippet container

For Layout studio to work, the Snowfire account needs to be configured with at least one snippet container. A snippet container has at least a snippet area, where all snippets added by the user are placed, and can thereafter be rearranged or removed. If every generated layout should have additional HTML or components, these can be added to the snippet container as well.

Filesystem

Example file/folder structure in the account FTP:

/layout/studio
|-- snippet-containers.xml
|-- default.xml

snippet-containers.xml

This file defines what snippet containers there are, what their names are, and which is default. If <id> is default, then the snippet container file should be named default.xml.

Example:

<?xml version="1.0" encoding="utf-8"?>
<snippetContainers>
	<container default="true">
		<id>default</id>
		<name>Default</name>
	</container>
</snippetContainers>

[snippet container id].xml

Below is an example snippet container.

<?xml version="1.0" encoding="utf-8"?>
<snippetContainer>
	<options>
		<componentIdOffset>1000</componentIdOffset>
	</options>
 
	<snippets>
		<snippet id="text" />
		<snippet id="text-left-text-right" />
		<snippet id="text-left-image-right" />
		<snippet id="text-right-image-left" />
		<snippet id="image-left-image-right" />	
		<snippet id="image" />
		<snippet id="video" />
	</snippets>
 
	<sizes>
		<size id="full">
			<width>760</width>
			<height>740</height>
		</size>
		<size id="column">
			<width>370</width>
			<height>370</height>
		</size>
	</sizes>
 
	<html><![CDATA[
<div id="content">
	<div id="wrapper">
		{ com_singlerow (id:'40', description:'Static page title', htmlElement:'h1') }
 
		%snippetArea%
 
	</div>
</div>
	]]></html>
</snippetContainer>

<componentIdOffset>

When a user adds a snippet to the page, every component in that snippet, must be dynamically be assigned a component ID. This option tells Snowfire on what ID to start. Pick this wisely, to avoid that collisions with any component in the snippet container occur.

<snippet />

Specify what snippets are permitted to be inserted in layouts, created with this snippet container.

<size>

Used by snippets that need to limit the size of their content. Two presets must be defined: full and column. The dimensions are defined in pixels.

<html>

The snippet container HTML code. Standard layout syntax apply here. A %snippetArea% must be present, which tells Snowfire where snippets should be added.

Styling snippets

Snippets get assigned html-classes depending on what type of snippet it is. This will help you control the design and layout of all snippets or specific snippets. The class names look like this:

  • snippet-form (form)
  • snippet-heading (heading)
  • snippet-title (title)
  • snippet-image (image)
  • snippet-image-image (image-left-image-right)
  • snippet-text (text)
  • snippet-image-text (image-left-text-right)
  • snippet-text-image (text-left-image-right)
  • snippet-text-text (text-left-text-right)
  • snippet-map (map)
  • snippet-video (video)

All the snippets get class "snippet". Map for example has the classes "snippet" and "snippet-map". This example shows how to set a margin on all snippets, and set some specific parameters on the map and image snippets:

snippets.css

.snippet { 
	margin-bottom: 15px; 
}
 
.snippet-map, .snippet-image {
	border: 1px solid #000;
}
 
.snippet-image {
	margin-bottom: 10px;
}
Views
Personal tools