PhotoWebber 2 is now extensible. It supports HTML Extensions and Product Buttons. From this page you can download new extensions, submit your own, and learn how to write extensions.

HTML Extensions
HTML Extensions are very powerful and can be used to extend PhotoWebber to incorporate different media or programming. PhotoWebber ships with HTML Extensions for Flash, QuickTime, Shockwave, and Java Applet support. HTML Extensions could potentially be used to easily incorporate cycling web advertisements, VRML, and much more.

Product Buttons
Product buttons are simpler and are used to simply insert a graphic with a preordained hyperlink. If you have a small banner or product flag that you would like PhotoWebber users to be able to easily insert into their pages, you might consider developing a product button of your own.

Downloads

Since PhotoWebber 2 has only recently been released there are no new extensions of any sort available. All extensions are simply .xml & .gif files and will work on both the Windows and Macintosh platforms.

Other Packages
Here we have extensions that make other packages work better with PhotoWebber. There may be Photoshop Actions, an extension for DreamWeaver or GoLive, etc. We encourage you submit anything that you think others would find useful.

Uploads

If you wish to submit an extension for inclusion on this page, please send it to us in a .zip or .sit archive via e-mail. Be sure to provide a description of what your extension(s) is for, your contact info, and a catchy name for your extension. Send the e-mail to pw-help@medialab.com.

How to Write a Product Button

Product buttons are easy, so we will start with them.

Have GIF, Will Travel
To write a product button you need to have at least one of the following three things: a GIF graphic, a destination url that you want your graphic to link to, and what text you want to pop up when the mouse is brought over your graphic.

Lets say you have the following: a graphic: , a desired destination: http://www.geocities.com/CapitolHill/Senate/2680/, and a desired rollover message: "kiss me".

XML Anyone?
The next step is to create a new file (a text file will do) and give it a name with the extension .xml at the end. (KissTheIrish.xml)

Copy and paste the following into that file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE STUFF SYSTEM "ProductButton.dtd">
<STUFF>
<PRODUCT_BUTTON name="" version="1" gif="" hyperlink="" alt_text="" info=""/>
</STUFF>

If that looks confusing don't worry. Everything can be ignored except for the series of name="" etc. on the PRODUCT_BUTTON line.

The name entry is the name you want to appear in PhotoWebber's Product Button menu. The gif entry is the name of your gif file. The hyperlink entry is the URL to link to. The alt_text entry is the text that will appear when the mouse rolls over your product button in the browser. The last entry is the info entry; this entry is optional and you can put whatever you want there. It could be your e-mail address, a greeting, a URL where users of your product button might go to get a new version or learn more about you.

NOTE: Do not add spaces around the equals sign (=).

So, our file, when complete would look like so:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE STUFF SYSTEM "ProductButton.dtd">
<STUFF>
<PRODUCT_BUTTON name="KissMe" version="1" gif="kissme.gif" hyperlink="http://www.geocities.com/CapitolHill/Senate/2680/" alt_text="kiss me" info="hope you like this."/>
</STUFF>

Lock and Load
Now you are done! Save your .xml file and put it and your GIF file into the Product Buttons directory where PhotoWebber is. Launch PhotoWebber. You should see your button listed under the product button menu. If you don't then you probably mistyped something - make sure you didn't put spaces around your equals sign (=) or delete the last slash (/) in the PRODUCT_BUTTON line. Also check to make sure your file has the extension .xml

There is more information about the product button parameters in the file ProductButton.dtd which is in PhotoWebbers Product Button directory. Whatever you do - do NOT modify ProductButton.dtd, or you may damage PhotoWebber's ability to load any product buttons.

How to write a basic HTML Extension

HTML Extensions are not much more difficult to write than product buttons, but they are much more abstract and support many more features. If you struggled to complete a product button, then we would recommend you not attempt to write an HTML Extension.

HTML Extensions are backwards.
When writing a product button you simply supply and specify the GIF and the URL and PhotoWebber will create all the correct HTML to incorporate that GIF and URL into the web page. HTML Extensions work the other way around. You provide the HTML and PhotoWebber supplies the height, width, source file, and any input gotten from the user. This may seem conceptually difficult at first, but if you know HTML pretty well you shouldn't have any trouble.

Start With the HTML
PhotoWebber provides a fairly sophisticated QuickTime HTML Extension, but for this lesson we will write a simpler version of that extension.

When writing HTML Extensions we need to first know what sort of HTML code we want inserted into the PhotoWebber file. Here is some simple code for playing digital video file called wombat.mpg using QuickTime:

<embed src="wombat.mpg" width="150" height="100" autoplay="true" pluginspage="https://www.apple.com/quicktime/"></embed>

Quick and Dirty (but useless)
If we wanted to convert the above code into an HTML Extension we could do so very easily. Simply create a new file with the .xml extension. Inside the file we would have the following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE STUFF SYSTEM "GenericMedia.dtd">
<STUFF>
<GENERIC_MEDIA name="QuickDirtyQuickTime" version="1" info="this extension is for educational purposes only">
<CODE>
<embed src="wombat.mpg" width="150" height="100" autoplay="true" pluginspage="https://www.apple.com/quicktime/"></embed>
</CODE>
</GENERIC_MEDIA>
</STUFF>

Much of the above can be ignored. The GENERIC_MEDIA tag is similar to the PRODUCT_BUTTON tag. It has a name entry which will be the name of the extension that will be shown to the PhotoWebber user. It also has an info entry which can be used however you want.

Following that is the <CODE> </CODE> tags. Your HTML code goes inside these tags.

The Problem - why it's useless
If you were to actually make the above extension you would be disappointed to discover that the user could insert it onto their page, but no matter how large they dragged the extension the movie would always play at the same size. Also, it doesn't let the user set their own movies as source material.

The Solution - populated attributes
Let's look at our original HTML code:
<embed src="wombat.mpg" width="150" height="100" autoplay="true" pluginspage="https://www.apple.com/quicktime/"></embed>
The code has attributes for the height and width, and it even has one that specifies which file to use (src="wombat.mpg") . Wouldn't it be nice if PhotoWebber would populate our HTML with the users settings? Well, that's exactly what PhotoWebber will do. You just have to tell it which attributes you want populated:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE STUFF SYSTEM "GenericMedia.dtd">
<STUFF>
<GENERIC_MEDIA name="SlightlyBetterQuickTime" version="1" info="usable, but educational">
<DESCRIPTION src_attribute="src" height_attribute="height" width_attribute="width"/>
<CODE>
<embed src="" width="" height="" autoplay="true" pluginspage="https://www.apple.com/quicktime/"></embed>
</CODE>
</GENERIC_MEDIA>
</STUFF>

Examine the above XML carefully. Notice the new tag DESCRIPTION. The DESCRIPTION tag has a series of entries that tell PhotoWebber what the name of the height, width, and source attributes are. We have set the value of these entries to be the names of the matching attributes in our code. Thus, in the DESCRIPTION, the height_attribute entry is set to "height", because that's the name of the height attribute in our code.

Also notice that in the <CODE> section our code no longer specifies wombat.mpg as the src, and the height and width are also unset. This is because the PhotoWebber user, whoever he or she is, will decide how large to make the movie, where it goes on screen, and what file to use.

The DESCRIPTION tag has three possible entries. You are not required to use them all. But for every entry that appears, PhotoWebber will find the named attribute in the code you provide and populate it with the values set up by the user.

NOTE: if you provide the name of an attribute as one of the value in the DESCRIPTION tag it is very important that your code actually has an attribute with that name somewhere in the code. The standard practice is to set these attributes to be empty (something="").

Finis
So there you have it. That is the rudiments of setting up an HTML Extension. We recommend that if you wish to pursue HTML Extensions seriously that you examine the extensions that come with PhotoWebber and carefully read the GenericMedia.dtd document that is found in your HTMLExtensions directory.

HTML Extensions have many more abilities than we can cover here. If you have specific questions feel free to email us at pw-help@medialab.com