Rockclimbing.com goodies

• Google module for your homepage/webpage
• How to inline images?
  
  

  1. Google module

  
  If you use google personalized homepage, this gadget will display a random photo from the list of current top rc photos on your personalized google homepage.

  Random photo from rockclimbing.com top photographs XXL version (double the size, double the fun)

  
  For any non-english google users, you can go to google personalized homepage, select add more content (it is google.fr/ig/directory for frenchies for example), than select add by url, and use this link[module url]
  
  

  
  

  Not a google personalized homepage user? You can also put the gadget to your own webpage! Yes, it is possible. Check here for instructions.
  
  What is not working

  • IE does not return the correct module width. Hence, I only use thumbnail size. It is a bug in the google gadget code.
  • If the description is too large, it goes out of the module area. I have a version with scrollbars, but it looks ugly. A better solution is to crop the text if it is too large.
  • Sometimes the module cannot capture the description page. I am not sure what is happening there. Maybe a parsing error.
  • Since the new rc.com layout does not have a decent photo navigation, I cannot support the number of top photos selection anymore.
  
  
  Are you interested in the code? Here it is

  		//start with a dummy div. We will fill it with the photo and description later
  	<div id="content__MODULE_ID__">rockclimbing.com site is undergoing changes right now. If the module stops working, do not panic. I will rewrite the module to work with the updated site soon.</div>
   	<script type="text/javascript"> 
  				//start by reading user prefs. google gadget stuff here...
    		var prefs__MODULE_ID__ = new _IG_Prefs(__MODULE_ID__);
       		var sizephoto__MODULE_ID__ = (prefs__MODULE_ID__.getString("sizephoto"));
       		var expphoto__MODULE_ID__ = (prefs__MODULE_ID__.getString("expphoto"));
       		var sidephoto__MODULE_ID__ = (prefs__MODULE_ID__.getString("sidephoto"));
       		var photographer__MODULE_ID__ = (prefs__MODULE_ID__.getBool("photographerbool"));
  		var width__MODULE_ID__ = prefs__MODULE_ID__.getModuleWidth();
  
  		if (width__MODULE_ID__==0) 
  			width__MODULE_ID__=_gel("remote___MODULE_ID__").offsetWidth;
  
  		if (width__MODULE_ID__==0) 
  			width__MODULE_ID__=200;
  
  		var fetchy="http://www.rockclimbing.com/photos/Ratings/index.html";	//rc.com photo page to fetch
  
  		function loadfinished(myimage){	//after finished loading image, scale down to fit module area. This does not work for IE
  			var h=myimage.height;
  			var maxheight=(sidephoto__MODULE_ID__=="bottom")? 120:170;
  			if (h>maxheight){
  				myimage.height=maxheight;
  				myimage.width=(myimage.width)*maxheight/h;
  			}
  		}
  
  		_IG_FetchContent(fetchy, function (responseText) 	// fetch rc.com photo page
  		{
        	var html = "<div>";
  
  		var imagelist=responseText.match(/\d\D\d*-thumbnail_\d\d\d\d\d.jpg/g);	//find all images inside the page
  		var headerlist=responseText.match(/\d.\d+ -.*"/g);				
  
  		var numimages=imagelist.length-1;
  		var randomimage=Math.round(numimages*Math.random());
  		var foosplit=imagelist[randomimage].split("-thumbnail_");		//select one of the images randomly
  	
  		html+="<p><center><table><td VALIGN=top><center>";
  		html+="<a target=_top href=\"http://www.rockclimbing.com/cgi-bin/photos/jump.cgi?Detailed=";
  		html+=foosplit[1].substring(0,foosplit[1].length-4);
  		html+="\">";		
  
  		html+="<img ";
  		if (sizephoto__MODULE_ID__=="large")			
  			html+=("width="+(width__MODULE_ID__ - 50)+"px ");
  		html+=" src=\"http://www.rockclimbing.com/images/photos/assets/";
  
  					//if user wants larger image, replace the url to point the larger image
  		var largeornot=(sizephoto__MODULE_ID__=="large")? 1:0;
  		html+=(imagelist[randomimage].substring(0,1)-largeornot);
  		html+=(foosplit[0].substring(1,foosplit[0].length-1));
  		html+=(imagelist[randomimage].substring(0,1)-largeornot);
  		html+=(largeornot)? "-largest_":"-thumbnail_"
  		html+=foosplit[1];
  		html+="\" ";
  		if (largeornot)		
  			html+=" onLoad=loadfinished(this);";	//we need to scale the image if the larger one is selected
  		html+=">";
  
  		html+="</a></td>\n";
  		if (sidephoto__MODULE_ID__=="bottom")	//where to put the description, side or bottom?
  			html+="<tr>";
  
  		if (expphoto__MODULE_ID__!="none"){
  			html+="<td><font size=-1><center>";
  		}
  
  		html+="<div id=\"content2__MODULE_ID__\">";
  		html+="<font size=-1><center>";
  		html+=headerlist[randomimage].substring(6,headerlist[randomimage].length-1);
  		html+="</div>";
  
  		var fetchy2="http://www.rockclimbing.com/cgi-bin/photos/jump.cgi?Detailed=";	
  		fetchy2+=foosplit[1].substring(0,foosplit[1].length-4);
  		_IG_FetchContent(fetchy2, function (responseText2) {   //if the user wants the description, we need to capture the description page too
  			var html2 = "";
  			html2+="<font size=-1><center>";
  			
  			if (expphoto__MODULE_ID__=="long"){			//if long description is selected, find it inside the captured page
  				var headerlist2=responseText2.match(/<p class="description">(.|\n)*-- Photo Ends --/g);
  				html2+=headerlist2[0].substring(23, headerlist2[0].length);
  			}
  
  		if (photographer__MODULE_ID__){		//if the photographer is also selected, put a link to his profile and gallery
  			var photographer=responseText2.match(/username=.*;/g);
  			var myphotog=photographer[0].substring(9,photographer[0].length-1);
  			var photostring="http://www.rockclimbing.com/cgi-bin/photos/search.cgi?query=&LinkOwner=XXXXX;LinkOwner-opt==";
  			html2+="<br><font size=-1><\/i>Photo by ";
  			html2+="<a target=_top href=\"http://www.rockclimbing.com/cgi-bin/forum/gforum.cgi?username=";
  			html2+=myphotog;
  			html2+="\">";
  			html2+=myphotog;
  			html2+="<\/a> ";
  			html2+="[<a href=\""+photostring.replace("XXXXX",myphotog)+"\">gallery<\/a>] ";
  		}
  
  			html2+="";
  			_gel('content2__MODULE_ID__').innerHTML = html2;
  		});
  		html+="</div>";
  		_gel('content__MODULE_ID__').innerHTML = html;
  		});
  	</script>
  
  
  

  
  

  ---

  2. How to inline images

  
  Update: Inline images are back in rockclimbing.com. You do not need to use this bookmarklet anymore. Still, if anybody needs it for other forums or historical reasons (lol), I will keep it here....
  
  Bored with the new layout of the rockclimbing.com?
  
  With the new and "improved" rockclimbing.com site, we do not have the ability to post embedded images. Are they going to come back? I do not think so, but what do I know. But, as I wait, I prepared a temporary solution, a hack. As you read a forum, you will see only links to images or attachments. So, here is a small bookmarklet which you can use in firefox, and if you press it as you read a forum in this new and boring format, it will embed all the linked images. voila...

  It is developed and tested using Firefox, but apparently it also works in IE7 and Safari. It should also work on other forums, such as dropzone.com.
  
  If you want to inline attachments only, use this one
  If you want to inline only linked images, use this one.
  If you want to inline linked images and attachments, use this one.
  
  How to install the bookmarklet:

• Drag and drop the bookmarklet onto the bookmark bar. Done.
  
  

  Or, right click, and select Bookmark This Link. If you are using IE, you should use this method.

  
  
  How to use:

  While browsing, just press the bookmarklet, or click it from the bookmarks/favorites, voila..

  Before	After

  
  
  What is not working

  • All attachments are converted to inline images. There is no check if they are images or not.
  • Although I rewrite the code, it still misses some of the links. For the time being, apply twice.
  • Only jpg, gif, bmp, png support. Also, I could have written that part more efficient.

  
  
  Here is the code I used if you are interested.

  javascript:(
  function (){ 
  //Disclaimer: I am not a web coder myself, and have a limited experience. So if you think the code is ugly, well, it is....
  
  	function check(foo){			//returns true if the element is an attachment, or image
  							//This could be written more efficiently
  		return ((foo.search(/postatt_id/)>-1)
  			||(foo.search(/.jpg/)>-1)||(foo.search(/.JPG/)>-1)
  			||(foo.search(/.gif/)>-1)||(foo.search(/.GIF/)>-1)
  			||(foo.search(/.png/)>-1)||(foo.search(/.PNG/)>-1)
  			||(foo.search(/.bmp/)>-1)||(foo.search(/.BMP/)>-1)  );
  	} 
  
  	var ps,i; 
  	var tobereplaced=0; 
  	do { 
  		ps=document.getElementsByTagName('a'); 	//find all links in the page
  		for(i=0;i<ps.length;i++)
  			if (check(ps[i].href)){ 
  				tobereplaced = ps[i]; 	//if it is an image or attachment mark to replace
  				break;
  			} 
  		if (i<ps.length) {      //if there is something to replace
  			var replacement = document.createElement('img');	//create a new image 
  			replacement.src=tobereplaced.href; 			//set the image source to the link address
  			tobereplaced.parentNode.replaceChild(replacement,tobereplaced);	//replace the link with the image
  		} 
  	} while (i<ps.length);	//restart, until there is nothing to replace
  			// I could have replaced inside the first for loop, I know.
  			// But the first version missed half of the links, so I assume when I replace the link with an image it is messing the previous list.
  			// So, I decided to replace one by one, and search through the links again and again, until there is nothing to replace.
  			// Not efficient, you bet. Ugly, yes. But worked better than the previous iteration, so here it is.
  	}
  )()
  

  
  
  

  ---

  
  
  
  

  Another procrastination by Zeki Melek