Insert image into a DIV tag background property when an image is selected from image manager

[Mike]

Hi,

Can anyone please shed some light on how to insert a selected image from image manager into the background:url('../Images/Login.png') of a DIV tag?

At the moment the image manager inserts an image with the following markup into the content area of RadEditor:

  <img alt="" src="/Images/SampleImage.jpg" />

I need to do the following process when a user selects an image from image manager, before it is pasted into the content area:

  1) Create a DIV tag with a unique ID;

  2) Place the image into a background:url style element of a DIV tag;

  3) Set the height and width properties of the DIV tag to that of the selected image.

For example the finished markup would look like the following:

<Div id="UniquieID???" STYLE="background:url('../Images/SampleImage.jpg') no-repeat; position:absolute; height: ???px; width: ???px; top: 0px; left: 0px"></Div>

I have tried many many ways to sort this probelm out and to no avail for about 3 weeks now. Please, any help whatsoever here would be greatly appreciated.

Thank you,

Grant

[Tervel]

Hello Grant,

This looks like an interesting scenario. It seems possible to do, and we will provide you with a solution a couple of days from now - on Monday or Tuesday. Stay tuned.

All the best,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Tervel]

Hello Grant,

I have prepared a small sample that does something close to your needs. Feel free to modify it further, if needed.

Best regards,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Mike]

Hi Tervel,

Thanks very much for the above sample it is exactly what I was looking for and works well. However, there is one thing that doesn't work and that is the setting the height and width properties of the DIV tag to that of the selected image. This is the reason it has taken me a few days to get back to you as I have tried all kinds of scenarios and this simply won't put the image width and height into the DIV tag. Please could you offer some more assistance here to get the code you wrote working properly. Great answer to my problem so far I must say!

Thanks for your assistance and help it is greatly appreciated :)

Grant

[Tervel]

Hello Grant,

Attached is a modified version of the original approach which takes care of sizing the DIV to match the image dimensions.
I am glad that you found the solution useful.


Best regards,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Mike]

Hi Tervel,

Thanks for your response to my problem and I hate to say this but I am getting the following error with your adjusted code when I click the insert image button from the image editor dialog:

Runtime Error has occurred. Do you wish to Debug? Line: 415 Error: Invalid argument

Line 415:  var newDiv = editor.get_document().getElementById(div.id);

Can you please run this again on your machine to see if you get this same error? I am using Telerik RadControls for ASP.NET Ajax version 2009.01.0402.35

The solution you have shown me so far works like a dream and I thank you for your help :)

Grant

[Tervel]

Hello Grant,

I ran the code that I sent you in a number of browsers, and I was not able to get any error - all worked fine on my end.

My suggestion is to break the statement in two parts
 var doc = editor.get_document();
var elem =  doc.getElementById(div.id);

and see what is causing the problem, also test for the div.id being properly set, etc.


Greetings,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.