Results 1 to 9 of 9

Thread: Gfeedfetcher - How can i limit the number of characters in items' titles?

  1. #1
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Gfeedfetcher - How can i limit the number of characters in items' titles?

    1) Script Title:gfeedfetcher

    2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...sdisplayer.htm

    3) Describe problem: How can i increase the number of characters in feed description?

    I need some help to increase the number of characters in the feed discription. I have read to you have to adjust some in the item discription. I tired but didnt work.
    Here is my gfeed code, can somebody please tell me what to do. Iam getting crazy ;(


    Code:
    gfeedfetcher.prototype._displayresult=function(feeds){
    	var rssoutput=(this.containertag[0]=="li")? "<ul>\n" : ""
    	gfeedfetcher._sortarray(feeds, this.sortstring)
    	var itemurl=[], itemtitle=[], itemlabel=[], itemdate=[], itemdescription=[]
    	for (var i=0; i<feeds.length; i++){
    		itemurl.push(feeds[i].link)
    		itemtitle.push('<span class="titlefield"><a href="' + feeds[i].link + '" target="' + this.linktarget + '">' + feeds[i].title + '</a></span>\n')
    		itemlabel.push(/label/i.test(this.showoptions)? '<span class="labelfield">'+this.feeds[i].ddlabel+'</span>\n' : "")
    		itemdate.push(gfeedfetcher._formatdate(feeds[i].publishedDate, this.showoptions))
    		var itemdescriptionsingle=/description/i.test(this.showoptions)? feeds[i].content : /snippet/i.test(this.showoptions)? feeds[i].contentSnippet  : ""
    		itemdescriptionsingle=(itemdescriptionsingle!="")? '<span class="descriptionfield">' + itemdescriptionsingle + '</span>\n' : ""
    		itemdescription.push(itemdescriptionsingle)
    	}

    Thanks.

    Dan
    Last edited by jscheuer1; 08-22-2016 at 07:21 PM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Moderator's Note: I've changed the title of this thread to reflect the real issue which was initially unclear. The actual answer to the real question is in post 8:

    http://www.dynamicdrive.com/forums/s...969#post318969

    of this thread.


    Are you using snippet in the displayoptions field? If so, change that to description in the on page call (from Step 3 on the demo page):

    Code:
    <script type="text/javascript">
    
    var socialfeed=new gfeedfetcher("example2", "example2class", "_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
    
    </script>
    Make that:

    Code:
    <script type="text/javascript">
    
    var socialfeed=new gfeedfetcher("example2", "example2class", "_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 description") //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
    
    </script>
    Or if you haven't included either (again, from Step 3):

    Code:
    <script type="text/javascript">
    
    var cssfeed=new gfeedfetcher("example1", "example1class", "")
    cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
    cssfeed.displayoptions("date") //show the specified additional fields
    cssfeed.setentrycontainer("li") //Display each entry as a list (li element)
    cssfeed.filterfeed(10, "title") //Show 10 entries, sort by date
    cssfeed.init() //Always call this last
    
    </script>
    Add description:

    Code:
    <script type="text/javascript">
    
    var cssfeed=new gfeedfetcher("example1", "example1class", "")
    cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
    cssfeed.displayoptions("date description") //show the specified additional fields
    cssfeed.setentrycontainer("li") //Display each entry as a list (li element)
    cssfeed.filterfeed(10, "title") //Show 10 entries, sort by date
    cssfeed.init() //Always call this last
    
    </script>
    Last edited by jscheuer1; 08-25-2016 at 10:27 PM. Reason: add moderator's note
    - John
    ________________________

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

  3. #3
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello John,

    First thanks for your quick reply. I cant get it working. Can you please look at it. But i quess i need to change somthing in the Gfeedhetcher script too.
    I only want to show the headlines, no dates or anything else.
    This is what i use now.

    Code:
    <script type="text/javascript">
    var cssfeed=new gfeedfetcher("feed", "", "") //Specify "Id", "Class", ""
    cssfeed.addFeed("Nu.nl", "http://www.nu.nl/rss/Algemeen") //Specify "label" 
    cssfeed.displayoptions("") //show the specified additional fields options: label/date
    cssfeed.setentrycontainer("li") //Display each entry as a list (li element) options: div / li
    cssfeed.filterfeed(5, "date") //Show 10 entries, sort by date options: title/date
    cssfeed.init() //Always call this last
    </script>
    
    Gfeedfetcher:
    
    // -------------------------------------------------------------------
    // gAjax RSS Feeds Displayer- By Dynamic Drive, available at: http://www.dynamicdrive.com
    // Created: July 17th, 2007
    // Updated June 14th, 10': Fixed issue in IE where labels would sometimes be associated with the incorrect feed items
    // Updated May 24th, 12': Added onfeedload event handler to run code when a RSS displayer has fully loaded 2) Script now skips the loading of a RSS feed if it's invalid (instead of alert a message)
    // Updated Sept 20th, 12': Version 2. Adds support for templating of entries' output, search and replace via regular expressions inside any RSS field
    // -------------------------------------------------------------------
    
    
    
    
    var gfeedfetcher_loading_image="img/loader.gif" //Full URL to "loading" image. No need to config after this line!!
    
    google.load("feeds", "1") //Load Google Ajax Feed API (version 1)//
    
    
    
    function gfeedfetcher(divid, divClass, linktarget){
    	this.linktarget=linktarget || "" //link target of RSS entries
    	this.feedlabels=[] //array holding lables for each RSS feed
    	this.feedurls=[]
    	this.feeds=[] //array holding combined RSS feeds' entries from Feed API (result.feed.entries)
    	this.feedsfetched=0 //number of feeds fetched
    	this.feedlimit=5
    	this.showoptions="" //Optional components of RSS entry to show (none by default)
    	this.outputtemplate="{title} {label} {date}<br />{description}" // output template for each RSS entry
    	this.regexprules=[] // array to hold regexp rules [regex, replacestr, field_to_apply_to]
    	this.sortstring="date" //sort by "date" by default
    	document.write('<div id="'+divid+'" class="'+divClass+'"></div>') //output div to contain RSS entries
    	this.feedcontainer=document.getElementById(divid)
    	this.containertag=["li", "<li>"] // [tag to wrap around each rss entry, final tag]
    	this.onfeedload=function(){}
    }
    
    
    gfeedfetcher.prototype.addFeed=function(label, url){
    	this.feedlabels[this.feedlabels.length]=label
    	this.feedurls[this.feedurls.length]=url
    }
    
    gfeedfetcher.prototype.filterfeed=function(feedlimit, sortstr){
    	this.feedlimit=feedlimit
    	if (typeof sortstr!="undefined")
    	this.sortstring=sortstr
    }
    
    gfeedfetcher.prototype.displayoptions=function(parts){
    	this.showoptions=parts //set RSS entry options to show ("date, datetime, time, snippet, label, description")
    }
    
    gfeedfetcher.prototype.definetemplate=function(str){
    	this.outputtemplate=str
    }
    
    gfeedfetcher.prototype.addregexp=function(regliteral, replacewith, field){
    	this.regexprules.push([
    		regliteral,
    		replacewith,
    		field
    	])
    }
    
    gfeedfetcher.prototype.setentrycontainer=function(containertag, cssclass){  //set element that should wrap around each RSS entry item
    	this.containertag=[containertag.toLowerCase(), '<' + containertag.toLowerCase ()+ (cssclass? ' class="'+cssclass+'"' : '') + ' >']
    }
    
    gfeedfetcher.prototype.init=function(){
    	this.feedsfetched=0 //reset number of feeds fetched to 0 (in case init() is called more than once)
    	this.feeds=[] //reset feeds[] array to empty (in case init() is called more than once)
    	this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Retrieving RSS feed(s)'
    	var displayer=this
    	for (var i=0; i<this.feedurls.length; i++){ //loop through the specified RSS feeds' URLs
    		var feedpointer=new google.feeds.Feed(this.feedurls[i]) //create new instance of Google Ajax Feed API
    		var items_to_show=(this.feedlimit<=this.feedurls.length)? 1 : Math.floor(this.feedlimit/this.feedurls.length) //Calculate # of entries to show for each RSS feed
    		if (this.feedlimit%this.feedurls.length>0 && this.feedlimit>this.feedurls.length && i==this.feedurls.length-1) //If this is the last RSS feed, and feedlimit/feedurls.length yields a remainder
    			items_to_show+=(this.feedlimit%this.feedurls.length) //Add that remainder to the number of entries to show for last RSS feed
    		feedpointer.setNumEntries(items_to_show) //set number of items to display
    		feedpointer.load(function(label){
    			return function(r){
    				displayer._fetch_data_as_array(r, label)
    			}
    		}(this.feedlabels[i])) //call Feed.load() to retrieve and output RSS feed.
    	}
    }
    
    
    gfeedfetcher._formatdate=function(datestr, showoptions){
    	var itemdate=new Date(datestr)
    	var parseddate=(showoptions.indexOf("datetime")!=-1)? itemdate.toLocaleString() : (showoptions.indexOf("date")!=-1)? itemdate.toLocaleDateString() : (showoptions.indexOf("time")!=-1)? itemdate.toLocaleTimeString() : ""
    	return "<span class='datefield'>"+parseddate+"</span>\n"
    }
    
    gfeedfetcher._sortarray=function(arr, sortstr){
    	var sortstr=(sortstr=="label")? "ddlabel" : sortstr //change "label" string (if entered) to "ddlabel" instead, for internal use
    	if (sortstr=="title" || sortstr=="ddlabel"){ //sort array by "title" or "ddlabel" property of RSS feed entries[]
    		arr.sort(function(a,b){
    		var fielda=a[sortstr].toLowerCase()
    		var fieldb=b[sortstr].toLowerCase()
    		return (fielda<fieldb)? -1 : (fielda>fieldb)? 1 : 0
    		})
    	}
    	else{ //else, sort by "publishedDate" property (using error handling, as "publishedDate" may not be a valid date str if an error has occured while getting feed
    		try{
    			arr.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})
    		}
    		catch(err){}
    	}
    }
    
    gfeedfetcher.prototype._fetch_data_as_array=function(result, ddlabel){	
    	var thisfeed=(!result.error)? result.feed.entries : "" //get all feed entries as a JSON array or "" if failed
    	if (thisfeed==""){ //if error has occured fetching feed
    		this._signaldownloadcomplete()
    		return
    	}
    	for (var i=0; i<thisfeed.length; i++){ //For each entry within feed
    		result.feed.entries[i].ddlabel=ddlabel //extend it with a "ddlabel" property
    	}
    	this.feeds=this.feeds.concat(thisfeed) //add entry to array holding all feed entries
    	this._signaldownloadcomplete() //signal the retrieval of this feed as complete (and move on to next one if defined)
    }
    
    gfeedfetcher.prototype._signaldownloadcomplete=function(){
    	this.feedsfetched+=1
    	if (this.feedsfetched==this.feedurls.length){ //if all feeds fetched
    		this._displayresult(this.feeds) //display results
    		this.onfeedload()
    	}
    }
    
    
    gfeedfetcher.prototype._displayresult=function(feeds){
    	var rssoutput=(this.containertag[0]=="li")? "<ul>\n" : ""
    	gfeedfetcher._sortarray(feeds, this.sortstring)
    	var itemurl=[], itemtitle=[], itemlabel=[], itemdate=[], itemdescription=[]
    	for (var i=0; i<feeds.length; i++){
    		itemurl.push(feeds[i].link)
    		itemtitle.push('<span class="titlefield"><a href="' + feeds[i].link + '" target="' + this.linktarget + '">' + feeds[i].title + '</a></span>\n')
    		itemlabel.push(/label/i.test(this.showoptions)? '<span class="labelfield">'+this.feeds[i].ddlabel+'</span>\n' : "")
    		itemdate.push(gfeedfetcher._formatdate(feeds[i].publishedDate, this.showoptions))
    		var itemdescriptionsingle=/description/i.test(this.showoptions)? feeds[i].content : /snippet/i.test(this.showoptions)? feeds[i].contentSnippet  : ""
    		itemdescriptionsingle=(itemdescriptionsingle!="")? '<span class="descriptionfield">' + itemdescriptionsingle + '</span>\n' : ""
    		itemdescription.push(itemdescriptionsingle)
    	}
     	// create temp object to store references to rss components, for access dynamically:
    	var holder={urlfield: itemurl, titlefield: itemtitle, labelfield: itemlabel, datefield: itemdate, descriptionfield: itemdescription}
    	var regexprules=this.regexprules
    	for (var i=(this.regexprules && this.regexprules.length>0? this.regexprules.length-1 : -1); i>=0; i--){ // loop thru regexprules array
    		if (regexprules[i][2]=="titlefield" || regexprules[i][2]=="labelfield" || regexprules[i][2]=="datefield" || regexprules[i][2]=="descriptionfield"){
    			var targetarray=holder[regexprules[i][2]] // reference array containing said field type (ie: itemdescription if regexprules[i][2]=="descriptionfield")
    			targetarray=targetarray.join('***delimiter***') // combine array elements before doing search and replace
    				.replace(regexprules[i][0], regexprules[i][1])
    				.split('***delimiter***') // revert back to array
    			holder[regexprules[i][2]]=targetarray
    			regexprules.splice(i,1) // remove this rule from regexprules
    		}
    	}
    	for (var i=0; i<feeds.length; i++){ // loop thru feeds, molding each feed entry based on template
    		rssoutput+= this.containertag[1] + this.outputtemplate.replace(/({title})|({url})|({label})|({date})|({description})/ig, function(m){
    			if (m == "{title}")
    				return holder.titlefield[i]
    			else if (m == "{url}")
    				return holder.urlfield[i]
    			else if (m == "{label}")
    				return holder.labelfield[i]
    			else if (m == "{date}")
    				return holder.datefield[i]
    			else if (m == "{description}")
    				return holder.descriptionfield[i]
    		}) + "</" + this.containertag[0] + ">" + "\n\n"
    	}
    	rssoutput+=(this.containertag[0]=="li")? "</ul>" : ""
    	for (var i=0; i<this.regexprules.length; i++){ // loop thru remaining regexprules array that target the entire feed in general (versus specific field)
    		rssoutput=rssoutput.replace(this.regexprules[i][0], this.regexprules[i][1])
    	}
    	this.feedcontainer.innerHTML=rssoutput
    }
    Really hope you can help me out. This is really a brainbreaker for me.

    Thanks, Dan

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm going to have to have a closer look at this later. But you really don't need to change the script. If all you want is the headline and the full description it would be (addition to your code highlighted):

    Code:
    <script type="text/javascript">
    var cssfeed=new gfeedfetcher("feed", "", "") //Specify "Id", "Class", ""
    cssfeed.addFeed("Nu.nl", "http://www.nu.nl/rss/Algemeen") //Specify "label" 
    cssfeed.displayoptions("discription") //show the specified additional fields options: label/date
    cssfeed.setentrycontainer("li") //Display each entry as a list (li element) options: div / li
    cssfeed.filterfeed(5, "date") //Show 10 entries, sort by date options: title/date
    cssfeed.init() //Always call this last
    </script>
    If you're still having problems, a link to your page would probably help clear things up.

    Oh, and as I recall, the cssfeed offers little in the way of descriptions, so if that's your test feed, no matter what you do, you will not get all that much description text. You are never going to get more information on any item than what the feed supplies, and although I've never seen it happen, it's possible there might be a limit imposed by the Google API itself. Though I've always seen it give the complete description when asked for it by this script using the syntax I'm suggesting.
    Last edited by jscheuer1; 08-23-2016 at 02:28 AM. Reason: add info
    - John
    ________________________

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

  5. #5
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello John,

    Still having problem to get a word wrap in the headlines of the feed.
    I have uploaded a feed test, here you can see that i want to cut the characters (word wrap) of the headline so it fits in one line in the feedbox. http://me..........synology.me/feed/feed.html
    I only use the headline of the feed, i dont use descriptions or date.
    You can download the used files here : http://me..........synology.me/download/feed.zip

    I hope i cleared my problem well.

    Thanks again.

    edit: As you can see i used a css trick (white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ) to get it wrapped, but this is an very ugly way.

    Dan
    Last edited by hofleverancier; 08-24-2016 at 08:02 PM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm actually a little confused. Your first post asked:

    How can i increase the number of characters in feed description?
    Now you seem to want no description, and want the title to wrap. The ellipsis text-overflow is IE 7 and less only. So the text looks just cut off in all other browsers. I'm really not sure what you are after. If you just want wrapping, get rid of all of this:

    Code:
    .feed-box{
    width: 100%;
    white-space: nowrap;overflow: hidden;text-overflow: ellipsis; 
    /* is a option i dont want to use cause it cuts the words ugly at the border of the box without any padding*/
    }
    Then I'd suggest adding display block here:

    Code:
    #feed li span{
    color:#AA1802;
    font-size:81.3%;
    padding-left:1.5%;
    font-weight:lighter;	
    display: block;
    }
    That should even out the left margin, but then there will be too much space between items. You can fix that by making br display none:

    Code:
    #feed br {
        display: none;
    }
    If that makes things too tight, you can add a little margin-bottom to the #feed li span - say 3px.
    - John
    ________________________

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

  7. #7
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello John, sorry for the misleading must be in my bad knowledge of the English lanquage.
    But is it possible to make the title end like 3 dots, so you can choose how many characters will be displayed? example: "this is the title line and..."

    Best regards,

    Dan

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    No problem Dan. I was already thinking there might be a language barrier. But I think I have it now.

    OK (working from your zip file), get rid of this (remove from) the feeds.css file:

    Code:
    .feed-box{
    width: 100%;
    white-space: nowrap;overflow: hidden;text-overflow: ellipsis; 
    /* is a option i dont want to use cause it cuts the words ugly at the border of the box without any padding*/
    }
    On feed.html, add the highlighted as shown:

    Code:
                <script type="text/javascript">
    var cssfeed=new gfeedfetcher("feed", "", "") //Specify "Id", "Class", ""
    cssfeed.addFeed("Nu.nl", "http://www.nu.nl/rss/Algemeen") //Specify "label"
    cssfeed.displayoptions("title") //show the specified additional fields options: label/date
    cssfeed.setentrycontainer("li") //Display each entry as a list (li element) options: div / li
    cssfeed.filterfeed(5, "date") //Show 10 entries, sort by date options: title/date
    cssfeed.delaydisplay = cssfeed._displayresult;
    cssfeed._displayresult = function(){};
    cssfeed.onfeedload = function(){
    	var feeds = this.feeds, i = feeds.length, allowed = 26, limit = 29, t;
    	while(--i > -1){
    		t = feeds[i].title;
    		if(t.length > limit){
    			feeds[i].title = t.substring(0, allowed) + ' \u2026';
    		}
    	}
    	this.delaydisplay(feeds);
    };
    cssfeed.init() //Always call this last
    </script>
    See the red 26? That's how many characters will be allowed. The red 29 is the limit for how long a title can be before it gets reduced. If the limit is passed, however many characters you allow will be followed by a space and an ellipsis.

    Any questions or problems, just let me know.

    NOTE: You're supposed to hotlink to the Google API. I imagine it might be more responsive having a local copy, but if it changes in any important way, you will have to download it again. This has nothing to do with your issue though, and I'm surprised it works (using a local copy of the API), but it does.
    Last edited by jscheuer1; 08-25-2016 at 10:15 PM. Reason: merge posts - later, minor code improvements
    - John
    ________________________

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

  9. #9
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow John, Great!!! Thanks for your time and afford!!

    Best regards,

    Dan

Similar Threads

  1. Replies: 4
    Last Post: 03-11-2012, 11:49 PM
  2. Limit to number of images?
    By citydude in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-14-2010, 03:12 AM
  3. Replies: 0
    Last Post: 05-16-2009, 01:45 PM
  4. Replies: 2
    Last Post: 01-25-2009, 10:50 PM
  5. Advanced RSS ticker, limit feed items to display 10 only
    By sandinista in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-16-2008, 06:08 AM

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
  •