There's something out there in life that will delight and amaze you.
Get up, get moving, and go find out what it is. - (Ralph Marston)

Sunday, April 08, 2007

Image Gallery Control

Here are some important points to remember when using the Image Gallery control with the Freetextbox, in ASP.NET.

The image gallery control that is packed with the Freetext box control has some significant functionality that we could use instead of spending time to develop the Image uploads, resizing retaining its resolutions and maintaining your own image gallery in a web application. Freetext box, gives you facility of editing some content and save with its formatting. What it saves is basically HTML.

First you should download the Freetext box control from http://www.FreeTextbox.com/ site and add the control to the Tools. Then double click on the Freetext box and add the control to your web page.

Set the Validate Request of the ASPX page to false on the page directive.

ValidateRequest="false"

By default in ASPX pages the RequestValidation is set to true to avoid un-encoded HTML content being submitted to the server. But we will set this status false, since we need to send HTML to the server.

Now lets add the Image Gallery to this Freetextbox. Go to the folder that you downloaded and Freetextbox ->examples ->fullyloaded->ftb.imagegallery.aspx and add this to your web application.

Under the Freetextbox properties Click on ToolbarLayout property, and copy the following.

ParagraphMenu,FontFacesMenu,FontSizesMenu,

FontForeColorsMenuBold,Italic,Underline,Strikethrough;Superscript,

Subscript,RemoveFormatJustifyLeft,JustifyRight,JustifyCenter,

JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,

Unlink,InsertImage,InsertRuleCut,Copy,Paste;Undo,Redo,

Print,InsertImageFromGallery,Preview,

SelectAll,WordClean,NetSpell

The ToolbarLayout property will contain the functionality of the Freetextbox and the blue colored parts indicated the image gallery functionalities, that we added newly.

Now we need to set some properties as to Create folders, Upload Images, Delete Images and etc, so click on the ftb.imagegallery.aspx and in the code find where it references the freetextbox and set the following properties.

<FTB:ImageGallery id="ImageGallery1"
AllowImageDelete="true" AllowImageUpload="true" AllowDirectoryCreate="true" AllowDirectoryDelete="true" runat="Server" />

One significant point is that by default all the images are saved in the "images" folder in your application and any directory we create will also be created in side the "images" folder. There fore its a point to remember that if your site uses any other images that you do not require user involvements (such as images in banners or buttons) better place then in a separate folder, and create a folder with the name of "images" inside your web application.

If you user master pages then there is a small change you need to do in the ftb.imagegallery.aspx. Make the header part runat server.

<head runat="server">

<title>Image Gallery</title>

</head>

Freetextbox is used as to allow the user to have the flexibility to design the content as he wishes, there for the length of the text we need to store would be a problem there for by using a data type "text" in the SQL server would give the facility to store enough text as requests.

Now that all are done lets take a look at how it appears.

Freetextbox

Image Gallery

11 Comments:

At 7:10 AM, Anonymous Sameera said...

Hey Gayani,
Any ideas on how to change the bluish toolbar and frame color of the FTB? I set toolbarbackcolor property but that got me no where.

cheers!

 
At 6:20 PM, Anonymous Anonymous said...

Hi Gayani,

For security reason, how can we prevent users upload *.exe, *.vbs...and other files by using ImageGallery?

I tried to use AcceptedFileTypes, but it does not work.

Thanks,

 
At 10:34 PM, Blogger Gayani Devapriya said...

ToolbarBackColor is by default set to transparent. I.e. it is designed to get the back color of the entire control.

When you set the BackColor property and the GutterBackColor property to the color you want it will get that color.

Ex: BackColor="LightGray" GutterBackColor="LightGray"

Free textbox tool bars use a background image which by default is a light blue image. To get rid of this set the following properties.

ToolbarBackgroundImage="False" UseToolbarBackGroundImage="False"

But still some of the parts for example: dropdown arrows, will remain in blue since this control uses some internal images, apart for the images for the functional buttons.

Since the FTB comes in a dll there’s not much we options to try around.

If you need to transform FTB to a complete different color schema I think you may have to edit the source code.

 
At 6:48 AM, Anonymous Jen Campion said...

Hi..just wanted to say THANKS for posting this. I have spent the last 2 hours trying to figure out how to get the image gallery working. Very much appreciate you taking the time to post this for everyone.

 
At 9:39 PM, Blogger Gayani Devapriya said...

Hi Jen,

Its my pleasure...and you are most welcome...

Thank You,
Gayani

 
At 4:56 PM, Blogger Lilla said...

Great post.. very helpful!! Thanks so much :)

 
At 2:16 PM, Anonymous koy chamnap, NU said...

the image gallery page is shown, but immediately freeze, so how would i fix this problem. any help thank!

 
At 12:27 AM, Blogger Danny said...

Hello,

I'm a Manager from Belgium with a need for development of a software project in C# Sql 2008 is there a possibility for a project?

Danny
www.analys4it.be
danny@analys4it.be

 
At 8:57 PM, Anonymous Anonymous said...

First of all THANKS ALOT. Then I wanted to ask how can I but both free textbox and imagegallary in one asp.net page in in a defined area.

Thanks again.

Al-Aboud S.A.
al-Aboud.s.a.sknm@hotmail.com
Saudi Arabia

 
At 2:20 PM, Blogger King-Of-Kings said...

how to highlight a skype number using Freetextbox......?



( 1 ) In general just add the following line in html page it display as a image

+44 (0)1243 860696

but when using this line inside a freetextbox control it displays differently...


(2) In Mozila only When I Edit the free text box content then the skype phone call number is changed as below

+44 (0)1243 begin_of_the_skype_highlighting +44 (0)1243 end_of_the_skype_highlighting 860696


How to Solve this two issues .... Share Your Ideas.....



Regards,


Raj

 
At 9:16 PM, Blogger Pete said...

That doesn't work for me. I still get the same default box whatever I do.

 

Post a Comment

<< Home