Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Display Image with gAjax RSS Feeds Displayer v2.0

  1. #1
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Display Image with gAjax RSS Feeds Displayer v2.0

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    If the feed has an image or images, and the section of the feed where the image or images are is selected in the:

    Code:
    feedinstance.displayoptions()
    part of the initialization it will.

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

    Code:
    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.
    Last edited by jscheuer1; 07-16-2013 at 09:29 PM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John -

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

    Example 4 initialization is:

    Code:
    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:

    Code:
    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    It all depends upon where the images are. You have:

    Code:
    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:

    Code:
    socialfeed.displayoptions("label snippet description")
    But the snippet is usually just a summary, so you might want to go with:

    Code:
    socialfeed.displayoptions("label description")
    or just:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post

    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.

    Click image for larger version. 

Name:	session-file-download.jpg 
Views:	137 
Size:	20.0 KB 
ID:	5143

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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.
    Last edited by jscheuer1; 07-17-2013 at 07:53 PM. Reason: to get it to look like the mock up image
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    I thought that might be neat, so I already worked it out:

    Code:
    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:

    Code:
    .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):

    Code:
    .feedimage img {
    	margin: 0 auto;
    	display: block;
    }
    Last edited by jscheuer1; 07-18-2013 at 09:09 PM. Reason: add notes
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 07-19-2013 at 06:42 AM. Reason: Oh, and I meant . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. gAjax RSS Feeds Displayer - Edit Feeds Shown
    By dsol828 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-01-2012, 08:11 PM
  2. gAjax RSS Feeds Displayer - ignore broken feeds?
    By kblm in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-24-2012, 11:18 PM
  3. Replies: 0
    Last Post: 09-05-2011, 10:18 AM
  4. gAjax RSS Feeds Displayer - can't display multiple feeds
    By nsbrown in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-06-2008, 09:40 AM
  5. gAjax RSS Feeds Displayer - display images
    By plimfec in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-27-2007, 01:45 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •