Difference between revisions of "PT Photo Gallery Version 1.2 Install"

Revision as of 16:47, 3 January 2012

Download

Download the Photo Gallery Application from the Community Site or from the SVN Repository.

Extract the zip files into the following directory: /ADF/apps/pt_photo_gallery/

Site Configuration

The Photo Gallery Application is built within the ADF. The ADF must be installed in the site to run the Photo Gallery, follow the ADF Installation instructions.

• Make sure the ADF is setup and running on the site. If the ADF is not setup, then follow the instructions for ADF Installation.
• Open the sites 'ADF.cfc' (See Site Configuration (ADF.cfc) for more info) file (located in your site's /_cs_apps/ directory) in a text editor. Locate the Load the ADF Application into application space comment in the file. Add (or uncomment) the following command under the comment section:

loadApp("ptPhotoGallery");

• Reset the ADF for the server and site.

Styles

There are several out of the box style options for the Photo Gallery application. The styles are defined in the following style sheets located in the /pt_photo_gallery/style/ directory within the ADF Photo GalleryApp directory:

• ptPhotoGallery.css (/ADF/apps/pt_photo_gallery/style/ptPhotoGallery.css)

The recommended approach is to load this style sheet into your Base Plus One Template.

'Note:' the classes and styles defined for the Photo Gallery are targeted tightly for the layout generated by the Photo Gallery application and should not interfere with your site styles. However, it is a good idea to give these styles sheets higher precedence in your style definitions.

Import Custom Elements

The Photo Gallery Application has several Custom Components defined within CommonSpot. The components have been exported and are available in the Photo Gallery's "exported-objects" folder located at the root of the Photo Gallery application directory (e.g. /ADF/apps/pt_photo_gallery/exported-objects/)

Optional: You may want to create a new category within the CommonSpot Element Gallery for 'Photo Gallery Elements'.

To import these objects, you will need to be an administrator for your site. If you are not a site administrator, consult your Server administrator for more information.

Import

Import Custom Elements in this order:

1. Photo (Photo-Custom-Element.zip)
2. Photo Category (Photo-Category-Custom-Element.zip)
3. Photo Size (Photo-Size-Custom-Element.zip)
4. Photo Gallery (Photo-Gallery-Custom-Element.zip)
5. PTPhotoGallery Configuration (PTPhotoGallery-Configuration-Custom-Element.zip)

Import Metadata form:

1. PhotoSizeRender (PhotoSizeRender-Metadata-Form.zip)
   1. Bind this form to the following Photo Gallery Render Handler
      1. Cycle
      2. Cycle Thumb Nav
      3. Grid

Verify Imports

The imported components' render handlers and custom field types must be verified. During the import process, the render handler and custom field types paths may have been changed to reflect the current site's path.

Review and update these paths to reference the ADF path. In most cases, this will just require to be unlocked and a change in the path from the site name to 'ADF'. Check the paths for the custom field types that were imported with the custom elements by unlocking them and fixing the explicit paths to point to "/ADF/extensions/".

If the custom elements that are imported contain custom field types that are already in the site, the naming convention for the custom field type will be unique. To resolve this, unlock the field types and elements, and reassign the element field type to the pre-existing field type.

Example: The Photo Category custom element contains two uses of the General Chooser field type, if the General Chooser field type is already installed on the site then the import process will attempt to import another General Chooser but with a new name such as "General Chooser_import_1250003208472." To resolve this issue, open the custom element and assign the field type (General Chooser_import_1250003208472) to the field type with the simple name General Chooser. Note that when you assign the existing general chooser you will need to click on the "properties" tab and enter "photoSizeGC" as the bean name. After reassigning the field type, delete the new imported field from the list of custom field types.

Subsites

It is highly recommended that a Photo Gallery webadmin subsite is created for Administrators and a Photo Gallery Lightbox subsite is created for the lightbox pages. This configuration allows subsite security to be used to allow only Administrators access to the webadmin subsite and also allows the CS toolbar to be turned off for the lightbox pages.

Your site may already have a webadmin and/or lightbox subsite. The steps below will add a photogallery subsite under the webadmin subsite and will add a lightbox subsite.

Web Admin

1. Create a new subsite under the site root called webadmin.
2. Create a new subsite under webadmin called photogallery.
3. Configure the /webadmin/photogallery/ subsite Content Security to give 'No Rights' to 'Anonymous Users' and 'Authenticated Users'.
4. Configure the /webadmin/photogallery/ subsite Content Security to give permissions to the group of administrators who will manage the Photos.

Lightbox

1. Create a new subsite under the site root called lightbox.
2. Create a new subsite under lightbox called photogallery.

Templates

The Lightbox template will be used to render pages within a lightbox. The Lightbox template may already exist on your site if you have installed another ADF application. Check your sites templates before following the steps below to create the template.

Lightbox Template

Steps:

1. Create a new page named Lightbox Template from the blank template.
2. Submit and activate the page.
3. Save the page as a template.
4. Submit the template for public use.

CCAPI Configuration

The Photo Gallery Application uses the ADF CCAPI to populate profile records and create profile pages. The CCAPI needs to be configured for the site and photo gallery application.

First, follow the steps to set up the CCAPI Config file for the site. Once that configuration is complete, follow the steps below to set up the CCAPI config for the Photo Gallery application. Make sure to update the wsVars section with the correct URLs and username/password.

1. Create a new page called 'ccapiPhoto'. Recommend creating this page in the /webadmin/photogallery/ subsite.
2. Add the 'Photo' element to the page.
3. Select the 'Photo' element indicator and go to 'more...'. Select 'Name' from the menu.
4. In the Element Name field, enter the text 'ccapiPhotoElement'.
5. Publish this page and view in read mode.
6. Edit the 'ccapi.xml' file for the site and add the following xml block into the <elements> section:

<Photo>
  <pageID>#####</pageID>
  <subsiteID>##</subsiteID>
  <elementType>custom</elementType>
  <controlName>ccapiPhotoElement</controlName>
</Photo>

To populate the <pageID> and <subsiteID> tags, view the source code for the 'ccapiPhoto' page that was just created.

Identify the following line in the source code and enter this numeric value into the <subsiteID> tag:

var jsSubSiteID = ##;

Identify the following line in the source code and enter this numeric value into the <pageID> tag:

var jsPageID = ####;

Reset the ADF for the server and site.

Configuration Page

The Photo Gallery Configuration Pages will be used to manage the PTPhotoGallery Configuration custom element. Follow these steps to configure the datasheet and page for adding photos.

1. Create a new page called 'Configuration Manager' in the /webadmin/photogallery/ subsite.
2. In the main content of the page, add a Custom Script element.
3. Enter the explicit module path for:
   1. /ADF/apps/pt_photo_gallery/customcf/photo_config_admin_ds.cfm
4. From the Datasheet element interface, click the "Datasheet" icon.
5. From the "Datasheet Views" dialog, follow the "Click here to create a new datasheet view" link.
6. Enter the following information and then click "Next":
   1. Name: All Photo Gallery Configurations
   2. Private: unchecked
   3. Default View: unchecked
   4. Description: View to manage all of the Photo Gallery Configurations
   5. Datasheet Source: Form Result/Custom Element Sheet
7. From the Datasheet Source dialog choose the "PTPhotoGallery Configuration" custom element and click "Next".
8. From the Datasheet Columns Dialog choose a few columns from the Available Columns list and move them to the Selected Columns list. (UPLOAD_URL, Date Added, Last Date Modified, etc...) and then click "Finish".
9. You will be brought to the Datasheet View page; click "Close" to return to your page.
10. You will see the datasheet element on this page now. Click the Datasheet element interface icon again and this time choose "Edit Columns".
11. From the Datasheet View Column Properties dialog choose the link for "Add a new action column".
12. Within the Action Column Properties dialog enter the following information and click "Finish":
    1. Header: Edit
    2. Hide Header: Checked
    3. Column Text: edit
    4. Window Target Name: <leave blank>
    5. Modules: edit-form-data.cfm
13. From the Datasheet View Column Properties dialog, choose the link for "Add a new action column" again.
14. Within the Action Column Properties dialog enter the following information and click "Finish":
    1. Header: Delete
    2. Hide Header: Checked
    3. Column Text: delete
    4. Window Target Name: <leave blank>
    5. Modules: delete-form-data.cfm
15. Close the Edit Column window.
16. Publish the page.

Create Photo Gallery Configuration Record

Note that this step assumes that you have previously created the admin pages.

We are creating a single Photo Gallery Configuration element record to be used within the application.

Go to the Add Configuration page and submit the form to create one record.

These fields will be completed as the pages are built.

See the Site Configuration wiki page for more information on the fields and the correct values.

Reset the ADF for the server and site.

Add Page

Upload Page

Display Page

Admin Manager Page

Admin Datasheet Page

Category Admin Datasheet Page

Size Admin Datasheet Page