My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
UserGuide  
ThumbsDown User Guide.
Updated Jan 18, 2012

This User Guide is slightly out of date at some points. Nothing major but still something you should be aware of. Updated when I have the time.

Introduction

ThumbsDown is a bulk/mass image downloader for Firefox. Or to be precise, ThumbsDown doesn't actually download any images. It just helps you to select the images you want to download from a web page, and then resolves the actual image URLs from the thumbnails before passing on the URLs to an external download manager.

Before ThumbsDown is any use to you, it requires some configuration. More specifically, writing some scripts, which is what this User Guide is mostly about. After you have done that, the normal usage goes like this:

  1. Go to a web page with thumbnails.
  2. Activate ThumbsDown.
  3. Select the images you want to download by clicking their thumbnails on the web page.
  4. Start the download.

Prerequisites

  1. Firefox 4 or newer
  2. ThumbsDown
  3. DownThemAll! 2.0 or newer

Configuration

ThumbsDown is configured through its Options dialog. The dialog is accessed like any other extension's Options dialog from Tools menu:

Windows: Tools > Add-ons > Extensions > ThumbsDown > Options

The options dialog has three panels: Main, User Interface and Scripts. The options there should be quite self-explanatory. Writing the actual scripts is discussed later in more detail.

You should also check DownThemAll! settings that they are to your liking. What they are, don't affect ThumbsDown.

Scripts

ThumbsDown scripts are used to identify thumbnails on a web page and resolve the actual image URL from them. You can create and edit them by hand in Options dialog's Script pane, or you can generate them semi-automatically using Script Wizard. Using the latter method is strongly recommended whenever possible. Whatever method you use, a little familiarity with things like HTML, DOM, regular expressions and JavaScript helps. If you don't know them, don't worry. This is not that complex.

But before going to details, a few terms and concepts that are used in this User Guide:

Full-size image
The original, full-size image.

Thumbnail
A reduced-size version of a full-size image. ThumbsDown also requires thumbnail image to be a link. That is, <img> tag must be enclosed inside <a> tag (<a href="..."><img src="..." /></a>) for it to be considered a thumbnail. Starting from ThumbsDown 0.18, there can be a single tag between <a> and <img> ( issue 4 ). <a> and <img> tags' URLs are referred as link and thumbnail URLs respectively.

In practice this means for example that ThumbsDown won't work with sites that use <div>s to show thumbnails.

Thumbnail URL
URL of the thumbnail image (<a href="..."><img src="..." /></a>).

Link URL
URL of thumbnail link (<a href="..."><img src="..." /></a>).

Source URL
Common name for thumbnail/link URL.

Image URL
URL of the full-size image.

There are four types of scripts: Direct, RegExp, Wrapped and Custom. They are used depending how the full-size image is hosted. All scripts have a name, matcher and action that resolves the final image URL. Script name is simply some descriptive name. Script matcher is regular expression that it is used to match link URL so that ThumbsDown can identify which script to use. Script action is specific to the script type which are explained below in more detail.

Direct

Script type Direct is used when the full-size image is available directly. That is, the thumbnail links directly to full-size image. Therefore, Direct script has no action, as the final image URL is the link URL. The only thing needed, is to write a matcher (regular expression) that matches thumbnails' link URLs.

For example, if you wanted to download the full-size images of the thumbnails below:

  1. Open ThumbsDown Options dialog.
  2. From Scripts panel, add a new script.
  3. Give the script a descriptive name.
  4. Write a matcher that matches the link URLs. See this example.
  5. Set the type to Direct.
  6. Close the script dialog by pressing OK.
  7. Activate ThumbsDown, select the thumbnails and start the download. See Usage for details.

If everything went according to plan, DownThemAll! Manager window should open and start downloading the images.

RegExp

Script type RegExp is used when the thumbnail doesn't link directly to the full-size image. For example, the thumbnail leads to another web page that wraps full-size image.

Like Direct script, RegExp has a name, and a matcher to match link URL. But in addition, it has an action that converts a thumbnail or link URL (source URL) into a image URL. The action has two parts: pattern and template. Pattern (regular expression) is used to match the source URL and capture interesting bits from it (like path or file name). Then those bits are substituted into a template to create the image URL.

