trying to wrap images around text editor content

[nicky77]

Hi, not sure if this will make any sense whatsoever but here goes:
i'm working on a CMS which up till now contained sections where, for example, a new article could be uploaded with an accompanying photo (via PHP). I used Javascript to determine the dimensions of the image before either wrapping text alongside it, or (if it exceeded a certain width) placing the image underneath the article text. The html code for this was simply:

<p><img src = ......../>The main article content</p>

If the image was too wide, the Javascript would remove the image and place it after the paragraph.

Now I've had to add a texteditor to this area, which causes a problem as i still want to be able to wrap text round images of a certain width, however, the above approach no longer works as the text editor generates html tags. Therefore i can no longer place the image within the first paragraph tag.

Is there any way i can use Javascript to wrap text round images in this context, where the text will be a sequence of paragraphs?

[paul_wilkins]

I'll bash out something quick before grabbing some sleep.

function wrapImages(section) {
    var section = document.getElementById('section');
    var images = section.getElementsByTagName('img');
    var i, parent;
    for (i = 0; i < images.length; i++) {
        if (sizeTest(images[i]) === true) {
            // get previous paragraph
            para = images[i].previousSibling;
            while (para.nodeName !== 'P' || para.nodeName === 'BODY') {
                para = para.previousSibling;
            }
            if (para.nodeName) === 'P') {
                // move image into paragraph
                para.firstChild.insertBefore(images[i], para.firstChild);
            }
        }
    }
}

[nicky77]

Hi Paul, thanks for the reply. I'm pretty inexperienced with Javascript to if you could help any further that would be great.

I'm currently floating an image to the right of the text, if it's width is greater than 300px. An example of both scenarioes can be seen at http://www.antoninesportscentre.co.u...nth=1198368000

Because the text editor is likely to be generating more than one paragraph within the article, I could potentially have a number of short paragraphs which should all wrap alongside the image until they reach the end of the image. The problem I have is that by using my current approach and appending the image after the first paragraph generated by the text editor, I could then have a huge gap until the article resumes with the next paragraph underneath the image. Is it possible to create a div on the fly for the image and to wrap the text alongside the div?

The JS code i currently use is

function checkImages() {
	var maxWidth = 300;
	var ps = document.getElementById('content').getElementsByTagName('p');
	
	//loop through each paragraph and check the images attached
	for (i = 0; i < ps.length; i++) {
		var img = ps[i].getElementsByTagName('img')[0];
    	var resized = new Boolean("false");
		if (img != null) {
			var height = img.height;
			var width = img.width;
			var clone=img.cloneNode(true);
			
		//check to see if image needs to be resized - 500 is the maximum width allowed
		 if (width>500) {
	   	 	var reduction = 500 / width;
	   	 	clone.style.width = '500px';
			//set new height proportional to new width
	   	 	var newHeight = Math.round(img.height * reduction) ;
	   		clone.style.height = newHeight + 'px';
			width = 500;
			resized = true;
	   	 }
		
		//check to see if image needs to be resized - 300 is the maximum height allowed
		 if (!resized) {
		 	if ( height>300) {
	   	 	var reduction =  300 / height;
			clone.style.height = '300px';
			//set new width proportional to new width
	   	 	var newWidth = Math.round(img.width * reduction) ;
	   		clone.style.width =  newWidth + 'px';
			width = newWidth;
	   	 	}
		 }
		//if the image is too wide to wrap the text alongside it, move the image underneath the text
		if (width > maxWidth) {
			ps[i].removeChild(img);   
			ps[i].appendChild(clone);
			clone.style.marginRight = 575 - width + 'px';
			clone.style.marginBottom = '40px';
			clone.style.marginTop = '20px';
		}
		//set min height for paragraph
		if (img.height < 250)
	   		ps[i].style.minHeight =  img.height + 60 + 'px';
	   	else
	   		ps[i].style.minHeight = '310px';
	 }
    }
  }