photo_template

<center>![crystalnix logo](http://crystalnix.com/static/img/crystalnixlogo_aboutus.png)</center>

[TOC]

# Photo Template App

## Dependencies
You should install the following packages:

- [Google App Engine SDK for Python](https://developers.google.com/appengine/downloads)

### How to install the SDK on Mac OS X:

1. In the Finder, click **Go > Applications** to open the Applications folder.
2. Double click the App Engine SDK file you downloaded (`GoogleAppEngineLauncher-1.9.7.dmg`) to open it, then drag the **GoogleAppEngineLauncher** icon over to the Applications folder.
3. Double-click **GoogleAppEngineLauncher** in the Application folder.
4. When prompted to *Make command symlinks*, click **OK**.

![Make command symlinks](https://dl.dropboxusercontent.com/s/izxy0uoo7h1gqzp/GoogleAppEngineLauncher.png)

# How to setup a remote application

## Install GAE App

 1. You should register a new application on [Google App Engine (Create an Application)](https://appengine.google.com/start/createapp)
![create app](https://dl.dropboxusercontent.com/s/4bo93tyt8dcrm5x/CreateAppEngine.png)
 2.  and enable the billing for it.
![billing](https://dl.dropboxusercontent.com/s/u0uq9tz7ntdfjs5/BillingStatus.png)

### Grant your App Engine application access to the Google Cloud SQL instance

You should grant AppEngine application an individual access to a Google Cloud SQL instance. One application can have access to multiple instances, and multiple applications can be granted access to a particular instance.

To grant an App Engine application an access to a Google Cloud SQL instance:

1. Go to the [Google Developers Console](https://console.developers.google.com/).
2. Select a project by clicking the project name. (You should use `bfnzchristmas` project because current SQL storage has been initially created for it)
3. In the left sidebar of your project, click **Cloud SQL**.
4. Click the name of the instance to which you want to grant access. (`bfnzchristmas:database`)
5. In the instance dashboard, click **Edit**.
6. In the **Instance settings** window, enter your Google App Engine application ID of *your new application* (this application ID you can find at the [Google App Engine administration console](https://appengine.google.com/) under the Applications column) in the **Authorized App Engine applications** section. You can grant access to multiple applications, by entering them one at a time.
7. Click **Confirm** to apply your changes. 

In the end you should see something like this:

![To grant an App Engine application access to a Google Cloud SQL instance](https://dl.dropboxusercontent.com/s/x35px78wijed869/SqlAccessControl.png)

## Create Facebook App/Page

Create facebook app and `Page Tab` for it. 
![create app](https://dl.dropboxusercontent.com/s/7844ydxn70xgycg/CreateFacebookApp.png)

In Page Tab settings preferences `Page Tab URL` and `Secure Page Tab URL` should lead to the site which is created at Google App Engine.
![settings](https://dl.dropboxusercontent.com/s/1vmzhqfmxiyqa8z/FacebookSettings.png)

### Add a facebook page tab application to your page

There is also not a regular way of adding an application on facebook page. It can be done with help of creating special link and request to API. Or further form can be used for creating it automatically [http://www.jibecompany.com/2012/add-a-facebook-page-tab-application-to-your-page/](http://www.jibecompany.com/2012/add-a-facebook-page-tab-application-to-your-page/)

![add a facebook page tab application to your page](https://dl.dropboxusercontent.com/s/2co2o4y0j2c30qv/AddFacebookApp.png)

## Project configuration

Before application deploy to GAE it’s necessary to change several conditions in `photocms/src/app.yaml`:

- `application` change on identifier GAE application ID
- `FACEBOOK_APP_ID` identifier facebook application
- `FACEBOOK_APP_SECRET` secret code facebook application
- `APP_NAME` any short letter identifier of application (We recommend to use application ID)

*Please, be careful and don't change anything else.*
## Upload the sources to GAE

Run `setup.command` & `update.command` file in the `photocms` catalogue and wait for complete upload of application. During the deploy process the script may ask you to input your gmail login and password to upload data, please, do it.


## Preparation for work

### Pages

When you set up GAE and deploy the application, you should be able to load home page but it will be empty. You can change a content of the pages using admin panel by this link `/admin/dbtemplates/template/`.   The 4 pages are available for editing:

1. **home** page . Url: `/`. Template name `home.html`. 
This page is displayed in two cases when user opens facebook page and puts “like” and when user opens your site directly without facebook.
2. **not liked** page. Url: `/not_liked/`. Template name: `not_liked.html`.
This page should be displayed if user doesn’t put “like” to facebook page.
3. **success** page. Url: `/forms/{form_slug}/sent/`.  Template name: `form_sent.html`.
This page is displayed after successful form sending. The `{form_slug}` depends on form settings, please see below.
4. **mobile** page. Url: `/mobile/`. Template name: `mobile.html`.
It's additional page which you can use for mobile version of the site.

At the end of page editing you should get something like this:
![](https://dl.dropboxusercontent.com/s/pix91hhfaag3eie/HomeExample.png)

### Form builder

You can find the form builder by this link `/admin/forms/form/`. It’s allow to set up a custom form fields.

To customize view of form fields, you should replace the default 
`{% render_built_form slug="example" %}` in home template with your html for form. But please draw attention that the field names should be the same otherwise it will work wrong.

#### How to create a form

1. Create a form in the admin panel **Forms => Add Form**. 
2. Type title and select a status of the form. The status have to be Published in order to be able to use it.
![](https://dl.dropboxusercontent.com/s/o0nd029hdfjw4u8/FormExample1.png)
2. Switch off **Send email** setting *(If checked, the person entering the form will be sent an email, please, disable it each time because we haven't tested it)*
![](https://dl.dropboxusercontent.com/s/g2de174j3j0wq00/FomrExample2.png)
3. Type the **Slug** field which is used for building of **success** url (`/forms/{form_slug}/sent/`). 
![](https://dl.dropboxusercontent.com/s/opoys4he0aj7q8d/FormExample3.png)
4. Add necessary **Fields** with required type (Email, Number, File and etc.)
![](https://dl.dropboxusercontent.com/s/4isx2nxcbd91ty2/FormExample4.png)
In order customized form to work correctly it's necessary  for `name` and `action` fields to be similar. To do that you may use initial code with sample form: 
![](https://dl.dropboxusercontent.com/s/odygcik6t35ni6u/FormExample5.png)



#### View all entries & export data
if you would like to see or export entries posted by users, you can do it as shown below:

![view all entries](https://dl.dropboxusercontent.com/s/48wtabq0fd27ohf/FormViewAll.png)

----------

![export data](https://dl.dropboxusercontent.com/s/vlryvymp0s8trhn/FormExportAll.png)

### Static pages

If you need to create some additional pages (e.g. TERMS AND CONDITIONS or PRIVACY POLICY), you can do it using flate pages. 

1. Go to admin-panel **Flat pages**
2. Add flat page

![add flat page](https://dl.dropboxusercontent.com/s/vznygr511d4jrpc/FlatPage.png)

### Static files like js scripts, css, images and others

Google Cloud Storage can be used in order to save statistics. Files can be uploaded at [https://console.developers.google.com/project/apps~bfnzchristmas/storage](https://console.developers.google.com/project/apps~bfnzchristmas/storage) and can be used inside templates. For instance, if picture should be uploaded, there are several steps: 

- upload picture at Google Cloud Storage
- receive a link to that picture
- paste the following to a template

```html
<img src="http://storage.googleapis.com/photocms_dev/forms/6c9e68f4-c13c-484d-8441-27a25c5e9c0e/crystalnix_logo_128.png" />
```

## FAQ

### How to solve the problem of scrollbar appearance in facebook tab

It’s necessary to add further code on the page:

```html
<script type="text/javascript">
    window.fbAsyncInit = function () {FB.Canvas.setSize();};

    function sizeChangeCallback() {FB.Canvas.setSize();};
    window.onresize = sizeChangeCallback;
    window.onload = function(){
        setInterval(sizeChangeCallback, 2000);
        try {sizeChangeCallback();} catch(e) {}
    };
</script>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.init({
        appId: '{{ FACEBOOK_APP_ID }}',
        status: true,
        cookie: true,
        xfbml: true
    });
</script>
```

### How to create links share Facebook/Twitter

Following sites can be used for that:

- [http://www.sharelinkgenerator.com/](http://www.sharelinkgenerator.com/)
- [http://blog.stunningapps.net/2013/09/using-facebook-dialogs-to-share-structured-content/](http://blog.stunningapps.net/2013/09/using-facebook-dialogs-to-share-structured-content/)