For example, if you wanted to download the full-size images of the thumbnails below:

  1. Open ThumbsDown Options dialog.
  2. From Scripts panel, add a new script.
  3. Give the script a descriptive name.
  4. Write a matcher that matches the link URLs.
  5. Set the type to RegExp.
  6. Set pattern source to Thumbnail.
  7. Write a pattern that matches and captures the source URL.
  8. Write a template for image URL.
  9. Close the script dialog by pressing OK.
  10. Activate ThumbsDown, select the thumbnails and start the download. See Usage for details.

When you get that working, try setting the pattern source to Link and writing pattern for it. In practice, it doesn't matter which pattern source you use. Sometimes the other is just easier to use than the other.

Wrapped

Sometimes resolving a image URL from a thumbnail or link URL is not possible. The image URL may have some part that varies but it doesn't exist in the source URL. Wrapped script is for these instances when link URL leads to the web page that wraps the full-size image but RegExp script isn't enough to get it to work.

Wrapped script has a name and a matcher, just like Direct and RegExp scripts, but in addition it uses another regular expression to match the <img> tag by one of its attributes. Unlike Direct and RegExp, Wrapped script actually loads the web page that wraps the full-size image so that it can look through the <img> tag's attributes.

For example, if you wanted to download the full-size images of the thumbnails below:

  1. Open ThumbsDown Options dialog.
  2. From Scripts panel, add a new script.
  3. Give the script a descriptive name.
  4. Write a matcher that matches the link URLs.
  5. Set type to Wrapped.
  6. Go the web page that wraps the full-size image (click either of the thumbnails above).
  7. Select the full-size image like you would select text for copying.
  8. Open context menu over the now selected image and choose View Selection Source.
  9. From selection source window, lookup <img> tag's attribute you want to use. In this case alt attribute is the best choice.
  10. Write "alt" to script dialog's attribute field (without quotes).
  11. Copy alt attribute's value ("Firefox") from source window to script dialog's value field.
  12. Close the script dialog by pressing OK.
  13. Activate ThumbsDown, select the thumbnails and start the download. See Usage for details.

Now, instead of DownThemAll! popping up, you should see ThumbsDown Script Runner. It runs a script that downloads the web page that wraps the image and locates the full-size image. If the script completes successfully, it hands the image URL to DownThemAll! to download.

The above example used alt attribute, but any <img> tag's attribute works as well. Usually id attribute is the best choice if available. And remember that script's value field is actually a regular expression. So for example, you can write a regular expression to match <img> tag's src attribute.

Custom

Sometimes none the above scripts work. The URLs varies in a way that cannot be handled with other scripts, or the link URL doesn't lead directly to the page that wraps the full-size image. Script type Custom is for these instances.

Custom script has a name and a matcher, just like the other scripts, but the action part is basically a small JavaScript script that you write. Like the name Custom implies, the action (script) can do anything, as long as it returns the image URL in the end.

Usually this means loading a web page that wraps the image and figuring out which image is the actual full-size image that you want. ThumbsDown includes a couple code templates that can help you to get started.

For example, if you wanted to download the full-size images of the thumbnails below:

  1. Open ThumbsDown Options dialog.
  2. From Scripts panel, add a new script.
  3. Give the script a descriptive name.
  4. Write a matcher that matches the link URLs.
  5. Set the type to Custom.
  6. Open context menu from code area and select Use Code Template > Image Attribute.

Now you should be seeing a few lines of code. You don't have to understand what it does (Well, in phase 0 it loads the web page that wraps the full-size image, and in phase 1 loops through web pages images and tests if their src attribute matches the provided regular expression (attrValuePattern)). But here we are not going to use src, but alt attribute instead.

  1. Change the line 5 to use alt attribute: var attrName = "alt";
  2. Go the web page that wraps the full-size image (click either of the thumbnails above).
  3. Select the full-size image like you would select text for copying.
  4. Open context menu over the now selected image and choose View Selection Source.
  5. Copy alt attribute's value ("Firefox") from source window to script dialog so that line 6 looks like this: var attrValuePattern = "^Firefox$";
  6. Close the script dialog by pressing OK.
  7. Activate ThumbsDown, select the thumbnails and start the download. See Usage for details.

