PDA

View Full Version : Display Image with gAjax RSS Feeds Displayer v2.0



cxcskiing
07-16-2013, 03:11 PM
1) Script Title: gAjax RSS Feeds Displayer v2.0 (hosted)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htm

3) Describe problem: Hello, wondering if it's possible to alter the script to make it also pull and display an image (not a thumbnail, but a larger image) from the RSS?

Thank you.

jscheuer1
07-16-2013, 05:22 PM
If the feed has an image or images, and the section of the feed where the image or images are is selected in the:


feedinstance.displayoptions()

part of the initialization it will.

See the demo page Example 4 which has lots of image and whose initialization is:


var galleryfeed=new gfeedfetcher("example4", "example3class", "_new")
galleryfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/main/rss_2.0/") //Specify "label" plus URL to RSS feed
galleryfeed.displayoptions("datetime description") //show the specified additional fields
galleryfeed.setentrycontainer("div", "floatclass") //Display each entry as a paragraph
galleryfeed.definetemplate("<a href='{url}'>{description}</a>{title}")
galleryfeed.filterfeed(4, "date") //Show 8 entries, sort by date
galleryfeed.init() //Always call this last



The images are in the descriptions.

cxcskiing
07-16-2013, 07:39 PM
John -

Thank you for taking time to reply. Yes, the feed usually has an image or images.

Example 4 initialization is:


var galleryfeed=new gfeedfetcher("example4", "example3class", "_new")
galleryfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/main/rss_2.0/") //Specify "label" plus URL to RSS feed
galleryfeed.displayoptions("datetime description") //show the specified additional fields
galleryfeed.setentrycontainer("div", "floatclass") //Display each entry as a paragraph
galleryfeed.definetemplate("<a href='{url}'>{description}</a>{title}")
galleryfeed.filterfeed(4, "date") //Show 8 entries, sort by date
galleryfeed.init() //Always call this last



Our website initialization is:



var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("CXC News & PR", "http://cxcnewsfeed.wordpress.com/feed/atom/") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label snippet") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
socialfeed.init() //Always call this last


Could you please show what needs to change in our initialization script in order for the images to come up? I understand the format would remain similar:

- Picture
- Label
- Snippet

Thank you,
Irina K.

jscheuer1
07-16-2013, 08:40 PM
It all depends upon where the images are. You have:



socialfeed.displayoptions("label snippet") //show the specified additional fields
That's label and snippet, neither of which are likely to have images. The available keywords are:


"date"
"time"
"datetime"
"label"
"snippet"
"description"


So if you like what you have and just want to add more, I'd go for description, as that's where the images usually are:


socialfeed.displayoptions("label snippet description")

But the snippet is usually just a summary, so you might want to go with:


socialfeed.displayoptions("label description")

or just:


socialfeed.displayoptions("description")

But be aware, you cannot only get the image unless that's all there is in one of the allowed keyword sections. You might be able manipulate what is fetched after it arrives though to fine tune things. That is perhaps remove everything from the description except the image. If you want to try that I would need a link to your page and instructions on what you want removed from it.

cxcskiing
07-17-2013, 03:12 PM
But be aware, you cannot only get the image unless that's all there is in one of the allowed keyword sections. You might be able manipulate what is fetched after it arrives though to fine tune things. That is perhaps remove everything from the description except the image. If you want to try that I would need a link to your page and instructions on what you want removed from it.

John -
Yes, adding 'description' to label and snippet fetched all of the pictures and all of the content. Here is what it usually looks like WITHOUT the description added: http://www.cxcskiing.org/ (see under CXC News), and here is what it now looks like with the 'description' added (under Program News): http://www.cxcskiing.org/pages/programs/cxc-academy.html

Essentially, what I need to achieve is to still have it look like on the index page at http://www.cxcskiing.org/, but with an image. Attached is a mock-up.

John, I really appreciate your help. If what I'm asking for falls into the category of 'too much custom work', I'll be happy to consider paying. Please don't hesitate to email me about it, my information is listed in contacts at http://www.cxcskiing.org/pages/about/staff.html

Thank you,
Irina K.

5143

jscheuer1
07-17-2013, 05:53 PM
OK, first you need to update to the current version of gfeedcatcher.js. You will find it on the demo page. Next, modify your gfeedcatcher init to take advantage of the new onfeedload property like so:


var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("CXC News & PR", "http://cxcnewsfeed.wordpress.com/feed/atom/") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("CXC Team Blog", "http://cxceliteblog.com/feed/atom")
socialfeed.displayoptions("label snippet") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
socialfeed.onfeedload = function(){
var $ = jQuery, $firsttitle = $(this.feedcontainer).find('.titlefield').eq(0), mw = $(this.feedcontainer).children().innerWidth() - 5, $p, $r;
$.each(this.feeds, function(i, feed){
$p = $(feed.content).find('img').eq(0).css({maxWidth: mw, height: 'auto'});
$r = $p.parent('a').length? $p.parent('a') : $p;
if($r.length){return false;}
});
if($r.length){$firsttitle.before($('<div></div>').append($r));}
};
socialfeed.init() //Always call this last




Since you're already using jQuery on the page, I've used it to massage the feeds to get out just the first image from their descriptions with its link if any.

This same method can be applied to any feed. If the first feed item description doesn't have an image it will look to the next and so on. If there are no images in any of the feeds' items' descriptions, none will be shown. The image, if found, is always displayed before the first item. There are many variations possible. But from the image in your post, this seemed like what you were after.

The browser cache may need to be cleared and/or the page refreshed to see changes.

cxcskiing
07-18-2013, 05:17 PM
The image, if found, is always displayed before the first item. There are many variations possible. But from the image in your post, this seemed like what you were after.

) We're getting close to what I'm after! Per your tweak, it's showing up nicely now at www.cxcskiing.org. I know my mock-up had only one image displayed before the first item, but I actually need it to display an image before each of the feed item. Would that be one of the possible variations?

Thank you!
Irina K.

jscheuer1
07-18-2013, 07:44 PM
I thought that might be neat, so I already worked it out:


var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("CXC News & PR", "http://cxcnewsfeed.wordpress.com/feed/atom/") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("CXC Team Blog", "http://cxceliteblog.com/feed/atom")
socialfeed.displayoptions("label snippet") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
socialfeed.onfeedload = function(){
var $ = jQuery, $title = $(this.feedcontainer).find('.titlefield'), mw = $(this.feedcontainer).children().innerWidth() - 5, $p, $r;
$.each(this.feeds, function(i, feed){
$p = $(feed.content).find('img').eq(0).css({maxWidth: mw, height: 'auto', maxHeight: 210, width: 'auto'});
$r = $p.parent('a').length? $p.parent('a') : $p;
if($r.length){$title.eq(i).before($('<div class="feedimage"></div>').append($r));}
});
};
socialfeed.init() //Always call this last




Notes: The code sets a max width to 5px less than the width of the items and a max height of 210px:


.css({maxWidth: mw, height: 'auto', maxHeight: 210, width: 'auto'})

You can adjust that or remove it. The images may be styled in a stylesheet via the added class (feedimage):


.feedimage img {
margin: 0 auto;
display: block;
}

cxcskiing
07-18-2013, 08:21 PM
Super! I'll be re-working the news grid layout a little bit, and once settled on a particular design, this new image functionality with fit nicely ) Thank you so much for walking me through this! Is it okay to use the gfeedcatcher initiation script more than 2 times on the same web page?

Irina K.

jscheuer1
07-18-2013, 08:49 PM
You can use it as many times as you like with as many feeds as you like. However, though there's no real limit, it's a lot like images on a page. The more there are and the larger each one is, the longer it takes to load the page. I had someone with 100's of feeds. It took quite a while for the page to load. But he didn't seem to mind. Now that was actually with a locally hosted PHP RSS feed parser, but I doubt there is much if any advantage to having the Google servers doing some of the work. One good thing is that these feeds get cached on Google's servers, so it doesn't have to take so long each time. Still, with a very lot of them on one page, there will be a noticeable delay in loading the page as they still have to be fetched from Google and parsed by the browser each time.

Oh, and I meant that in regards to the feeds alone, without images. Even though they're just text, fetching them takes more time than an ordinary page. If you're also showing images from them, that would add on top to the load time.

cxcskiing
07-22-2013, 02:59 PM
Thank you for all your help!

cxcskiing
07-16-2014, 05:20 PM
I'm sorry - I can't find a way to open a new thread. My question is again about gAjax RSS Feeds Displayer v2.0 (hosted) (http://www.dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htm)

What do I tweak (and where) to make a feed display more characters?

Thank you!

jscheuer1
12-03-2015, 05:59 PM
This API is no longer offered by Google, so folks will have to look elsewhere for RSS and other feed parsing scripts. See:

http://www.dynamicdrive.com/dynamicindex18/

Pick one that IS NOT marked (hosted). These will require PHP though. So if that's unavailable for you, you can try the web for other solutions.

ddadmin
12-03-2015, 11:56 PM
Seems like Google Feeds API is working today all of a sudden. Not sure what this means...

jscheuer1
12-04-2015, 01:57 PM
Back by popular demand? In any case, here is the somewhat cryptic deprecation notice:

https://developers.google.com/feed/terms

Reading it more closely, it only appears to say that as of April of 2015 they are dropping any commitment to supporting the service, or even notifying folks of compatibility issues which may or may not arise due to changes in the service, which they now presumably may drop at any moment, again without any notice.

I was prompted to even mention this in the first place because a user mentioned it to me and when I checked I was getting:

Google Feed API Error: this API is no longer available.

Alerts on the SAG Content Scroller v1.3 page, and no content on the other Google Feed API pages, (the various gAjax scripts).

Here's what I just wrote the user in question:


Looks like the Google Feed API is available again - today at least. They do have a deprecation notice up that basically says they may change or discontinue the service at any time without notice. I get the feeling that they might have in mind a replacement service, but that if they do unvail one at some point, it might not be backward compatible and that they are making no commitment to explaining how to adapt to the new version. Folks may just have to start from scratch, more or less, with the new API. That is if a new one is forthcoming. They're also reserving the right to drop it without any replacement. Even so, I'm thinking they would like to continue it if possible and make any transition as seamless as possible, just that they don't want to be legally bound to do so.

For now though, I guess it's back up and running.

And to this question:


I'm sorry - I can't find a way to open a new thread. My question is again about gAjax RSS Feeds Displayer v2.0 (hosted) (http://www.dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htm)

What do I tweak (and where) to make a feed display more characters?

Thank you!

Use "description" instead of "snippet" For example, where you have something like so:


var socialfeed=new gfeedfetcher("someid", "someclass", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
socialfeed.init() //Always call this last

Change that to description. Or if you don't have snippet or description there, add description, or even just snippet. If you want more characters than the snippet but less than the description, that's a little trickier. But I'm pretty sure that can be done. Let me know.

ddadmin
12-04-2015, 09:00 PM
I think Google basically decided to prolong Google Feed API for a little while longer to give people time to switch over to another service. The sudden outage probably created a lot of angry users, even though technically the API has been retired/ deprecated since April 2015.

jscheuer1
12-04-2015, 11:51 PM
I took a look at Feedzilla. Their service was unavailable as well when I checked yesterday. Server took too long to respond. I would imagine that anyone attempting to provide this service would be facing ever increasing bandwidth demand as well as the occasional, or more frequent legal complaints of content providers who might wish that their feeds only appear in the more traditional manner (as newsfeeds directly to browsers on a client by client basis and/or other more proprietary usages).

That said, I can think of no other organization besides Google that might be able to stay ahead/on top of all that. So I wonder if maybe their notice isn't just more of a "We're trying, but can't promise anything." than anything else.

missbeer
07-27-2016, 04:40 AM
I also want to use images in the feed, which is showing now also.
However i want to edit the size of the images so that it fits in the layout (responsive).

The first example giving in this topic is hard for me to work it out.



This is the feed url.
http://macwork.nl/com/app.php/smartfeed/feed?u=2&e=rHAyIJIWKUMDxuY33D6WBVU8l8BGjGHZHDOgYL5YaN7uYkr2uwNQ-YUAr3iAJGNElCselpBvvT2DkEdEk5_Q-A..&l=1&f=4&t=3&s=0&y=2&d=3

And this is the output url

http://macwork.nl/com/personal.php

As you can see the size of the images are the same.

I use the following code which isn't working of course.


var newsfeed=new gfeedfetcher("example3", "example3class", "_new")
newsfeed.addFeed("phpbb", "http://macwork.nl/com/app.php/smartfeed/feed?u=2&e=rHAyIJIWKUMDxuY33D6WBVU8l8BGjGHZHDOgYL5YaN7uYkr2uwNQ-YUAr3iAJGNElCselpBvvT2DkEdEk5_Q-A..&l=1&f=4&t=3&s=0&y=2&d=3") //Specify "label" plus URL to RSS feed
newsfeed.displayoptions("datetime description") //show the specified additional fields
newsfeed.setentrycontainer("p", "pclass") //Display each entry as a paragraph, and add a "pclass" class to each P
newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date
newsfeed.onfeedload = function(){
var $ = jQuery, $title = $(this.feedcontainer).find('.titlefield'), mw = $(this.feedcontainer).children().innerWidth() - 5, $p, $r;
$.each(this.feeds, function(i, feed){
$p = $(feed.content).find('img').eq(0).css({maxWidth: mw, height: 'auto', maxHeight: 25, width: 'auto'});
$r = $p.parent('a').length? $p.parent('a') : $p;
if($r.length){$title.eq(i).before($('<div class="feedimage"></div>').append($r));}
});
};
newsfeed.init() //Always call this last


Any idea how to make it work?


I do have another small question for the layout.
I use phpbb forum as soure.
But i want the layout of the initial title/link to be nicer.


It's now like this.
Introduce yourself :: Lorem Ipsum 2 :: Author Ariel

But i want the it to be more like this like

Lorem Ipsum 2 (so only topic title)
by Author Ariel (author on next line)

Is this easy to change?

jscheuer1
07-27-2016, 03:25 PM
I would skip that and just put a style like this:


span.descriptionfield img {
width: 20%;
height: auto;
}

in the stylesheet for the page. If you want it to be more responsive than that, use media queries to achieve differing styles for the images depending upon the device/window size.