Skip directly to content

Gary Le Masson

Award Category 
Drupal Version 
Brief Overview 

Gary did a great job making his site look just like a Google search-results page. Very clever and unique (aside from the real Google of course). I'd like to see people do more like this; not necessary like Google, but similar to other popular sites.

Launch or Publication Date 
Wednesday, February 13, 2013
Google look-a-like
Key Modules, Theme, and Distribution Used 
Drupal 7 core Zen Meta tags Google Analytics Views Link ckeditor Token Pathauto IMCE CAPTCHA reCAPTCHA Variable Chaos tool suite (ctools) Internationalization
Why these Modules, Theme, and Distribution were Chosen 

How I made my website look like Google

This is mainly CSS styling... But to achieve Pixel perfectness... you need little tools which are all FREE !

  • First, you start with a fresh Drupal Install,
  • Second, a ZEN theme and of course a Subtheme (I will not explain it here how to do it as I think this is correctly documented on Drupal...)
  • Third, You need Firefox and the Firebug extension... I am sure you know these things already
  • And at last... you need a Ruler... yes a Ruler for Windows... It's a simple ruler for your screen and I can assure you that it can help you with any design stuff you need... and of course... it's Free !

With Firebug for Firefox, you can easily see which CSS property were applied to each element of design. The process of CSS copying must start with the structure of blocks and content, and then on the little details, for example, the display and behavior of links in the Google Search interface... I can tell you that there is a lot of different links in Google, more than you can imagine.

Create an Image gallery with external links only

For the image search results,
You need to create a new content type "gallery" with only two fields :

  • An image
  • An URL fields, provided with the link module.

As it is supposed to work exactly as Google Image, I needed to create a View in which the images only were displayed with a link pointing directly to an external URL.

To achieve this, you need to install the Views and the Link module.
then you create a view with these specifications :
For the format section, it is an unformated list showing only fields
For the fields, you first choose the link field you just created, but you need to exclude it from display. The second field will be of course the image field but as we need to apply the link to it, you need these following options :

  • In "Rewrite results" select "Output this field as a link"
  • In the link path field, fill it with [field_link] (this is the replacement patterns provided by views just below.
  • Then in the target field simply type _blank (it will allow you link to open in a new tab in the web browser.

Of Course you need to only display the content type gallery you just created and make sure only published items are displayed.
You're done with this gallery pointing only to external URLs... and of course, there is no links to the individual gallery nodes... so no one will see the trick !

To create the images in that gallery, you select create content
and you choose your nice new content type gallery.

Then How to upload pictures from your WYSIWYG editor...

I am not a great fan of FTP or manual typing, and I am sure you feel the same about it... so we need to upload pictures directly from the browser... I personally use CKEditor for WYSIWYG editor and IMCE as image/file manager. (Yes CKEditors is the last thing I kept from Joomla, I am used to it... can't help it)

To configure them together you obviously need to install them first :
IMCE is a nice and easy installation
CKEditor needs you to install first the Drupal module and then download a zip file from theckeditor website here. download the trial version (don't worry, the editor is fully functionnal, only the file browser is in demo mode... and we will replace it with IMCE...)
Once downloaded unzip the file to \sites\all\modules\ckeditor\ckeditor where there is a COPY HERE text file.

Once this is done, you only have to link IMCE and CKEditor together.
Go in the configuration panel / CONTENT AUTHORING / CKEditor
Then in the Full HTML imput format, click on the "edit" link.
In the "FILE BROWSER SETTINGS" select all 3 drop down menus to be IMCE...

Great.. you can now get back to you content and upload pictures right from CKEditor, which is my favorite and also the only one editor I know. If you have advices for replacement... Feel free...

Owner's Name 
Gary Le Masson
Development Company 
Gary Le Masson
Why Drupal Was Chosen 
I first learned in 2007 how to make websites with Joomla 1.x and Joomla 1.5, and back in 2010 while blocked with Joomla and I discovered Drupal and specifically CCK and Views, which, as a non tech guy, just made my life so easier to create new content types... I left Joomla community (sorry guys), joined the blue Drop, and watch every video tutorial since then. For this project, I was thinking about making "The Google Resume" that would clearly stand out from the rest... Before that, other Google resumes were made out of static HTML and for some, Just assembled pictures on a website... (lol) None of them were offering more than 2 pages... and I needed a multilingual website. Well, make the Utimate Google Resume with the Ultimate Open Source CMS. Why Choosing Drupal ??? That's kinda logic !!!
Describe the Project (Goals, Requirements, and Outcome) 

The point of this project was to try to achieve a pixel perfect adaption of Google UX and adapt it with a classic ZEN Template.
I took the challenge in order to clearly improve my CSS skills, and I can tell you that I went totally crazy on the day when Google decided to move his left sidebar on the top of display.

Anyway... Except a bug that I found on mobile devices, I think I achieved an experience quite close to Google Search.

Do not hesitate to have a look and give me feedback about my Drupal website :)

Type of Nomination 
Additional developers 

Post new comment

By submitting this form, you accept the Mollom privacy policy.