CodeCarvings Piczard V1.2 Help
Managing Multiple Configurations (eg: Landscape/Portrait Images)
Send Feedback
Image Upload - SimpleImageUpload User Control > Managing Multiple Configurations (eg: Landscape/Portrait Images)

Glossary Item Box

Multiple configurations are the way that SimplieImageUpload provides to manage problems like landscape / portrait image cropping.

You can use this feature not only to manage landscape/portrait, but also for other situations.
For example:

Etc...

in practice, the control provides three properties:

And one event:

These elements allows:

  1. To display a select box in the image editor window that allows the final user to switch between multiple configurations.
    (Please see: Figure 1)
  2. To manage the event handler raised when the user switches between configurations.
    You can use this event to "reconfigure" one or more parameters of SimplieImageUpload. In case of "Landscape/Portrait" you can change the value of the CropConstraint property.

 

Figure 1: How the final user can switch between multiple configurations.

 

The following example shows how to configure the control to manage two configurations ("Landscape" and "Portrait"):

ASPX Markup Copy Code
<ccPiczardUC:SimpleImageUpload ID="Picture1" runat="server"
   
OnSelectedConfigurationIndexChanged="Picture1_SelectedConfigurationIndexChanged"
   
AutoOpenImageEditPopupAfterUpload="true" />
Example Title Copy Code
protected void Page_Load(object sender, EventArgs e)
{
   
if (!this.IsPostBack)
   {
       
// Setup the configurations
       
// 0 = Landscape
       
// 1 = Portrait
       
ImageUpload1.Text_ConfigurationLabel = "<strong>Image orientation:&nbsp;</strong>";
       ImageUpload1.Configurations =
new string[] {"Landscape", "Portrait"};
 
       
// Configure the initial Crop Constraint (0=Landscape by default)
       
ImageUpload1.CropConstraint = this.GetCropConstraint(ImageUpload1.SelectedConfigurationIndex.Value);
   }
}
protected void ImageUpload1_SelectedConfigurationIndexChanged(object sender, SimpleImageUpload.SelectedConfigurationIndexChangedEventArgs args)
{
   
// User has changed configuration...
   
// Apply the new crop constraint
   
args.CropConstraint = this.GetCropConstraint(ImageUpload1.SelectedConfigurationIndex.Value);
}
private CropConstraint GetCropConstraint(int configurationIndex)
{
   
// Return the right crop constraint according to the currently selected configuration
   
if (configurationIndex == 0)
   {
       
// 0 = Landscape crop constraint
       
return new FixedCropConstraint(300, 200);
   }
   
else
   {
       
// 1 = Portrait crop constraint
       
return new FixedCropConstraint(200, 300);
   }
}

It is important to note that, in order to reconfigure the parameters of SimplieImageUpload you have to use the properties exposed by SelectedConfigurationIndexChangedEventArgs (example: args.CropConstraint = new FixedCropConstraint...)

In fact it's not possible to directly set CropConstraint, PostProcessingFilter, PostProcessingFilterApplyMode, PreviewFilter and OutputResolution after an image has been loaded.

Please see the Example:

  • A.506 - Usage example #5

The example also shows how to automatically choose the best configuration (landscape or portrait) according to the uploaded image size.

 

©2013 Sergio Turolla. All Rights Reserved.