Like in Wrapped script, ThumbsDown Script Runner executes your script and hands the image URL to DownThemAll! to download.

The above example used alt attribute, but code template's original src attribute would have worked as well. Though the easiest solution is to use Image ID code template if <img> tag has id attribute available.

Now, you might ask why not just use Wrapped script from previous chapter. Well yes, it would have work just as well. Wrapped is actually kind of built-in custom script that was added in ThumbsDown 0.12 to handle just the above case because majority of Custom scripts fit the pattern where simple <img> tag attribute matching is enough.

ThumbsDown scripts are currently executed in stages (switch (state)). It's not very pretty but it works for now.

Variables

Variables available to Custom scripts.

Variable Description
state Integer value. Holds the state of the script between document loads (see LOAD()). Initially its value is 0.
linkUrl Link URL. 
thumbnailUrl Thumbnail URL.
 document Document object that was loaded by LOAD().

Functions

Functions available to Custom scripts.

Function Description
LOAD(url) Exits the script. Document from url is loaded and stored in document and the script is rerun with state incremented by one.
LOG(message) Prints the message to Firefox's Error Console (Tools > Error Console).
REDIRECT(linkUrl) Hands over image URL resolving task to another script. Note because thumbnail URL is not availabe, only link URL is, RegExp scripts that use thumbnail URL as their source URL, cannot be the target of redirect, simply because they don't match.
RETURN(url) Exits the script. url is the actual image URL that is passed on to download manager.
$(elementId) Shorthand for document.getElementById().

Script Wizard

Instead of writing scripts completely by hand, you can use Script Wizard to help you to create them. Script Wizard can generate the regular expressions required by the scripts in simple cases.

Script Wizard should be easy enough to use without a guided tour. For practice, you should create a script for each example in Scripts chapter using Script Wizard.

Below are some things you need to keep in mind when using Script Wizard:

  • See Usage how to access ThumbsDown and open Script Wizard.
  • Keep it simple: One image host, one script. Or multiple scripts, if different script types are required for different image locations.
  • When creating a script, select only a couple thumbnails to work with. You don't need to select all the thumbnails available on a page even if you are planning to download them all.
  • When creating a new script, just accept the offered regular expressions if they match. Don't try to guess the parts of the URLs that vary. Do it the next time, when you are modifying an already existing script. Then it will be simpler to see which parts of the URLs vary and how.
  • When modifying an existing script, you need modify the old regular expressions by yourself to match the new thumbnails/images. Script Wizard is not smart enough to do it automatically. Refer to syntax help if you are not familiar with regular expressions.
  • Script Wizard supports Direct, RegExp and Wrapped scripts, but not Custom.
  • When you use a new script for the first time, check that it actually downloads the image file you wanted.

Usage

Depending on your settings in ThumbsDown's options, the various ways to do things below may or may not be available. Also, shortcut keys are platform specific. The ones below are what ThumbsDown uses in Windows by default. On Linux and Mac the keys differ.

Accessing ThumbsDown

  • Open ThumbsDown context menu from ThumbsDown icon in the status bar.
  • Open browser's context menu > ThumbsDown.
  • Tools > ThumbsDown.

Activate/Deactivate ThumbsDown

ThumbsDown needs be activated separetely for each tab before you can use it.

  • Click on ThumbsDown icon.
  • Activate/Deactivate from ThumbsDown context menu.
  • Activate/Deactivate shorcut key (Alt+1).

Selecting images

ThumbsDown needs to be activated before you can select images. Though Select All activates ThumbsDown automatically.

  • Click on a thumbnail.
  • Double click on ThumbsDown icon. Selects all.
  • Select All from ThumbsDown context menu.
  • Select All shortcut key (Alt+2).
  • Select region that has thumbnails in it like you would select text.

Downloading

After you have selected some images you can start the download. This will automatically deactivate ThumbsDown.

  • Middle click on ThumbsDown icon.
  • Download from ThumbsDown context menu.
  • Download shorcut key (Alt+3).

Support

Powered by Google Project Hosting