Website Integration

Summary

Sitecake can manage both HTML and PHP websites
You must have an index page (index.html or index.htm or index.php or index.php5)
To make a section of a page editable add sc-content CSS class to a wrapper HTML element for your content
Nesting of sc-content elements is not supported

Website Structure

Once you download and extract contents of the Sitecake archive it will look like this:

sitecake/
sitecake.php

sitecake/ folder contains Sitecake code and configuration. sitecake.php is used as the entry point for editing. Sitecake alone is not operational. You must have at least an index page, with at least one editable div to start editing. So, the bare minimum is:

sitecake/
sitecake.php
index.html

With index file and one editable div inside you will be able to add new content: headings, text, lists, videos ...

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="sc-content"></div>
  </body>
</html>

Try to login to http://yourdomain.com/sitecake.php, add some content and click publish. Your files on the server should look like this:

files/
images/
sitecake-backup/
sitecake-temp/
sitecake/
sitecake.php
index.html

What happened is that Sitecake created new folders to save possible content.

files/ for saving uploaded files (PDFs, for example)
images/ for saving uploaded images
sitecake-backup/ for creating backups. After each publish Sitecake makes a snapshot of all files and saves copies under data stamp named folder. This makes possible to roll back to any edit in time. Max number of backups is configurable.
sitecake-temp/ for draft pages and some other things

Disallowing Certain Files For Editing

If your website contains directories or files that should not be managed by Sitecake create .scignore file inside your site root and list all files and directories inside. Each one in a new line.

Keep in mind that by default Sitecake is checking only for html, htm, php and php5 files (this could be set differently through configuration) so there is no need to list files that don't have one of these extensions (e.g. .htaccess file)

.scignore file example :

framework-dir/
wordpress/
some-file-not-managed-by-sitecake.php
some-file-not-managed-by-sitecake.html
subfolder/some-file-not-managed-by-sitecake.html

Now, let's go further on page structure.

Page Structure

Sitecake content sc-content CSS class added to an HTML tag makes that tag a wrapper for editable content. Existing code within Sitecake content wrapper becomes initial content once Sitecake loads. All tags supported by Sitecake are editable. Other content is only movable, can be drag and dropped around the website, but is not editable.

At the moment Sitecake supports these content types:

h1-h6 headings
p paragraph
ul unordered list
img image
a links (but only inside p, h1-h6 or ul), can be text links, image links or email links
sc-photoset Sitecake CSS class assigned to masonry style gallery created by drag and dropping more than one image on the page
sc-map Sitecake CSS class assigned to embedded Google map

NOTE: The list of supported content types will be expanded after release of Sitecake v3 which brings support for third party plugins.

There are two types of sc-content containers:

Basic container sc-content
Repeater, container used for repeated content sc-content-something

Basic containers are simply editable parts of a web page.

Repeater containers have a name attached to them and act as content repeaters. If several website pages have same repeater container, after editing one of them, Sitecake will copy edited content on all pages. Typical use for repeaters are side columns and footers

The following HTML is an example of a website page that with a repeater (sc-content-footer) and two basic containers (marked with sc-content).

<html>
  <body>
    <div class="row">
      <div class="col sc-content">
        <h1>Left column</h1>
      <p>Left column text</p>
      </div>
    <div class="col sc-content">
      <h1>Right column</h1>
      <p>Right column text</p>
    </div>
    </div>
    <div class="footer sc-content-footer">
      <p>This is the site footer present on all pages</p>
    </div>
  </body>
</html>

Don't Nest sc-content Elements

Sitecake does not support nested sc-content element inside another sc-content element. Like in the example below:

    <div class="sc-content">
      <p>This is proper content.</p>
      <div class="sc-content">
        <p>This is nested content. Do not expect it to work.</p>
      </div>
    </div>