I love everything Royals and want to add more information about the coronation of King Charles. I would love to have a search box on my page that would let visitors easily search Google images for coronation-related photos, either with their own pattern or my pre-loaded phrase. How can I do that?
Google has made it surprisingly easy to reverse engineer its various search boxes on its site and, as long as you’re okay not including the search hints pop-up, you can typically incorporate a search box on your own site with just a few likes of HTML code. Having specified fields set is also easy, including image size, age, even license rights. The only wrinkle is having keywords automatically included, but that’s doable too.
You do need to be ready to delve into a little bit of coding, but it’s all quite easy and you can even copy and paste from this tutorial if it’s otherwise too daunting. And the Coronation? What about that crown? And the carriage? And the endless pomp of the procession? Definitely a fun and somewhat surreal event that blended centuries of British history and modern technology. Heck, it’s probably the last coronation that won’t give you the option of attending via 3D virtual reality!
HOW GOOGLE IMAGE SEARCH WORKS
Jump over to Google Image Search – images.google.com – and do a basic search for, say, “coronation charles”. Here’s what is produced:
Since the Coronation was today – 6 May, 2023 – I imagine this particular search is popular on Google right now! For best results you want to refine the search. This is done by clicking on the “Tools” link (rightmost on the second line), which reveals a number of useful filters and constraints:
In this instance I still have the basic search term of “coronation charles” but I have added that I want Large images only. No thumbnails, just the big images!
REVERSE ENGINEERING THE URL ADDRESS
With this basic search specified, it’s time to grab what’s in the address bar of the browser. Enter it back into your browser, you’ll get the same search results. This search looks like:
https://www.google.com/search?q=coronation%20charles&tbm=isch&hl=en& tbs=isz:l&sa=X&ved=0CAMQpwVqFwoTCNDmvYfc4f4CFQAAAAAdAAAAABAD& biw=1397&bih=808
What’s important to know is that the basic URL is to the left of the “?” symbol and that everything after that is of the format name=value, separated by “&” symbols. In other words, we can unwrap the above to produce the following:
https://www.google.com/search q=coronation%20charles tbm=isch hl=en tbs=isz:l sa=X ved=0CAMQpwVqFwoTCNDmvYFc4f4CFAQAAAAAdAAAAABAD biw=1397 bih=808
Okay, it’s kinda daunting, but with a bit of experimentation we can identify that the “tbs” parameter indicates the tool filters and parameters specified. isz:l denotes size = large. Not too cryptic, relatively speaking.
Most of the rest of those name=value pairs can be jettisoned, other than “tbm” which denotes that it’s an image search, and “sa” which specifies parameters are included. In other words, this is really all we need:
https://www.google.com/search?q=coronation%20charles&tbm=isch&tbs=isz:l&sa=X
Now we can get to work with this information!
TURNING A URL INTO AN HTML FORM
An HTML form has a couple of basic parameters required: the action (destination) URL for the form and the method through which the information is sent. In this case it’s a “GET” method (since the parameters are included in the URL) and the target URL is google.com/search as already identified. In other words:
<form method="get" action="https://www.google.com/search"> various HTML stuff </form>
That’s the template. Now to turn all those name=value pairs into information that’ll be sent:
<input type="hidden" name="q" value="coronation%20charles" /> <input type="hidden" name="tbm" value="isch" /> <input type="hidden" name="tbs" value="isz:l" /> <input type="hidden" name="sa" value="X" />
This will work but there’s no prompt for user input! Oh, and we need a submit button too:
<input type="submit" value="Search" />
The input box is easy enough: Change the “q” input line from a hidden variable to a text input. Now check out what happens with this code embedded in this page:
Click on “Search” to try it!
Here’s the source code for that tiny form:
<form method="get" action="https://www.google.com/search"> <input type="text" name="q" value="charles coronation " /> <input type="hidden" name="tbm" value="isch" /> <input type="hidden" name="tbs" value="isz:l" /> <input type="hidden" name="sa" value="X" /> <input type="submit" value="Search" /> </form>
Click on the input field – it already says “charles coronation” – and you can add more content or just submit that search by clicking on “Search”. That’s it. Solved. Now, back to the coronation videos…
Pro Tip: I’ve been writing about HTML and CSS for years. I even wrote some books on the subject! I have a lot of tutorials on the subject, so please check out my CSS & HTML help areas while you’re here.