SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trying to wrap images around text editor content

    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:
    Code:
    <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?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I'll bash out something quick before grabbing some sleep.

    Code Javascript:
    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);
                }
            }
        }
    }
    Last edited by paul_wilkins; Jan 23, 2008 at 13:52.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    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';
    	 }
        }
      }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •