This Google Image Search component / module pair allows you to add Google Image Search to your Joomla site.

Just like the googleSearch component, the search results are displayed right inside your Joomla page!

No more popup page. No more diversion to other pages.

Available for both Joomla 1.0.x and native 1.5.x!

Live Demo

You can see the Google Image Search component/module live in action in this demo page.

Unique Features

Since Google did not release any API for searching its Google images, I have used the method similar to mod_wrapper to include the Google Image Search through iFrame. However, unlike some other iFrame implementations, this component/module pair has some unique features:

• The accompanying module allows you to add a search form as a module. This means that you can place the search form in any module position you like.
• You can define your own watermark text in the search field.
• You can add two Google Ads - one above and one below the search results!

Note: To upgrade to the newer version, simply uninstall the old version and install the new version of the plugin.

First take a look at the demo page so that you have an idea of what the component/module looks like. The search result appears in the main body of the Joomla page. Also note the two Google ads just above and below the search result.

Set up is as easy as 1-2-3:

1. First install the component.
2. Then install the module and select your desired module position for the module. Make sure you publish/enable the module.
3. Go to Component, select "Google Image Search - Configure", and enter your desired width and height of the search result.
4. Create a menu item for the component. Although this is not necessary, but I would strongly encourage you to do so -
   so that there is an ItemID associated with the component.

That's all you need to get started! You'll now have Google Image Search right inside your Joomla page!

For advanced settings, please refer to Customizing the Component/Module.

• Log on as Administrator, from the Component Menu, select "Google Image Search" for Joomla 1.5, and "Google Image Search - configure" in Joomla 1.0.
• The config options are very similar to that of googleSearch component. Please refer to the page for details.
• Only the first two are required. The rest are optional settings that allow you to finetune the component to suit your needs.
• For the Google ads, please set up the ads in your Google Adsense account, and then copy and paste the entire codes given by Google in the two boxes in the config page. Make sure you copy the entire code - everything from <script type="text/javascript"> to </script>. An example is given below:

<script type="text/javascript"><!--
google_ad_client = "pub-1234567812345678";
/* sample ad 468x60, created 8/6/08 */
google_ad_slot = "1234567812";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

You can set the style of every item within the Google Image Search component/module to the exact format you want through CSS. For example, you can set the font family, font size, foreground and background color of the search field, radio label, search button, etc.

I've designed such that the css style for the component is independent of that of the module. So you can have different styles for the component and the module.

For example, if you're using the default Joomla 1.5 template, define the following style in <joomla root folder>/templates/rhuk_milkyway/css/template.css. If you're using the default Joomla 1.0 template, define the following style in <joomla root folder>/templates/rhuk_solarflare_ii/css/template_css.css.

1. Search Box

Component	Module
div.googleimagesearch input.inputbox { font-family: Verdana; font-size: 12pt; font-style: italic; }	div.mod_googleimagesearch input.inputbox { font-family: Verdana; font-size: 12pt; font-style: italic; }

2. Search Button

Component	Module
div.googleimagesearch input.button { font-family: "Arial Bold"; font-size: 12pt; margin-left: 4px; }	div.mod_googleimagesearch input.button { font-family: "Arial Bold"; font-size: 12pt; margin-top: 6px; }

3. Search Button Image (if you're using your self-defined image as search button)

Component	Module
div.googleimagesearch input.button_img { margin-left: 4px; }	div.mod_googleimagesearch input.button_img { margin-left: 4px; }

4. Logo

Component	Module
div.googleimagesearch .googleimagesearch_logo { margin-right: 6px; }	div.mod_googleimagesearch .googleimagesearch_logo { margin-right: 6px; }

5. Radio Label (the radio buttons to select between search for web or domain)

Component	Module
div.googleimagesearch .radiolabel { font-family: Verdana; font-style: italic; }	div.mod_googleimagesearch .radiolabel { font-family: Verdana; font-style: italic; }

6. Radio Buttons (note: this only works on some of the browsers such as IE.)

Component	Module
div.googleimagesearch input.radio { background-color: #0000ff; }	div.mod_googleimagesearch input.radio { background-color: #0000ff; }

7. Radio Group (use this if you want to set the background or draw a border around the entire radio buttons group)

Component	Module
div.googleimagesearch .radiogrp { border: 1px solid #ddd; }	div.mod_googleimagesearch .radiogrp { border: 1px solid #ddd; }

8. The entire search form (use this if you want to set the background or draw a border around the entire search form)

Component	Module
div.googleimagesearch { background: #33FF66; }	div.mod_googleimagesearch { background: #33FF66; }

9. The table within the search form (use this if you want to right align the search form)

Component	Module
div.googleimagesearch table { margin-left: auto; margin-right: 6px; }	div.mod_googleimagesearch table { margin-left: auto; margin-right: 6px; }

10. Search Box (method #2)

Component	Module
div.googleimagesearch input{ font-family: Verdana; font-size: 12pt; font-style: italic; }	div.mod_googleimagesearch input { font-family: Verdana; font-size: 12pt; font-style: italic; }

1. v1.0.1 (for Joomla 1.0) and v1.5.1 (for Joomla 1.5)
   Released August 7, 2008
   

Unused variables. The previous version contains some unused variables. You will see some warning messages if you have set PHP to full error reporting ("error_reporting = E_ALL" in php.ini). Have fixed these unused variables in this version.

There are no user reviews yet.

Note: You have to be a registered member to leave a comment. Free registration here.