HungryFEED RSS Description Transformation Feature

I’ve added a new feature to HungryFEED in version 1.4.0 that I think offers some really interesting and powerful possibilities.  Many RSS feeds include HTML code in the Description field.  Two popular examples are eBay and YouTube.  The Description field of the RSS has formatted HTML so that the feed items will display in a certain way which may include images, links, tables, styling, etc.

(Skip to the bottom of the page for a tutorial video…)

The Problem

I’ve had several requests from people who want to remove the formatting or selectively display only parts of the description.  It’s easy enough to simply strip all tags or formatting (using the HungryFEED allowed_tags parameter for example), but in most cases that results in a jumble of text.  In order to selectively grab certain parts you need to be able to parse the HTML into identifiable pieces.  This would generally require some sort of programming on a feed-by-feed basis which isn’t really practical for a general-purpose plugin.

The Solution

The solution was to implement  a “Selector” syntax that allows you to add CSS style selectors to your template code and HungryFEED will use your selector to grab specific pieces out of an RSS description.  You can then re-arrange and style them any way you choose without having to write PHP code.

The transformation is done on the server side, so it is not simply overriding visual styles, rather the feed contents are parsed and transformed before it is rendered on your page.  This allows you to include/exclude any part of the feed content, so long as there is some way to “select” it.

Web designers who use CSS are probably familiar with CSS “Selectors” which allow you to style specific elements on an HTML page.  HungryFEED uses a library called phpQuery which is basically a server-side port of JQuery, the extremely popular JavaScript library.  So if you know how to use CSS selectors, then you already know how to transform feeds in HungryFEED!

The basic syntax is simple, you simply assign your feed to one of the Custom Templates in HungryFEED settings and in the template you may use selector statements like the following:

  • {{select(html).div:first}} <- output the html inside the first div tag
  • {{select(text).span:eq(3)}} <- output the text inside the 3rd span tag

These are simple examples, but any selector supported by phpQuery can be used.  The only limitation is that HungryFEED will only select individual elements – you cannot iterate over multiple elements and you cannot manipulate the DOM.  So it is a limited implementation, but for the needs of selecting pieces from an RSS feed it should work for just about any scenario.

Tutorial Video

I put together a YouTube video to better explain the selector functionality.  It is somewhat long (10 minutes) but it walks you through the entire process of setting up a feed, using templates and the basics of the query syntax.

YouTube Preview Image

 

12 Responses to “HungryFEED RSS Description Transformation Feature”

  1. Richard April 23, 2012 at 9:44 am #

    Hi Jason,

    I have watched your video, and am trying to do something specific that I’m sure is possible. I just can’t figure it out.

    I am trying to remove (or even make the same colour as the background so it looks like it’s gone) some text from the Description of each feed item.

    For example, all my feeds start with “DT”, and I don’t want to display it.

    Going forward I would like to be able to remove any swear words etc., but that is not drastic right now.

    Do you know how I would do that in HungryFEED?

    Thank you,

    Richard.

    • Jason May 1, 2012 at 12:43 am #

      Hey Richard. It’s only possible to pull out content if it’s inside some kind of structure, like an HTML element. HungryFeed doesn’t have a way to grab certain words or text from the middle of a paragraph.

      It’s pretty tough to do that type of thing unfortunately because there’s no rules as to how feed descriptions have to be formatted and so you’ll see all kinds of mixes of text, html, etc. So there’s no guarantee that any piece of data will be in a certain place in a feed unless HungryFeed has custom coded added to it specifically for one site.

  2. Jim Dee April 30, 2012 at 10:51 pm #

    Hi Jason. Your HungryFeed plugin is interesting, to say the least. I don’t understand, as I am not a coder, if HungryFeed updates the feed periodically? If so, do I create a Cron on my server account or does HF have a built in Cron? I have a handful of blogs on which to use your plugin if the feeds are queried on a schedule for new content.

    Thanks for answering this, or, anyone else to answer this.
    Jim

    • Jason May 1, 2012 at 12:37 am #

      Hey Jim, HungryFeed grabs the data from the feed on demand. One lucky visitor every few hours gets to refresh the feed and everybody else gets to enjoy the fast, cached data. If nobody ever viewed the page then the feed would never get updated.

      • Jim Dee May 1, 2012 at 1:07 am #

        Thanks for the fast response, Jason!

        I see. So it’s a built-in Cron function. When there are, say 50 visitors in an hour, does the Cron trigger 50 times? I am worried about hogging server resources as I have 10 blogs on which I want to install HungryFEED. They are subdomains under 1 TLD.

        By the way, I posted several questions in another post that I will wait for answers to there. As you suggest, maybe my noobness can help others when you answer.

        Jim

        • Jason May 1, 2012 at 7:08 pm #

          Hey Jim, my comments section got out of control the previously so I had to move all support for hungryfeed over to this forum – http://wordpress.org/tags/hungryfeed we can continue the discussion over there if you’d like.

          As for your question if 50 people hit your site in an hour the feed would only refresh once. (assuming your cache timeout was set for an hour or more).

  3. Cliff Shomette July 16, 2012 at 6:05 pm #

    Jason,

    I’m surprised nobody has asked you this yet. How can I rel=”nofollow” all external links that your plugin generates?

    Cliff

  4. Tanya August 30, 2012 at 3:52 am #

    Hi there,

    I am really trying hard to figure out how to get the image thumbnail to show up (be included) in the feed. Is this possible?

    thanks,
    Tanya

  5. Tanya August 30, 2012 at 7:08 am #

    I am going nuts trying to figure out why images are not showing up in my feed. If I look at the main feed url – http://www.themastersbard.co.za/index.php/feed/ – the images are there and the formatting is there.

    But on my homepage – http://www.themastersbard.co.za – there is no formatting and no images.

    This is my code on homepage:

    [hungryfeed url="http://www.themastersbard.co.za/index.php/feed/" feed_fields="" template="1" max_items="2"]

    and this is my custom css

    {{title}}
    {{description}}

    I have literally spent the last four hours browsing through all the forum posts on your wordpress plugin page and through all your documentation. I cannot figure out why my images are NOT showing and that the formatting is gone.

    PLEASE please please help me.

    Thanks,
    Tanya

    • Tanya August 30, 2012 at 7:17 am #

      Oh by the way – that is not my custom css – it came out wrong after submitting comment. Sorry (dont know why that happened). I also forgot to mention that if I include the following in my custom css

      {{data['child']['http://purl.org/rss/1.0/modules/content/']['encoded'][0]['data']}}

      the full post with image shows up. But I dont want the FULL post, just the first few lines. Is there a way of adapting the above code, as that might also work.

      Thanks again :)

  6. Atif March 12, 2014 at 11:03 am #

    Hi,

    Just have a quick question. Is that possible to open whole content in the template if someone click on permalink? rather then go to the external page?

    Thanks

Leave a Reply

Please leave these two fields as-is: