Display Image with gAjax RSS Feeds Displayer v2.0

[cxcskiing]

1) Script Title: gAjax RSS Feeds Displayer v2.0 (hosted)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...sdisplayer.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]

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]

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]

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]

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/progr...c-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.

[jscheuer1]

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]

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]

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]

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]

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.