Difference between revisions of "PT Photo Gallery v2 Install"

From ADF Docs
Jump to: navigation, search
(Setup)
 
(24 intermediate revisions by the same user not shown)
Line 14: Line 14:
 
</source>
 
</source>
 
* [[Reset ADF|Reset the ADF]] for the server and site.
 
* [[Reset ADF|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 Elements ==
 
== Import 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/)
 
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'.
+
Optional: You may want to create a new category within the CommonSpot Element Gallery for 'PT 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.
 
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.
Line 41: Line 31:
 
# Photo Gallery (Photo-Gallery-Custom-Element.zip)
 
# Photo Gallery (Photo-Gallery-Custom-Element.zip)
 
# PTPhotoGallery Configuration (PTPhotoGallery-Configuration-Custom-Element.zip)
 
# PTPhotoGallery Configuration (PTPhotoGallery-Configuration-Custom-Element.zip)
 +
 +
After all the elements are imported, follow the steps to configure the Photo element fields for your site:
 +
# Unlock the Photo custom element.
 +
# Open the field definitions for the Photo custom element.
 +
# Edit the "Category" field.
 +
# Open the "Properties" tab and select the "Photo Category" for the "Custom Element" field.
 +
# Save the field definitions.
  
 
Import Metadata form:
 
Import Metadata form:
Line 49: Line 46:
 
### Cycle Thumb Nav
 
### Cycle Thumb Nav
 
### Grid
 
### Grid
 +
### Listing
 +
### Single Image
 +
### Single Image Random
  
 
=== Verify Imports ===
 
=== Verify Imports ===
Line 63: Line 63:
 
The Photo Gallery App uses a custom element to store site specific configurations.  The Photo Gallery App needs to know the profile element name, unique field, roles, subsite ids, and template ids for the site.
 
The Photo Gallery App uses a custom element to store site specific configurations.  The Photo Gallery App needs to know the profile element name, unique field, roles, subsite ids, and template ids for the site.
  
If you are installing the PT Photo Gallery application, there is no need to do anything with this element at this time.  This element will be [[PT_Photo_Gallery_Configuration|configured]] in a later step.
+
If you are installing the PT Photo Gallery application, there is no need to do anything with this element at this time.  This element will be configured in a later step.
  
 
The fields for the Photo Gallery Configuration custom element are defined below.
 
The fields for the Photo Gallery Configuration custom element are defined below.
Line 69: Line 69:
 
=== Configuration Fields ===
 
=== Configuration Fields ===
 
There are six major components to the configuration:
 
There are six major components to the configuration:
# '''CE_FORM_ID''' - Photo custom element form ID within the site.
+
# '''UPLOAD_FORM_URL''' - Link to the CommonSpot page for uploading photos.
# '''ADD_URL''' - Site relative URL for the Photo Add page. (Example: /webadmin/photogalleryadmin/lightbox/Photo-Add.cfm)
+
# '''DISPLAY_URL''' - Link to the CommonSpot page for the photo display.
# '''UPLOAD_FORM_URL''' - Site relative URL for the Photo Upload page. (Example: /webadmin/photogalleryadmin/lightbox/Photo-Upload.cfm)
 
# '''DISPLAY_URL''' - Site relative URL for rendering a photo to the user.
 
 
# '''UPLOAD_URL''' - URL Path on the server to store the uploaded photos. (Example: /_cs_apps/pt_photo_gallery/uploads/)
 
# '''UPLOAD_URL''' - URL Path on the server to store the uploaded photos. (Example: /_cs_apps/pt_photo_gallery/uploads/)
# '''UPLOAD_PATH''' - Server Path on the server to store the uploaded photos. (Example: D:/full/path/to/this/dir/_cs_apps/pt_photo_gallery/uploads/)
 
 
# '''UPLOAD_DOC_TYPES''' - Photo file types that are allowed to be uploaded. (Example: jpg,gif,bmp,png)
 
# '''UPLOAD_DOC_TYPES''' - Photo file types that are allowed to be uploaded. (Example: jpg,gif,bmp,png)
 +
# '''UPLOAD CROP URL''' - Link to the CommonSpot page for the uploading a photo for the crop feature.
 +
 +
== Subsites ==
 +
It is '''highly recommended''' that a Photo Gallery webadmin subsite is created for Administrators and a forms subsite for the lightbox dialogs.  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 (for CommonSpot 5.x).
  
== Build Templates/Pages ==
+
Your site may already have a ''webadmin'' subsite.  The steps below will add a ''photogallery'' and ''forms'' subsites under the ''webadmin'' subsite.
=== 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 ====
+
=== Web Admin ===
 
# Create a new subsite under the site root called ''webadmin''.
 
# Create a new subsite under the site root called ''webadmin''.
# Create a new subsite under ''webadmin'' called ''photogallery''.
+
# Create a new subsite under ''/webadmin/'' called ''photogallery''.
 
# Configure the ''/webadmin/photogallery/'' subsite Content Security to give 'No Rights' to 'Anonymous Users' and 'Authenticated Users'.   
 
# Configure the ''/webadmin/photogallery/'' subsite Content Security to give 'No Rights' to 'Anonymous Users' and 'Authenticated Users'.   
 
# Configure the ''/webadmin/photogallery/'' subsite Content Security to give permissions to the group of administrators who will manage the Photos.
 
# Configure the ''/webadmin/photogallery/'' subsite Content Security to give permissions to the group of administrators who will manage the Photos.
 +
# Create a new subsite under ''/webadmin/photogallery/'' called ''forms''.
 +
# '''Important:''' If the photo gallery is open for site users to add/edit photos then configure the ''/webadmin/photogallery/forms/'' subsite Content Security to give permissions to 'Anonymous Users' and 'Authenticated Users'.
  
=== CCAPI ===
+
== CCAPI ==
 
The Photo Gallery Application uses the [[CCAPI|ADF CCAPI]] to populate profile records and create profile pages.  The CCAPI needs to be configured for the site and photo gallery application.
 
The Photo Gallery Application uses the [[CCAPI|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|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.
 
First, follow the steps to set up the [[CCAPI Config|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.
  
==== Setup ====
+
=== Setup ===
# Create a new page called 'ccapiPhoto'. Recommend creating this page in the ''/webadmin/photogallery/'' subsite.  
+
# Create a new page called 'ccapi' under the root subsite and from the base plus one template. When creating the page, disable the standard metadata 'Include In' fields for 'Page Indexes' and 'Full Text and Search Element Results'. This page may already exist within your site, if it does, then continue to the next steps.  
 
# Add the 'Photo' element to the page.
 
# Add the 'Photo' element to the page.
 
# Select the 'Photo' element indicator and go to 'more...'.  Select 'Name' from the menu.
 
# Select the 'Photo' element indicator and go to 'more...'.  Select 'Name' from the menu.
Line 110: Line 110:
 
</source>
 
</source>
  
To populate the <pageID> and <subsiteID> tags, view the source code for the 'ccapiPhoto' page that was just created.  
+
To populate the <pageID> and <subsiteID> tags, view the source code for the 'ccapi' page that was just created.  
 
   
 
   
 
Identify the following line in the source code and enter this numeric value into the <subsiteID> tag:
 
Identify the following line in the source code and enter this numeric value into the <subsiteID> tag:
Line 124: Line 124:
 
[[Reset ADF|Reset the ADF]] for the server and site.
 
[[Reset ADF|Reset the ADF]] for the server and site.
  
=== Admin Pages ===
+
== Configuration ==
 
 
==== Configuration ====
 
 
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.
 
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.
  
===== Steps =====
 
 
# Create a new page called 'Configuration Manager' in the ''/webadmin/photogallery/'' subsite.
 
# Create a new page called 'Configuration Manager' in the ''/webadmin/photogallery/'' subsite.
 
# In the main content of the page, add a Custom Script element.
 
# In the main content of the page, add a Custom Script element.
 
# Enter the explicit module path for:
 
# Enter the explicit module path for:
 
## ''/ADF/apps/pt_photo_gallery/customcf/photo_config_admin_ds.cfm''
 
## ''/ADF/apps/pt_photo_gallery/customcf/photo_config_admin_ds.cfm''
# From the Datasheet element interface, click the "Datasheet" icon.
 
# From the "Datasheet Views" dialog, follow the "Click here to create a new datasheet view" link.
 
# Enter the following information and then click "Next":
 
## Name: All Photo Gallery Configurations
 
## Private: unchecked
 
## Default View: unchecked
 
## Description: View to manage all of the Photo Gallery Configurations
 
## Datasheet Source: Form Result/Custom Element Sheet
 
# From the Datasheet Source dialog choose the "PTPhotoGallery Configuration" custom element and click "Next".
 
# 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".
 
# You will be brought to the Datasheet View page; click "Close" to return to your page.
 
# You will see the datasheet element on this page now. Click the Datasheet element interface icon again and this time choose "Edit Columns".
 
# From the Datasheet View Column Properties dialog choose the link for "Add a new action column".
 
# Within the Action Column Properties dialog enter the following information and click "Finish":
 
## Header: Edit
 
## Hide Header: Checked
 
## Column Text: edit
 
## Window Target Name: <leave blank>
 
## Modules: edit-form-data.cfm
 
# From the Datasheet View Column Properties dialog, choose the link for "Add a new action column" again.
 
# Within the Action Column Properties dialog enter the following information and click "Finish":
 
## Header: Delete
 
## Hide Header: Checked
 
## Column Text: delete
 
## Window Target Name: <leave blank>
 
## Modules: delete-form-data.cfm
 
# Close the Edit Column window.
 
 
# Publish the page.
 
# Publish the page.
  
===== Create Photo Gallery Configuration Record =====
+
=== Create Photo Gallery Configuration Record ===
'''Note''' that this step assumes that you have [[PT_Photo_Gallery_Build_Templates_Pages#Admin_Pages|previously created the admin pages]].
 
 
 
 
We are creating a single Photo Gallery Configuration element record to be used within the application.   
 
We are creating a single Photo Gallery Configuration element record to be used within the application.   
  
Line 172: Line 140:
 
These fields will be completed as the pages are built.
 
These fields will be completed as the pages are built.
  
See the [[PT_Photo_Gallery Site_Configuration|Site Configuration]] wiki page for more information on the fields and the correct values.
+
See the [[PT_Photo_Gallery_v2_Install#Configuration_Fields|Configuration Fields]] section for more information on the fields and the correct values.
  
 
[[Reset ADF|Reset the ADF]] for the server and site.
 
[[Reset ADF|Reset the ADF]] for the server and site.
  
==== Photo Upload ====
+
== Photo Upload ==
 
The Photo Upload Page will be used to upload new photos into the Photo Element.  
 
The Photo Upload Page will be used to upload new photos into the Photo Element.  
  
===== Steps =====
+
# Create a new page called 'Photo Upload' from the Blank Layout Template and in the ''/webadmin/photogallery/forms/'' subsite.
# Create a new page called 'Photo Upload' from the [[PT_Photo_Gallery_Lightbox_Template|Lightbox Template]] and in the ''/lightbox/photogallery/'' subsite.
 
 
# In the main content of the page, add a Custom Script element.
 
# In the main content of the page, add a Custom Script element.
 
# From the Custom Script element interface, click the "Edit" icon.
 
# From the Custom Script element interface, click the "Edit" icon.
Line 186: Line 153:
 
# Publish the page.
 
# Publish the page.
  
===== Update Photo Gallery Site Config =====
+
=== Update Photo Gallery Site Config ===
 
Update the Photo Gallery Configuration for the UPLOAD FORM URL field.  Edit the row in the datasheet and select the CommonSpot page that was created.
 
Update the Photo Gallery Configuration for the UPLOAD FORM URL field.  Edit the row in the datasheet and select the CommonSpot page that was created.
  
 
[[Reset ADF|Reset the ADF]] for the server and site.
 
[[Reset ADF|Reset the ADF]] for the server and site.
  
==== Photo Display ====
+
== Photo Display ==
 
The Photo Display Page will be used to render a photo to the user.  
 
The Photo Display Page will be used to render a photo to the user.  
  
===== Steps =====
+
# Create a new page called 'Photo Display' from the Blank Layout Template and in the ''/lightbox/photogallery/forms/'' subsite.
# Create a new page called 'Photo Display' from the [[PT_Photo_Gallery_Lightbox_Template|Lightbox Template]] and in the ''/lightbox/photogallery/'' subsite.
 
 
# In the main content of the page, add a Custom Script element.
 
# In the main content of the page, add a Custom Script element.
 
# From the Custom Script element interface, click the "Edit" icon.
 
# From the Custom Script element interface, click the "Edit" icon.
Line 201: Line 167:
 
# Publish the page.
 
# Publish the page.
  
===== Update Photo Gallery Site Config =====
+
=== Update Photo Gallery Site Config ===
 
Update the Photo Gallery Configuration for the DISPLAY URL field.  Edit the row in the datasheet and select the CommonSpot page that was created.
 
Update the Photo Gallery Configuration for the DISPLAY URL field.  Edit the row in the datasheet and select the CommonSpot page that was created.
  
 
[[Reset ADF|Reset the ADF]] for the server and site.
 
[[Reset ADF|Reset the ADF]] for the server and site.
  
==== Photo Admin Manager ====
+
== Photo Admin Manager ==
 
The Photo, Photo Category, and Photo Size are global custom elements. Managing data for these global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure a CommonSpot page to manage the data for the elements.
 
The Photo, Photo Category, and Photo Size are global custom elements. Managing data for these global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure a CommonSpot page to manage the data for the elements.
  
===== Steps =====
 
 
#Create a new page with the title 'Photo Manager' and page name 'index' from the Base Plus One template and designate creation of the page in the ''/webadmin/photogallery/'' subsite.
 
#Create a new page with the title 'Photo Manager' and page name 'index' from the Base Plus One template and designate creation of the page in the ''/webadmin/photogallery/'' subsite.
 
#In the main content of the page, add a Custom Script element.
 
#In the main content of the page, add a Custom Script element.
Line 216: Line 181:
 
# Publish this page.
 
# Publish this page.
  
==== Photo Admin Datasheet ====
+
== Photo Admin Datasheet ==
 
The Photo Gallery element is a global custom element. Managing data for global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure the datasheet to manage the photo element data.
 
The Photo Gallery element is a global custom element. Managing data for global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure the datasheet to manage the photo element data.
  
===== Steps =====
 
 
# Open the ''Photo Manager'' page in author mode.
 
# Open the ''Photo Manager'' page in author mode.
 
# On the first tab labeled "Photo" is a Datasheet element.
 
# On the first tab labeled "Photo" is a Datasheet element.
Line 236: Line 200:
 
# From the Datasheet View Column Properties dialog, select the ''PhotoID'' column, then edit.  Update the following settings for column:
 
# From the Datasheet View Column Properties dialog, select the ''PhotoID'' column, then edit.  Update the following settings for column:
 
## Change the Render Handler to the following file: ''/ADF/apps/pt_photo_gallery/datasheet-modules/photo-update-edit-form-data.cfm''
 
## Change the Render Handler to the following file: ''/ADF/apps/pt_photo_gallery/datasheet-modules/photo-update-edit-form-data.cfm''
 +
## Change the Header text to "Edit/Delete".
 
# From the Datasheet View Column Properties dialog, select the ''Category'' column, then edit.  Update the following setting for column:
 
# From the Datasheet View Column Properties dialog, select the ''Category'' column, then edit.  Update the following setting for column:
 
## Change the Render Handler to the following file: ''/ADF/apps/pt_photo_gallery/datasheet-modules/category-display-render.cfm''
 
## Change the Render Handler to the following file: ''/ADF/apps/pt_photo_gallery/datasheet-modules/category-display-render.cfm''
Line 241: Line 206:
 
## Change the Render Handler to the following file: ''/ADF/apps/pt_photo_gallery/datasheet-modules/photo-image-preview-display-render.cfm''
 
## Change the Render Handler to the following file: ''/ADF/apps/pt_photo_gallery/datasheet-modules/photo-image-preview-display-render.cfm''
 
# Close the Edit Column window.
 
# Close the Edit Column window.
# Set the datasheet layout to sort by the ''Title'' field and results per page to 25.
+
# Set the datasheet layout to sort by the ''Title'' field, results per page to 25, and uncheck "Show Alphabet Characters for Filtering".
 
# Publish this page.
 
# Publish this page.
  
==== Photo Category Admin Datasheet ====
+
== Photo Category Admin Datasheet ==
 
The Photo Gallery Category element is a global custom element. Managing data for global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure the datasheet to manage photo element data.
 
The Photo Gallery Category element is a global custom element. Managing data for global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure the datasheet to manage photo element data.
  
===== Steps =====
 
 
# Open the ''Photo Manager'' page in author mode.
 
# Open the ''Photo Manager'' page in author mode.
 
# On the second tab labeled ''Category'' is a Datasheet element.
 
# On the second tab labeled ''Category'' is a Datasheet element.
Line 264: Line 228:
 
# From the Datasheet View Column Properties dialog, select the CategoryID column, then edit. Update the following settings for column:
 
# From the Datasheet View Column Properties dialog, select the CategoryID column, then edit. Update the following settings for column:
 
## Change the Render Handler to the following file: /ADF/extensions/datasheet-modules/1.0/edit-delete.cfm
 
## Change the Render Handler to the following file: /ADF/extensions/datasheet-modules/1.0/edit-delete.cfm
 +
## Change the header text to "Edit/Delete".
 
# Close the Edit Columns window.
 
# Close the Edit Columns window.
 +
# Edit the datasheet layout
 +
## Set default sorting to "Title" field and "Ascending".
 +
## Uncheck "Show Alphabet Characters for Filtering"
 +
## Uncheck "Allow JavaScript data sorting"
 +
## Click "Save"
 
# Publish this page.
 
# Publish this page.
  
==== Photo Size Admin Datasheet ====
+
== Photo Size Admin Datasheet ==
 
The Photo Size element is a global custom element. Managing data for global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure the datasheet to manage the Photo Size element data.
 
The Photo Size element is a global custom element. Managing data for global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure the datasheet to manage the Photo Size element data.
  
===== Steps =====
 
 
# Open the ''Photo Manager'' page in authormode.
 
# Open the ''Photo Manager'' page in authormode.
 
# On the third tab labeled "Size" is a Datasheet element.
 
# On the third tab labeled "Size" is a Datasheet element.
Line 286: Line 255:
 
# You will now see the datasheet element on this page. Click the Datasheet element interface icon again and choose "Edit Columns".
 
# You will now see the datasheet element on this page. Click the Datasheet element interface icon again and choose "Edit Columns".
 
# From the Datasheet View Column Properties dialog, select the SizeID column, then edit. Update the following settings for column:
 
# From the Datasheet View Column Properties dialog, select the SizeID column, then edit. Update the following settings for column:
# Change the Render Handler to the following file: /ADF/extensions/datasheet-modules/1.0/edit-delete.cfm
+
## Change the Render Handler to the following file: /ADF/extensions/datasheet-modules/1.0/edit-delete.cfm
 +
## Change the header text to "Edit/Delete".
 
# Close the Edit Columns window.
 
# Close the Edit Columns window.
 +
# Edit the datasheet layout
 +
## Set default sorting to "Title" field and "Ascending".
 +
## Uncheck "Show Alphabet Characters for Filtering"
 +
## Uncheck "Allow JavaScript data sorting"
 +
## Click "Save"
 
# Publish this page.
 
# Publish this page.
  
 
== Reset the ADF ==
 
== Reset the ADF ==
 
[[Reset ADF|Reset the ADF]] for the server and site.
 
[[Reset ADF|Reset the ADF]] for the server and site.
 +
 +
[[Category:Photo Gallery]]

Latest revision as of 16:13, 23 October 2011

Extract Photo Gallery Application

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/

ADF 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");

Import 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 'PT 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)

After all the elements are imported, follow the steps to configure the Photo element fields for your site:

  1. Unlock the Photo custom element.
  2. Open the field definitions for the Photo custom element.
  3. Edit the "Category" field.
  4. Open the "Properties" tab and select the "Photo Category" for the "Custom Element" field.
  5. Save the field definitions.

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
      4. Listing
      5. Single Image
      6. Single Image Random

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.

Site Configuration

The Photo Gallery App uses a custom element to store site specific configurations. The Photo Gallery App needs to know the profile element name, unique field, roles, subsite ids, and template ids for the site.

If you are installing the PT Photo Gallery application, there is no need to do anything with this element at this time. This element will be configured in a later step.

The fields for the Photo Gallery Configuration custom element are defined below.

Configuration Fields

There are six major components to the configuration:

  1. UPLOAD_FORM_URL - Link to the CommonSpot page for uploading photos.
  2. DISPLAY_URL - Link to the CommonSpot page for the photo display.
  3. UPLOAD_URL - URL Path on the server to store the uploaded photos. (Example: /_cs_apps/pt_photo_gallery/uploads/)
  4. UPLOAD_DOC_TYPES - Photo file types that are allowed to be uploaded. (Example: jpg,gif,bmp,png)
  5. UPLOAD CROP URL - Link to the CommonSpot page for the uploading a photo for the crop feature.

Subsites

It is highly recommended that a Photo Gallery webadmin subsite is created for Administrators and a forms subsite for the lightbox dialogs. 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 (for CommonSpot 5.x).

Your site may already have a webadmin subsite. The steps below will add a photogallery and forms subsites under the webadmin 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.
  5. Create a new subsite under /webadmin/photogallery/ called forms.
  6. Important: If the photo gallery is open for site users to add/edit photos then configure the /webadmin/photogallery/forms/ subsite Content Security to give permissions to 'Anonymous Users' and 'Authenticated Users'.

CCAPI

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.

Setup

  1. Create a new page called 'ccapi' under the root subsite and from the base plus one template. When creating the page, disable the standard metadata 'Include In' fields for 'Page Indexes' and 'Full Text and Search Element Results'. This page may already exist within your site, if it does, then continue to the next steps.
  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 'ccapi' 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

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. Publish the page.

Create Photo Gallery Configuration Record

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 Configuration Fields section for more information on the fields and the correct values.

Reset the ADF for the server and site.

Photo Upload

The Photo Upload Page will be used to upload new photos into the Photo Element.

  1. Create a new page called 'Photo Upload' from the Blank Layout Template and in the /webadmin/photogallery/forms/ subsite.
  2. In the main content of the page, add a Custom Script element.
  3. From the Custom Script element interface, click the "Edit" icon.
  4. Enter the following text into the Explicit Module path: /ADF/apps/pt_photo_gallery/customcf/handle_photo_upload.cfm
  5. Publish the page.

Update Photo Gallery Site Config

Update the Photo Gallery Configuration for the UPLOAD FORM URL field. Edit the row in the datasheet and select the CommonSpot page that was created.

Reset the ADF for the server and site.

Photo Display

The Photo Display Page will be used to render a photo to the user.

  1. Create a new page called 'Photo Display' from the Blank Layout Template and in the /lightbox/photogallery/forms/ subsite.
  2. In the main content of the page, add a Custom Script element.
  3. From the Custom Script element interface, click the "Edit" icon.
  4. Enter the following text into the Explicit Module path: /ADF/apps/pt_photo_gallery/customcf/photo_display.cfm
  5. Publish the page.

Update Photo Gallery Site Config

Update the Photo Gallery Configuration for the DISPLAY URL field. Edit the row in the datasheet and select the CommonSpot page that was created.

Reset the ADF for the server and site.

Photo Admin Manager

The Photo, Photo Category, and Photo Size are global custom elements. Managing data for these global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure a CommonSpot page to manage the data for the elements.

  1. Create a new page with the title 'Photo Manager' and page name 'index' from the Base Plus One template and designate creation of the page in the /webadmin/photogallery/ subsite.
  2. In the main content of the page, add a Custom Script element.
  3. From the Custom Script element interface, click the "Edit" icon.
  4. Enter the following text into the Explicit Module path: /ADF/apps/pt_photo_gallery/customcf/manager_layout.cfm
  5. Publish this page.

Photo Admin Datasheet

The Photo Gallery element is a global custom element. Managing data for global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure the datasheet to manage the photo element data.

  1. Open the Photo Manager page in author mode.
  2. On the first tab labeled "Photo" is a Datasheet element.
  3. From the Datasheet element interface, click the "Datasheet" icon.
  4. From the "Datasheet Views" dialog, follow the "Click here to create a new datasheet view" link.
  5. Enter the following information and then click "Next":
    1. Name: All Photos
    2. Private: unchecked
    3. Default View: unchecked
    4. Description: View to manage all of the photos
    5. Datasheet Source: Form Result/Custom Element Sheet
  6. From the Datasheet Source dialog choose the "Photo" custom element and click "Next".
  7. From the Datasheet Columns Dialog select the columns PhotoID, Photo, Title, Category from the Available Columns list and move them to the Selected Columns list and then click "Finish".
  8. You will be directed to the Datasheet View page. Click "Close" to return to your page.
  9. You will now see the datasheet element on this page. Click the Datasheet element interface icon again and choose "Edit Columns".
  10. From the Datasheet View Column Properties dialog, select the PhotoID column, then edit. Update the following settings for column:
    1. Change the Render Handler to the following file: /ADF/apps/pt_photo_gallery/datasheet-modules/photo-update-edit-form-data.cfm
    2. Change the Header text to "Edit/Delete".
  11. From the Datasheet View Column Properties dialog, select the Category column, then edit. Update the following setting for column:
    1. Change the Render Handler to the following file: /ADF/apps/pt_photo_gallery/datasheet-modules/category-display-render.cfm
  12. From the Datasheet View Column Properties dialog, select the Photo column, then edit. Update the following setting for column:
    1. Change the Render Handler to the following file: /ADF/apps/pt_photo_gallery/datasheet-modules/photo-image-preview-display-render.cfm
  13. Close the Edit Column window.
  14. Set the datasheet layout to sort by the Title field, results per page to 25, and uncheck "Show Alphabet Characters for Filtering".
  15. Publish this page.

Photo Category Admin Datasheet

The Photo Gallery Category element is a global custom element. Managing data for global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure the datasheet to manage photo element data.

  1. Open the Photo Manager page in author mode.
  2. On the second tab labeled Category is a Datasheet element.
  3. From the Datasheet element interface, click the "Datasheet" icon.
  4. From the "Datasheet Views" dialog, follow the "Click here to create a new datasheet view" link.
  5. Enter the following information and then click "Next":
    1. Name: All Categories
    2. Private: unchecked
    3. Default View: unchecked
    4. Description: View to manage all of the photos
    5. Datasheet Source: Form Result/Custom Element Sheet
  6. From the Datasheet Source dialog, choose the "Photo Category" custom element and click "Next".
  7. From the Datasheet Columns dialog, select the columns CategoryID, Title, and Directory from the Available Columns list and move them to the Selected Columns list.
  8. You will be directed to the Datasheet View page. Click "Close" to return to your page.
  9. You will now see the datasheet element on this page. Click the Datasheet element interface icon again and choose "Edit Columns".
  10. From the Datasheet View Column Properties dialog, select the CategoryID column, then edit. Update the following settings for column:
    1. Change the Render Handler to the following file: /ADF/extensions/datasheet-modules/1.0/edit-delete.cfm
    2. Change the header text to "Edit/Delete".
  11. Close the Edit Columns window.
  12. Edit the datasheet layout
    1. Set default sorting to "Title" field and "Ascending".
    2. Uncheck "Show Alphabet Characters for Filtering"
    3. Uncheck "Allow JavaScript data sorting"
    4. Click "Save"
  13. Publish this page.

Photo Size Admin Datasheet

The Photo Size element is a global custom element. Managing data for global custom elements can be configured easily through the use of Datasheets. The following sections will describe how to configure the datasheet to manage the Photo Size element data.

  1. Open the Photo Manager page in authormode.
  2. On the third tab labeled "Size" is a Datasheet element.
  3. From the Datasheet element interface, click the "Datasheet" icon.
  4. From the "Datasheet Views" dialog, follow the "Click here to create a new datasheet view" link.
  5. Enter the following information and then click "Next":
    1. Name: All Photo Size
    2. Private: unchecked
    3. Default View: unchecked
    4. Description: View to manage all of the photo sizes
    5. Datasheet Source: Form Result/Custom Element Sheet
  6. From the Datasheet Source dialog, choose the "Photo_Size" custom element and click "Next".
  7. From the Datasheet Columns dialog select the columns SizeID, Title, Directory, Width, Height, Type and move them to the Selected Columns list then click "Finish".
  8. You will be directed to the Datasheet View page. Click "Close" to return to your page.
  9. You will now see the datasheet element on this page. Click the Datasheet element interface icon again and choose "Edit Columns".
  10. From the Datasheet View Column Properties dialog, select the SizeID column, then edit. Update the following settings for column:
    1. Change the Render Handler to the following file: /ADF/extensions/datasheet-modules/1.0/edit-delete.cfm
    2. Change the header text to "Edit/Delete".
  11. Close the Edit Columns window.
  12. Edit the datasheet layout
    1. Set default sorting to "Title" field and "Ascending".
    2. Uncheck "Show Alphabet Characters for Filtering"
    3. Uncheck "Allow JavaScript data sorting"
    4. Click "Save"
  13. Publish this page.

Reset the ADF

Reset the ADF for the server and site.