XML feed issues - image datasource

Try using datasourcemapping="//*[local-name()='g:image_link']"

Without seeing your datasource I can only guess on the direct node and names to use.

There is a feed shown here Ian:
http://support.google.com/merchants/b...

I tried the xpath you provided, and no joy.

The issue seems to be that I need the image shown separately. The example code you provide has the image within the description, but Google product feeds have a dedicated container called g:image_link. How can I get the description and image shown?

Thanks.

Ok. So let's start over and explain now this works on two levels.

The first is our current implementation that breaks down the values to make it easy to identify:

<datasource name="rsstest" source="http://www.engadget.com/rss.xml" parsenamespaces="yes" providertype="xml" query="//item" />      

.......

 <text name="text" height="100%" width="100%" font="arial" size="16" color="ffffff" datasource="rsstest" datasourceindex="1" datasourcemappingproperty="text" datasourcemappingvalue="dc:creator" background="ff0000"></text>  

You see here that we are calling out:
a datasource tag (datasource="rsstest")
an index # (datasourceindex="1" )
a property (datasourcemappingproperty="text" ) which represents the attribute you are trying to populate within the object. In this example we want to populate the text value for a text tag.
a value (datasourcemappingvalue="dc:creator" ). This is the node in the datasource feed that is contained in the query you have in your datasource. Since we have parsenamespaces set to yes, we don't need the namespace.

Alternatively, you can use the older method, which is in the tutorial you are looking at:

<datasource name="rsstest" source="http://www.engadget.com/rss.xml" parsenamespaces="yes" providertype="xml" query="//item" />      

.......

 <text name="text" height="100%" width="100%" font="arial" size="16" color="ffffff" datasource="rsstest" datasourcemapping="text=dc:creator" background="ff0000"></text>  

Here we aren't splitting up the property and value, but rather are merging them into the value for datasourcemapping. 'text' represents the attribute we want to populate and dc:creator represents the node from the datasource.

In short (ha) you should be able to use:

<datasource name="rsstest" source="http://www.mydomain.com/myfeed.xml" providertype="xml" parsenamespaces="yes" query="//item" />


<image name="background" alias="BACKGROUND" width="100%" height="100%" background="#000000" datasource="rsstest" datasourcemapping="url=g:image_link" />

In your example the URL is taking the place of 'source' for the image.

Thanks Ian, that worked. I can now see the image in the background.

How can I get the image inside the panel too?

As i move left/right I see the description changing. I cannot understand where I place my content. Where do I place an image to get the content of the g:image_link value? I just want to display an image for each item as well as the description. Phew...

In the tutorial, the image is embedded in the description tag of the datasource. If yours is separate, you can just copy the image tag above and place it above the other content inside of the panel also coming from a datasource. In this case a class combined with a list tag is going to come in handy.

 <classes>

       <class name="rssitem">

           <panel name="frame" alias="FRAME" background="#000000" height="100%" width="100%" _description="[param:description]" _page="[param:page]" onscrollto="load-description" >

            <image name="image" url="[param:image]" height="100" width="100" align="center" valign="top"></image>   

            <text name="title" text="[param:title]" font="helvetica" size="18" width="100%" height="100%" alignment="center" valign="center" align="center" background="#ffffff"/>

           </panel>

       </class>

   </classes>

........

<panel name="container" height="10%" width="75%" valign="bottom" align="center" borderwidth="5" bordercolor="ff0000" background="#ffffff">

             <list name="feed" alias="FEED" datasource="rsstest" width="70%" height="100%" align="center">  

               <object name="feed" class="rssitem" title="[param:title]" description="[param:description]" page="[param:dataSourceIndex]" image="[param:g:image_link]"/>

             </list>

         </panel>

Ok, I added an image tag to my "frame" panel, above the title. I then added image="[param:g:image_link]" to the "feed" object tag. Still no image appears however. I just can't get an image to appear. Even I reference a static image it still does not appear. What am I doing wrong?

Oh. In the example above the text tag within frame is set to 100% x 100% and is below the image in the zorder, reduce the size of the text tag called 'title' or put the image tag below it and let me know what you see.

Hi Ian. That worked and I can see the image now. However, I wanted to get the image into the main panel where the description of the item is, but can't seem to do this. How can I move my content to the main part of the page (and not the navigation section). Ideally I would want to show the other feed field values as well, but so far no luck.

I am not understanding. Have you nested the image into the correct panel where the other content is?

when i move using the left/right arrows, the title appears below, along with the image, in the middle of the arrows. I was trying to get content in the main body above (as the image does not fit). I've tried lots of things but none seem to get content into the main part of the screen. This is nothing like HTML mark-up :(

If you are using the datasource example still, then the "main body" of the project is actually a web tag that is loading the datasource description. If you want the image inside of that area, you will need to modify the WIRE. I would start by wrapping the web tag in a panel and then putting your image inside that panel so it lives as a sibling to the web tag. Then you will need to adjust the height and widths so they can live inside of that panel together.

 <panel name="body" height="100%" width="100%" background="#000000" valign="bottom" align="center">
         <image name="background" alias="BACKGROUND" width="100%" height="100%" background="#000000" datasource="imagefeed" datasourcemapping="url=//img/@src"></image>

<!--NEW PANEL-->

       <panel name="viewing-area" width="90%" height="75%">         

         PLACE IMAGE HERE AND ADJUST HEIGHT AND WIDTH

         <web name="viewer" alias="VIEWER" html="[param:description]" width="100%" height="65%" valign="center" align="center" alpha="1"></web>

       </panel>

         <panel name="container" height="10%" width="75%" valign="bottom" align="center" borderwidth="5" bordercolor="ff0000" background="#ffffff">

             <image name="left" alias="LEFT" source="RWXML/icon.arrow.left.png" height="35" width="35" align="left" valign="center" background="#ffffff" margin="10" onclickup="move-list-back"></image>

             <list name="feed" alias="FEED" datasource="rsstest" width="70%" height="100%" align="center">  

               <object name="feed" class="rssitem" title="[param:title]" description="[param:description]" page="[param:dataSourceIndex]"/>

             </list>

             <image name="right" alias="RIGHT" source="RWXML/icon.arrow.right.png" height="35" width="35" align="right" valign="center" background="#ffffff" margin="10" onclickup="move-list-fwd"></image>

         </panel>

      </panel>

Can i email you my code Ian? What is your address please? i did as you said but the layout is skewed and each image does not appear.

You can certainly add me as a collaborator on your project and I can take a look at what you are working on. Might be easier to visualize :)

go into the WIRE editor for your App and select 'Resources > Invite Collaborators'. Then invite me by my email address icahill@rarewire.com.

Thanks.

ok thanks, that's a nice feature. invite sent.

Would you be so kind as to give me build permissions so I can look at the code? :)

it already says you have these... they are all checked