rss feeding (can't get images)

Other
#1

Hi.

I’m using code from:

http://coronalabs.com/blog/2013/10/09/a-look-inside-a-sample-corona-powered-business-app/

downloaded here:

https://github.com/coronalabs/business-app-sample

to get rss data from a website.

i tried various rss feeders, all went well. title and content show as expected.

but when i tried to get photos, they don’t show up.

I changed icons = “fixed” to icons = “embedded”,

I thought this was enought to get the photos.

the rss feeder i’m trying to get the photos is:

http://gizmodo.com/rss

anyone had the same problem and resolved?

i apreciate any help or a direction for a solution,

best regards,

Carlos.

#2

Are you getting any errors in your console log?   If you need to see how, use this guide:

http://docs.coronalabs.com/guide/basics/debugging/index.html

Now RSS supports an <image> tag that gets a single image for the entire feed. You can think of this as like the logo/masthead of the site.  It’s not a per-item image.  If I’m being honest, I didn’t see much of a need for that tag when i was building this for my use back in the day.  It looks like I may not be parsing that correctly.

However images that go with each article come in with the “<enclosure>” tag.  The items.enclosures entry holds a table of all the images attached. You will get a URL for each image in the table.  Its your responsibility to download and display the image using display.loadRemoteImage(), network.download() etc.

Now if you’re using the Business App Sample from that tutorial, the webpage.lua module should show the enclosures.  The code is pretty sensitive.  For instance, it’s only going to draw a thumbnail of the enclosure if it has a mime type of image/jpeg image/jpg or image/png.  It’s a case sensitive check too.

I looked at the gizmodo feed and they are not using enclosures.  Instead they are including HTML code inside a CDATA tag in the description.  If you pump that through a webView you will get the image.  However the Business App Sample does not put a webView in the tableView rows.  It only shows it when you tap on the row.

Rob

#3

Rob’s advice is sound. Another way to approach this is to take the RSS feed and do some lightweight parsing of the individual HTML pages it references. For instance, you could simply extract the og:image metatag from the HTML and use that as the image. If you use that approach for the Gizmodo feed, you get this: 

\<meta property="og:image" content="http://i.kinja-img.com/gawker-media/image/upload/s--9FgMtobM--/asi0ji0zzkpdxhgwcpeb.gif" /

Which is pretty straightforward. 

Ideally this would be done via a backend to reduce overhead in the client; the HTML content of the Gizmodo articles is about 75KB. So you could do that with a priority queue and some network.request calls, but it’s not optimal.

#4

You should be able to easily modify the rss.lua file to parse the og:image tag.

Rob

#5

I will try that. Thanks for the advices.

#6

what i did to get the photos was insert this code in rss.lua

local imageParse=string.match(story.description, '\<img src="(.\*)" /\>') if imageParse then stories[l].imageParse = imageParse end

and in feed.lua

if story.imageParse then local url = story.imageParse display.loadRemoteImage( url, "GET", thumbListener, id .. ".jpg", system.CachesDirectory, 0, 0 ) end

I had to change thumbListner a bit to work.

i know this code have limitations and still have some work to do but i was just trying to get the photos as an example.

Thanks again for all the sugestions.

#7

Are you getting any errors in your console log?   If you need to see how, use this guide:

http://docs.coronalabs.com/guide/basics/debugging/index.html

Now RSS supports an <image> tag that gets a single image for the entire feed. You can think of this as like the logo/masthead of the site.  It’s not a per-item image.  If I’m being honest, I didn’t see much of a need for that tag when i was building this for my use back in the day.  It looks like I may not be parsing that correctly.

However images that go with each article come in with the “<enclosure>” tag.  The items.enclosures entry holds a table of all the images attached. You will get a URL for each image in the table.  Its your responsibility to download and display the image using display.loadRemoteImage(), network.download() etc.

Now if you’re using the Business App Sample from that tutorial, the webpage.lua module should show the enclosures.  The code is pretty sensitive.  For instance, it’s only going to draw a thumbnail of the enclosure if it has a mime type of image/jpeg image/jpg or image/png.  It’s a case sensitive check too.

I looked at the gizmodo feed and they are not using enclosures.  Instead they are including HTML code inside a CDATA tag in the description.  If you pump that through a webView you will get the image.  However the Business App Sample does not put a webView in the tableView rows.  It only shows it when you tap on the row.

Rob

#8

Rob’s advice is sound. Another way to approach this is to take the RSS feed and do some lightweight parsing of the individual HTML pages it references. For instance, you could simply extract the og:image metatag from the HTML and use that as the image. If you use that approach for the Gizmodo feed, you get this: 

\<meta property="og:image" content="http://i.kinja-img.com/gawker-media/image/upload/s--9FgMtobM--/asi0ji0zzkpdxhgwcpeb.gif" /

Which is pretty straightforward. 

Ideally this would be done via a backend to reduce overhead in the client; the HTML content of the Gizmodo articles is about 75KB. So you could do that with a priority queue and some network.request calls, but it’s not optimal.

#9

You should be able to easily modify the rss.lua file to parse the og:image tag.

Rob

#10

I will try that. Thanks for the advices.

#11

what i did to get the photos was insert this code in rss.lua

local imageParse=string.match(story.description, '\<img src="(.\*)" /\>') if imageParse then stories[l].imageParse = imageParse end

and in feed.lua

if story.imageParse then local url = story.imageParse display.loadRemoteImage( url, "GET", thumbListener, id .. ".jpg", system.CachesDirectory, 0, 0 ) end

I had to change thumbListner a bit to work.

i know this code have limitations and still have some work to do but i was just trying to get the photos as an example.

Thanks again for all the sugestions.