DOC: Updated README with samples

This commit is contained in:
colymba 2012-07-19 15:00:11 +03:00
parent 1ac1c88cd6
commit d11d992e93
1 changed files with 76 additions and 14 deletions

View File

@ -1,7 +1,7 @@
GridFieldBulkImageUpload GridField Bulk Image Upload
======================== ===========================
SilverStripe 3 GridField component for uploading images in bulk into the managed DataObject relation, with option to edit fields on the fly. SilverStripe 3 GridField component for uploading images in bulk into the managed Model relation, with option to edit fields on the fly.
This component takes bit and pieces around from CMSFileAddController, GridFieldDetailForm_ItemRequest, UploadField, and it overrides and adds some behaviors, templates and styles. This component takes bit and pieces around from CMSFileAddController, GridFieldDetailForm_ItemRequest, UploadField, and it overrides and adds some behaviors, templates and styles.
## Requirments ## Requirments
@ -12,26 +12,88 @@ This component takes bit and pieces around from CMSFileAddController, GridFieldD
* Run dev/build?flush=all to regenerate the manifest * Run dev/build?flush=all to regenerate the manifest
* run ?flush=all in CMS to force the templates to regenerate * run ?flush=all in CMS to force the templates to regenerate
## Usage 1 ## Usage
Simplest usage, add the component to your GridField as below. The component will find the first Image has_one relation on the managed object and it's editable db fields
### Usage 1
:::php Simplest usage, add the component to your GridField as below. The component will find the first Image has_one relation on the managed Model and it's editable db fields
$config->addComponent(new GridFieldBulkImageUpload()); $config->addComponent(new GridFieldBulkImageUpload());
## Usage 2 ### Usage 2
Same as 1 but you can specify which Image field to use and which fields are editable You can specify which Image field to use and which fields are editable from the managed Model
$imageField: string: The name of the image field to use (should have 'ID' at the end: If your relation is set has 'MyImage' => 'Image', the parameter should be 'MyImageID') $imageField (string): The name of the image field to use (should have 'ID' at the end: If your relation is set has 'MyImage' => 'Image', the parameter should be 'MyImageID')
$editableFields: array: list of db fields name as string that will be editable like: array('myTextField', 'myVarcharField', 'myEnumField') $editableFields (array): list of db fields name as string that will be editable like: array('myTextField', 'myVarcharField', 'myEnumField')
:::php
$config->addComponent(new GridFieldBulkImageUpload( $imageField, $editableFields )); $config->addComponent(new GridFieldBulkImageUpload( $imageField, $editableFields ));
### Sample Files
Page Model
class Page extends SiteTree {
public static $db = array(
);
public static $has_many = array(
'Visuals' => 'Visual'
);
public function getCMSFields() {
$fields = parent::getCMSFields();
$config = GridFieldConfig_RelationEditor::create();
$config->addComponent(new GridFieldBulkImageUpload());
$f = new GridField('Visuals', 'Case Study Visuals', $this->Visuals(), $config);
$fields->addFieldToTab('Root.Visuals', $f);
return $fields;
}
}
Visual Model
('Image', 'Type', 'Title' and 'Embed' Fields will be picked up automatically by the component)
class Visual extends DataObject
{
public static $db = array(
'Type' => "Enum('Image,Embed','Image')",
'Title' => 'Text',
'Embed' => 'HTMLText'
);
public static $has_one = array(
'Page' => 'Page',
'Image' => 'Image'
);
public function getCMSFields() {
$fields = new FieldList();
$fields->push( new DropdownField(
'Type',
'Type of visual',
singleton('Visual')->dbObject('Type')->enumValues()
));
$fields->push( new TextField('Title', 'Title and Caption for images (useful for SEO)') );
$fields->push( new TextareaField('Embed', 'HTML Embed code') );
$f = new UploadField('Image', 'Image file');
$fields->push($f);
return $fields;
}
}
## Notes ## Notes
* The HTML form fields for each editable fields are taken from the DataObject's getCMSFields() method * The HTML form fields for each editable fields are taken from the DataObject's getCMSFields() method
* Only (HTML)Text/Varchar and Enum fields are picked up by the automatic config * Only (HTML)Text/Varchar and Enum fields are picked up by the automatic config
## @TODO ## @TODO
* Add option to specify upload folder * Add option to specify upload folder
* Styles: fade back progress to blue once updated * Add individual actions for each upload (update + cancel)
* Styles: fade back progress to blue once updated, add .loading class to buttons when saving/canceling
* Handle and display errors better for: creation, update, cancel * Handle and display errors better for: creation, update, cancel
* Make it work not only for images -> might need to rename this component then? * Make it work not only for images -> might need to rename this component then?