Dynamically add image in middle of story

Question

I'm displaying a story on a website, I would like to dynamically add an image within the story, how could I do that?

I don't want to add it at the beginning of the story or at the end of the story, but dynamically embed it somewhere in the middle of the story with either a float left or right.

I'm using PHP and jQuery and the story could have HTML in it as well. If I have a story like so, how can I embed the image?

Nullam nibh lorem, aliquam sed sodales sed, egestas at tortor. Curabitur commodo urna non elit scelerisque ac rutrum tellus interdum. Phasellus arcu leo, congue eu ultrices vitae, pulvinar vitae neque. Sed tempor dolor eu eros aliquet in egestas metus bibendum. Etiam eleifend tellus vitae purus consectetur eget venenatis ligula cursus. In hac habitasse platea dictumst. Nulla in elit erat. Vestibulum mattis malesuada sapien quis sodales. Sed id tortor id odio mollis iaculis eu a sem. Morbi pellentesque lorem vitae ante molestie <img src="pathtoimage" style="float:left;"> sit amet pulvinar lorem porta. Mauris tempor laoreet quam vel tristique. Donec ultrices porttitor sapien, eu consectetur tortor rhoncus eget. Nulla vehicula magna nisi. Aenean consectetur placerat laoreet. Praesent blandit quam turpis, non egestas elit. Quisque dolor turpis, sollicitudin id elementum sit amet, sodales at metus. Duis tortor neque, scelerisque a adipiscing quis, blandit non velit. Donec mattis, nibh at pharetra porta, erat massa tempor quam, at hendrerit sem nibh sit amet magna. Sed auctor lectus ac magna accumsan commodo. Nam vehicula velit et neque eleifend sit amet eleifend leo euismod.

What are your criteria for this? Embed after the 100th character, the 72th word, ....? — Pekka
Thats the thing, each story could be very long or short. I was trying to find a dynamic way of doing this. — John
@John okay, but you need to define the criteria for it. Where do you want it if it's a short story? Where do you want it if it's a long story? Is there going to be more than one image? — Pekka
Can there be HTML tags inside the text? Because then it gets tricky. — Pekka

Brock Adams Brock Adams · Accepted Answer · 2011-05-06T10:57:58

Since the story can contain, HTML, the problem can get very messy. The following algorithm will insert an image an arbitrary percentage into the story, and make sure it's not inside an HTML tag. Note that it sacrifices efficiency for straightforwardness.

Warning: This code can still insert the image tag somewhere it doesn't belong, depending on what HTML the story allows. For example, if inline script tags are allowed¹, the algorithm could have "fun" effects. ;)

See the live demo at: jsbin.com/agimi5/3.

Suppose, the story is all inside <div id="StoryGoesHere">. Then insert the image with, say:

InsertImageInStory ("StoryGoesHere", 30, "F_left", "Image URL");

Given:

function InsertImageInStory (ContainID, PercentIn, LeftorRightClass, ImageURL)
{
    var storyContainer  = $("#" + ContainID);
    var storyHTML       = storyContainer.html ();
    var storyLen        = storyHTML.length;
    var targetCharPos   = (storyLen * PercentIn) / 100;

    /*--- Now Loop through the story until we reach the target character, WHILE
        making sure it isn't inside an HTML tag.
    */
    for (var J = 0, bInTag = false;  J < storyLen;  ++J)
    {
        if (storyHTML.charAt(J) == '<'  ||  storyHTML.charAt(J) == '>' )
            bInTag              ^= true;    //-- Toggle value.

        if (J < targetCharPos)  continue;

        /*--- We've found/passed the target position.  Insert the image just as soon
            as we are clear of any tags.
        */
        if (!bInTag)
        {
            var newStory    = storyHTML.substr (0, J+1);
            newStory       += '<img src="' + ImageURL + '" class="' + LeftorRightClass + '">';
            newStory       += storyHTML.substr (J+1, storyLen+1);

            storyContainer.html (newStory);
            break;
        }
    }
}

The algorithm can be easily converted to PHP, if you prefer to do the manipulation server-side.

¹ If inline script tags are allowed, you've got much bigger problems, anyway.

Dynamically add image in middle of story

2 Answers