Retrieving Images Embedded In XML

Problem:

The feed that you are building a Klip for may have images embedded in the "description", "summary", or "content" tag. Since these images don't have their own tag, they can't easily be displayed in the Klip by using the Klip's <style> tags.

Solution:

The basic idea is to get the "description" tag data before KlipFolio parses it, and extract the image URL. We will assume that the image data you want to find is contained in an XML tag called "description".

The first thing to do is set up two entries in your <style> definition as follows:

storyimage {
    type:        image;
    noterow:    1;
    notelabel:    false;
    key:        exclude;
}
 
description {
    type:        text;
    noterow:    2;
    notelabel:    false;
    content:    cdata;
    key:        exclude;
}

The trick is to declare the style for the "definition" tag using "content: cdata". This instructs the KlipFolio XML parser to not convert any entities in the XML data, which means that the tags (including <img>) will be left intact.

Next, we will need to parse the data and extract the image. The best place to do this is in an onCreate function handler, which is called every time a new item is created. The following code will find the first image tag in the description data (<img src="">), and then insert that image URL into the "storyimage" element.

function myCreate(item)
{
    var data = Klip.processEntities(item.getData("description"));
        
    var index;
    var m;
 
    var imgdata = data;
    var done = false;
    while (!done && ((index = imgdata.indexOf ("<img")) != -1))
    {
        imgdata = imgdata.substring (index + 4, imgdata.length);
        m = imgdata;
        var img = "";
        var index2;
        if ((index2 = m.indexOf ("src=")) != -1)
        {
            m = m.substring (index2 + 4, m.length);
            var ch = m[0];
    
            if (ch == '"' || ch == "'")
            {
                index2 = m.indexOf (ch, 1);
                if (index != -1)
                {
                    img = m.substring (1, index2);
                }
            }
            else
            {
                if ((index2 = m.indexOf (' ')) != -1) {}
                else if ((index2 = m.indexOf ('>')) != -1) {}
                if (index2 != -1)
                {
                    img = m.substring (0, index2);
                }
            }
        }
        
        img = Klip.convertToText(img);
        
        if (img.length)
        {
            item.setData("storyimage", img);
            done = true;
        }
    }
 
    data = Klip.convertToText (data);
    item.setData ("description", data);
 
    return true;
}

The code above gets the "description" data, and then searches that data for the first occurrence of "<img". If it finds an occurrence, the code then looks for the string "src=". If that is found, the code parses out the image URL, and sets that to be data for the "storyimage" element. Once the description data has been parsed for images, it is then converted to readable text and set back into the "description" style element.

There are a few important things to note:

• The data contained in the "description" element is returned as a string type, so it can then be parsed using conventional javascript string processing techniques.
• The Klip.processEntities() call converts any XML entities into literal characters (for instance, "<" would be converted to "<"). This is important for when we try to find the "<img" string.
• Because we declared the content type as cdata in the style, we have to use Klip.convertToText() to convert the "description" data into readable text. Without this step, the user would see unparsed XML tags in the notelabel.

The above code only finds the first image in the "description" data, but could be adapted to find more than one image and insert them into multiple "storyimage" elements.