Screenshots

See the home page

Features

  1. Multiple image upload as a field, using Flash & javascript so that images can be uploaded while editing the content item.
  2. Large images are downsized to a maximum width & height before being uploaded to the server
  3. Progress indicator during resize process.
  4. Thumbnail previews during the upload process and after save.
  5. Admins can set the maximum number of files that can be uploaded at 1 time, as well as the maximum width & height.
  6. Tokens can optionally be used to set the upload folder, in a similar way to the Orchard ImageField, but also allowing the user-id token to be specified.
  7. Files can be added & removed.

Limitations

  1. For simplicity, file paths are saved as a ";" separated string in the field. Alternate text can be given, but it applies to all of the images in the field.
  2. The Flash movie saves .gif & .png as .jpg files. This may or may not be addressed in any future versions of Shift8 Creative's releases.
  3. Display on the front end view is a simple unordered list of full sized images. You are free to create your own view using whatever script or layout you like.
  4. It's possible to use Agile Uploader for files other than images, but this field has been created with images in mind. It shouldn't be a problem extending it for other file types.

Requirements

  1. Orchard CMS
  2. Full Trust
  3. Flash 10+
  4. Javascript enabled browser
  5. Tested on latest versions of Firefox, Chrome & IE

Example Views

The default view is a simple unordered list of image tags.  You can override the view in your theme.  For example, to show a slimbox gallery (last screenshot on the home tab), add the file /Views/Fields.AgileUploader-Notice.cshtml to your theme & paste the following: (Note that this makes use of the Orchard ImageResizer module):

 

@using So.ImageResizer.Helpers

@{
    Style.Include("slimbox2.css");
    Script.Require("jQuery").AtFoot();
    Script.Require("slimbox2").AtFoot();
}
@if (!string.IsNullOrEmpty(Model.ContentField.FileNames))
{
    <div class="stripGallery">
        @foreach (var fileName in Model.ContentField.FileNames.Split(';'))
        {
            <a href="@fileName" rel="lightbox-gallery">
                @{ var alternateText = string.IsNullOrEmpty(Model.ContentField.AlternateText) ? Path.GetFileNameWithoutExtension(fileName) : Model.ContentField.AlternateText; }
                <img src='@string.Format("resizedImage?url={0}&width=100&height=80&maxWidth=100&maxheight=80&cropMode={1}&scale={2}&stretchMode={3}", fileName, ResizeSettingType.CropMode.Auto, ResizeSettingType.ScaleMode.DownscaleOnly, ResizeSettingType.StretchMode.Proportionally)' alt="@alternateText"/>
            </a>
        }
    </div>
}

Last edited Mar 14, 2012 at 9:55 AM by planetClaire, version 3

Comments

No comments yet.