Google Image Search - By Color [Hidden Feature]

in Ideas and script requests
Subscribe to Google Image Search - By Color [Hidden Feature] 18 posts, 7 voices



Chris4 Scriptwright

Hey,

I came across a feature where you can use Google Image Search to search by a color (source: http://tinyurl.com/df3z4h)

For example, rather than searching for "red bird" which still results in unrelated images, you can search for "bird" but restrict the search to just images with red in them, like so:

http://images.google.com/images?q=bird&imgcolor...

Or more than one color by adding something like &imgcolor=blue,red,green

So my request is, as this is a hidden feature, could it be added as a drop-down menu (or similar) next to the other image filters (image size & content)?

Thanks.

 
Avindra V.G. Scriptwright

Here's a primitive version that other scriptwrights, (including myself) would probably criticize. But it works for now, just feeling lazy these days.

 
Aquilax Scriptwright

var re=/&imgcolor=(\w*)(?:&|$)/i;	//regexp to extract color name from search string
var sc=re.exec(location.search)?RegExp.$1.toLowerCase():"";	//color in search string
var url=location.pathname+location.search.replace(re,"");	//search string without imgcolor
var cs=["Black","Blue","Brown","Gray","Green","Orange","Pink","Purple","Red","Teal","White","Yellow"]; //valid colors
var s=document.createElement("select"); //select
s.name="imgcolor";
s.setAttribute("onchange","_isr_load(this)");
s.options[0]=new Option("Any color",url);
url+="&imgcolor=";
cs.forEach(function(c){(s.options[s.options.length]=new Option(c,url+c.toLowerCase())).selected=c.toLowerCase()==sc;});
document.forms[1].appendChild(document.createTextNode(" "));
document.forms[1].appendChild(s);

 
Chris4 Scriptwright

Great work Aquilax! Release it as a script?? :)

I installed Avindra's version but it's a textbox which defaults to 'red' and if you press enter, or change it to a different color and press enter, it doesn't work, just goes back to Google Images homepage.

 
Aquilax Scriptwright

If you want you can do it or ask AVG to take the code, I'm not interested to release it.

 
Chris4 Scriptwright

Fair enough. I'll release it and give you credit. :)

 
sdfghjklkjhg... Scriptwright

Aquilax how did you know the valid colors?

 
Chris4 Scriptwright

I've added some others like filetype and other advanced features, however sometimes they don't always work together.

 
Aquilax Scriptwright

@sdfghjklkjhg...
I have read the article (source: http://tinyurl.com/df3z4h)

 
Aquilax Scriptwright

addFilter("imgcolor",["Any color","Black","Blue","Brown","Gray","Green","Orange","Pink","Purple","Red","Teal","White","Yellow"]);
addFilter("as_filetype",["Any filetype","JPG","GIF","PNG","BMP"]);

function addFilter(param,values)
{
	var re=new RegExp("(\\?|&)"+param+"=(\\w*)(&|$)","img");		//regexp to extract the parameter from the search string
	var pv=re.exec(location.search)?RegExp.$2.toLowerCase():"";		//extracting parameter value
	var url=location.pathname+location.search.replace(re,function(){return arguments[3]?arguments[1]:"";});	//search string without parameter
	
	//creating dropdown
	var s=document.createElement("select");
	s.name=param;
	s.setAttribute("onchange","_isr_load(this);");
	
	//adding options
	s.options[0]=new Option(values.shift(),url);
	url+="&"+param+"=";
	values.forEach(function(v){(s.options[s.options.length]=new Option(v,url+v.toLowerCase())).selected=v.toLowerCase()==pv;});
	
	//appending dropdown
	document.forms[1].appendChild(document.createTextNode(" "));
	document.forms[1].appendChild(s);
}

 
sdfghjklkjhg... Scriptwright

Change
document.forms[1].appendChild(document.createTextNode(" "));
to
s.style.margin='0px 0px 0px 8px';
to get the option spacing precise.
Also switching lines one and two makes it look more consistent.
EDIT:
This script is awesome. ☺

 
Chris4 Scriptwright

I expanded on it a bit.

The next step up would be to be able to have different text on the drop down menu, compared to the actual text that goes in the URL. Not everyone knows that "mono" is "black and white", for example.

addFilter("as_filetype",["Any filetype","JPG","GIF","PNG","BMP"]);
addFilter("imgcolor",["Any color","Black","Blue","Brown","Gray","Green","Orange","Pink","Purple","Red","Teal","White","Yellow"]);
addFilter("imgc",["Any imagetype","Mono","Gray","Color"]);
addFilter("safe",["SafeSearch","Active","Off"]);

function addFilter(param,values)
{
	var re=new RegExp("(\\?|&)"+param+"=(\\w*)(&|$)","img");		//regexp to extract the parameter from the search string
	var pv=re.exec(location.search)?RegExp.$2.toLowerCase():"";		//extracting parameter value
	var url=location.pathname+location.search.replace(re,function(){return arguments[3]?arguments[1]:"";});	//search string without parameter
	
	//creating dropdown
	var s=document.createElement("select");
	s.name=param;
	s.setAttribute("onchange","_isr_load(this);");
	
	//adding options
	s.options[0]=new Option(values.shift(),url);
	url+="&"+param+"=";
	values.forEach(function(v){(s.options[s.options.length]=new Option(v,url+v.toLowerCase())).selected=v.toLowerCase()==pv;});
	
	//appending dropdown
	s.style.margin='0px 0px 0px 8px'; 
	document.forms[1].appendChild(s);
}

 
Chris4 Scriptwright

Released :)

http://userscripts.org/scripts/show/45825

 
smk Scriptwright

awesome feature of google :)
I hope next time it allows you to draw a picture then search it
:p

 
DMaster Scriptwright

is it possible to make this script auto "localised" to the country's languege ?
i would like to add a hebrew translation.. i want to help other users that might want to use this options.. but would appriciate it more if it will be in the languege that the site is in..

 
Chris4 Scriptwright

I'm not sure how to do that DMaster. :(

 
DMaster Scriptwright

sdfghjklkjhg & Aquilax

can u help us in this subject? like adding translateable strings for diffrent languges ?...
any help would be appriciated...

 
n.st Scriptwright

@Chris4:
To add translations to your script, just copy and paste the following code just behind //==/UserScript==]]></>;:
var translations = new Array();
translations["com"] = new Array();
translations["com"]["filetype"] = "File type";
translations["com"]["jpg"] = "JPG";
//first add an entry like translations["com"]["##some key-name##"] = "##some value##" for every translatable string in your script (replace ##some key-name## with some name you have not used as key-name yet and put the translated text, where ##some value## is
//after that, replace all strings in your script, that should be translated, with translation["##the key-name you have choosen for this string before##"]
//now everyone who wants to translate the script can copy the translations["com"]-block, replace com with the tld of his language (f.e. de for www.google.de or ch for www.google.ch) and translate the values.
var translation = translations[javascript:alert(location.href.match(/images\.google\.([a-z.]+)/)[1]);];