In my Google gadget tutorial I had included a quote gadget example. The quote example from that tutorial has since been improved on and I thought I would share it with you.
The quote gadget we will make today has random quotes, random photos, and a nice re sizable border that looks nice that you can add a logo to. Not only does this gadget look better, it also allows for page resizing and different screen resolutions. The earlier quote gadget example didn’t do so hot in those departments.
I will again use “The Princess Bride” quote gadget for this tutorial. Let’s look at the gadget…
Refresh this page and notice that the gadget not only gives a new quote, but also a new photo as well.
To make this gadget you need photos of your quote author and quotes.
The gadget is made using a random quote generator (the same one as in the earlier quote gadget) and a random image generator.
Here is the XML code for this gadget. Note it is a type=”url” gadget which means the gadget code calls a url to display the gadget. I have left the original ModulePrefs in there, take a look at them and make sure your gadget uses each of these as this is an ideal set of them (for more on ModulePrefs see my guide).
The URL this gadget calls displays a random quote and random photo. But if you look at the code of that page, you can not see how the quotes and photos are generated.
Here is how it is done.
The gadget uses two php scripts.
The first one is the random quote generator. This code was written by David Marotz. Thanks! I have included the Princess Bride quotes in this example code so you can see where the quotes go and where the author name goes.
Using this php script by itself will result in a webpage that displays a random quote every time the page is displayed.
But our new quote gadget does more than that. It also displays a random image. This is accomplished by using another php script…
The following php script was authored by Matt Mullenweg and the instructions for it’s use are on his website.
Okay we talked about the two php scripts, but how does it all tie together and how do we get that nice looking border around the whole thing?
To make this gadget requires a few things…
- XML Google gadget file – shown below
- A folder with images of the author / subject
- The folder with the images must have the random image script – shown below
- The main php file that has the quotes on it, and includes the CSS, the call for the random image, etc. – shown below
Instructions
All files for this gadget must be in one folder for it to work.
1. Create a folder and put your photos in it.
2. Create a file and call it “example-photo.php”.
Copy and paste the random photo generator script into it. Do not modify this file. Place this file in same folder as photos or it won’t work. Here is the code:
/*
By Matt Mullenweg > http://photomatt.net
Inspired by Dan Benjamin > http://hiveware.com/imagerotator.php
Latest version always at:
http://photomatt.net/scripts/randomimage
*/// Make this the relative path to the images, like "../img" or "random/images/".
// If the images are in the same directory, leave it blank.
$folder = '';
// Space seperated list of extensions, you probably won't have to change this.
$exts = 'jpg jpeg png gif';
$files = array(); $i = -1; // Initialize some variables
if ('' == $folder) $folder = './';
$handle = opendir($folder);
$exts = explode(' ', $exts);
while (false !== ($file = readdir($handle))) {
foreach($exts as $ext) { // for each extension check the extension
if (preg_match('/\.'.$ext.'$/i', $file, $test)) { // faster than ereg, case insensitive
$files[] = $file; // it's good
++$i;
}
}
}
closedir($handle); // We're not using it anymore
mt_srand((double)microtime()*1000000); // seed for PHP < 4.2
$rand = mt_rand(0, $i); // $i was incremented as we went along
header('Location: '.$folder.$files[$rand]); // Voila!
?>
3. Create a file named “example-quote.php”
Copy and paste the “overall quote php script” in it. Here is the code:
Princess Bride
//////////////////////////////////////////////////////
//
// This is a VERY simple PHP Random Quote generator.
// I provide the source code for anyone who wants it for free.
// I also provide NO support for this program as well...
// Use it at your own risk 
// If you use the script, please send me an email that says "Thanks"
// and what the URL is for your website.
//
//////////////////////////////////////////////////////
$bgcolor = '#FFFFFF';
$textcolor = 'black';
// Array Structure: "Quote","Author"
$allqts = array
("This is true love... you think this happens everyday?",
"Westley",
"You've been chasing me your entire life, only to fail now. I think that's the worst thing I've ever heard; how marvelous." ,
"Six Fingered",
"Since the invention of the kiss, there have only been five kisses that were rated the most passionate, the most pure. This one left them all behind.",
"narrator",
"Do you want me to send you back to where you were - unemployed in Greenland?!",
"Vizzini",
"My name is Inigo Montoya, you killed my father, prepare to die.",
"Inigo",
"Inigo- You seem a decent fellow, I'd hate to kill you. Westly- You seem a decent fellow, I'd hate to die.",
"Inigo and Westley",
"Westley- I told you I would always come for you. Why didn't you wait for me? Buttercup- Well, you were dead. Westley- But death cannot stop true love... All it can do is delay it for a while.",
"Buttercup / Westley",
"Is this a kissing book?",
"Grandson",
"Would you please consider me as an alternative to suicide?",
"Prince Humperdink",
"You fool! You fell victim to one of the classic blunders! The most famous is never to get involved in a land war in Asia. And only slightly less well known is this... never go in against a Sicilian when death is on the line!",
"Vizzini",
"I would sooner destroy a stained glass window as an artist like yourself. However, since I can't have you following me either.",
"Westly to Inigo",
"Buttercup... That's the fire swamp! We'll never survive Wesley... Nonsense! You're only saying that because no one ever has.",
"Buttercup / Westly",
"WHo are you? Why am I against this wall? Why won't my arms move? Where's Buttercup?",
"Westly",
"Buttercup... You mock my pain! Westley... Life is pain, Highness! Anyone who says differently is selling something.",
"Buttercup / Westley",
"You can't hurt me. Westley and I are joined by the bonds of love. And you cannot track that, not with a thousand bloodhounds, and you cannot break it, not with a thousand swords.",
"Buttercup",
"-As Buttercup prepares to commit suicide with a dagger- There's a shortage of perfect breasts in this world. It would be a pity to damage yours.",
"Westley",
"Vizzini... Inconceivable.
Inigo Montoya... You keep using that word. I do not think it means, what you think it means.",
"Vizzini / Inigo",
"Am I going mad, or did the word 'think' escape your lips? You were not hired for your brains, you hippopotamic land mass.",
"Vizzini",
"As you wish.",
"Westley",
"Vizzini... No more rhymes, now, I mean it!
Fezzik... Anybody want a peanut?",
"Vizzini / Fezzik",
"You've been chasing me your entire life, only to fail now. I think that's the worst thing I've ever heard... how marvelous.",
"Count Rugen",
"Farm boy, fetch me that pitcher",
"Buttercup",
"Since the invention of the kiss, there have been five kisses that were rated the most passionate, the most pure. This one left them all behind. The end.",
"narrator"
);
// Gets the Total number of Items in the array
// Divides by 2 because there is a Quote followed by an Author
$totalqts = (count($allqts)/2);
// Subtracted 1 from the total because '0' is not accounted for otherwise
$nmbr = (rand(0,($totalqts-1)));
$nmbr = $nmbr*2;
$quote = $allqts[$nmbr];
$nmbr = $nmbr+1;
$author = $allqts[$nmbr];
$space = ".....................................";
echo "
echo "";
echo "$quote
";
echo "";
echo "$comments";
echo "
?>
More quote gadgets
The above code should be modified to have your quotes and your authors (if not this gadget will display the Princess bride quotes already in there.
4. Create a file called “example-quote. xml”
Copy and paste the XML file into it. This is the Google gadget code. Here is the code:
author_photo="http://hosting.gmodules.com/ig/gadgets/file/104462838893004134091/profile.jpg"
author_aboutme="My name is Patrick Sexton, a consultant for gadget strategies and brand promotion. I discuss Google gadgets at SEOish.com"
author_affiliation="SEOish"
author_quote="Flying is learning how to throw yourself at the ground and miss. - Douglas Adams"
screenshot="http://www.gadzi.com/gadgets/images/princess-bride-quotes.jpg"
thumbnail="http://www.gadzi.com/gadgets/images/princess-bride-quotes-tn.jpg"
width="320" height="320" scrolling="false" />
The above xml file must be modified to the URL where your file resides.
HI,
Really it’s going to help so many people and i am the one of them.
Nice work.
Thanks for sharing .
Excellent blog, this site has really been an eye opener. I need some time to think about this
Hey this website is kind of confusing not in a bad way just too much info you need to make it more simple GOOD JOB OVER ALL I LIKED THE SITE!!!!
Not certain how I got here but I feel like I was meant to read this. Thanks.
Thanks, instead of creating the php file, i placed the random code in javascript file only as i had 10-20 quotes.