A simple script for downloading all images for a listing on BringATrailer.com

bat-download.js

(async function() {
  const delay = (ms) => new Promise(r => setTimeout(r, ms));

  // Given a url, try to download a high-res version of it
  // This prevents us from downloading a downscaled thumbnail
  function replaceUrlParam(url) {
    return url
      .split('?')[0] // get rid of querystring
      .replace('-scaled.', '.'); // Remove `-scaled` to attempt to get the full res image
  }

  // Open the full gallery. Wait a bit for the JS to execute.
  async function openFullGallery() {
    const showBtn = document.querySelector('.gallery > a > .show');
    if (!showBtn) return;
    showBtn.click();
    await delay(50);
    return openFullGallery();
  }

  // Open the full gallery. We try it a few times to be sure it takes
  await openFullGallery();

  // Get the full list of gallery image urls.
  const imageUrls = [...document.querySelectorAll('.gallery > a')]
          .map(a => replaceUrlParam(a.href));

  // Create an anchor link to virtually click.
  const a = document.createElement('a');
  a.download = '';
  // Now set each one to the downloadable image and download it.
  for(const url of imageUrls) {
      a.href = url;
      a.click();
      await delay(200);
  }      
  console.log('BaT image download complete!')
})().catch(console.error);

Thanks for creating this, it works perfectly.

Sorry do you have steps on how to run this? I'm trying in the Chrome Dev Tools Console but getting an error:

TypeError: Cannot read properties of null (reading 'click')
    at ensureCarouselVisible (<anonymous>:5:53)
    at run (<anonymous>:2:9)
    at <anonymous>:1:1

@handro123 I've updated it, try it now.

@STRML Thanks for the quick response. It seems to work better now but doesn't download all images.

Using Win 11 and Chrome I tried in an Incognito tab to make sure my extensions weren't causing any issues. I also make sure to expand the album in the listing when it says +NNN

On this listing it stops at picture 210 in the slideshow and the script give the popup that its Done, but it only downloaded 116 pictures:
https://bringatrailer.com/listing/2006-ford-gt-heritage-edition-24/

On this listing it stops at 28 in the slideshow but only downloaded 19 pictures.
https://bringatrailer.com/listing/1979-bmw-320i-23/

On Firefox it downloads them all but as .webp files.

Thanks again for the help and script!

Re: Firefox that's expected. webp is a perfectly legitimate file format and you can convert (or not). if you want to fix that, please propose a patch, but I'm not concerned about it.

I've updated the script with a version that's a little bit slower but it does so in order to be sure it gets them all. I counted 155 on the bmw listing.

Thanks again for your help and sorry I'm a bit of a JS nubie but figuring it out as I go.

One new issue I am having is .replace('-scaled', '');. Some pictures in the BMW listing have -scaled in the middle of the filename and those weren't getting downloaded as the URL would 404. Example:
https://bringatrailer.com/wp-content/uploads/2023/05/1979_bmw_320i_Doc-May-18-2023-2-50-PM-p3-36336-scaled-1-84154.jpg?fit=1587%2C2048
would get turned into:
https://bringatrailer.com/wp-content/uploads/2023/05/1979_bmw_320i_Doc-May-18-2023-2-50-PM-p3-36336-1-84154.jpg

Replacing it with .replace('-scaled.', '.'); would make sure it's only replaced at the end of the filename.

Another issue I had in Chrome and Edge was while the counter would hit 155, it wouldn't actually download the last image and it ended the slideshow there. Trying to manually download it with downloadImage() would trigger the "Error: All images downloaded or next image not found." message. Also counter stops at 155 and doesn't roll back over to 1.

On Firefox it downloads the last image successfully and the slideshow returns to the first image, with counter = 1

Not really important as I can manually download the last one, but thanks again for your quick help. Way easier than doing this manually.

Also still having issues in Chrome stopping around picture 138 for that specific listing but since the script works fine in Firefox / Edge this is probably something on my side.

Thank you all for this super-handy utility! Works like a charm.

For users who found this code snippet browsing the internet, the usage of this code as follows.

1. Open browser (I used Mozilla Firefox)
2. Click 3 lines in upper right
3. Select "More Tools" and then "Web Developer Tools".
4. You may have to enter the text "accept paste" in the console on the left side and click Run.
5. Paste the javascript code from above into the console.
6. Click Run

It will open a browser tab for each picture and download the picture to your download folder.

Voila!

Thanks again.

@CuHead Thank you for the step-by-step.
@STRML This is an awesome tool for using BAT images as reference images for documentation. Thank You for the work you put into it and also making it available to the public.

I also learned that with this Firefox plugin enabled:
https://addons.mozilla.org/en-US/firefox/addon/dont-accept-webp/
The images downloaded are in .jpg format instead of webp.

I tried this after already loading the webp plugin into irfanview, thinking i was just going to run a batch convert.

Had same issues with the script as @handro123 - did not download all pictures.
Tried in MSFT Edge - worked great, all pictures downloaded as .jpeg
Thanks!

Worked like a charm in Chrome. Thanks! Made archiving the photos from a purchase easy.

@aronparsons Glad it's helped you. I've bought a lot of cars on BaT so I use this every 6-9mo or so!

STRML, I am not a coder so am relying on your expertise on this. The script has worked well for me up until now. For some reason, when I run the script in Chrome, I see the image flash once then it stops. Bottom line on the script adds this"
Promise {}
[[Prototype]]: Promise
[[PromiseState]]: "pending"
[[PromisResult]]: undefined

Has something changed in Chrome (or my settings) that is causing it to not download?

Great Script, hoping I can get it to work again.

Paul

I also tried the script above on Firefox and Chrome with no luck. I wrote my own version which should be much simpler. It works best on Chrome. Simply paste in the dev tools & go

Be sure to click "Allow download multiple files" when prompted by Chrome

(async function() {
    function replaceUrlParam(url) {
        const parsedUrl = new URL(url);
        parsedUrl.searchParams.delete('resize');
        parsedUrl.searchParams.set('fit', '2048,1365')

        return parsedUrl.toString();
    }

    [1,2,3].forEach(_ => document.querySelector('.gallery > a > .show').click());

    await new Promise(r => setTimeout(r, 1000));

    const imageUrls = [...document.querySelectorAll('.gallery > a')]
            .map(a => replaceUrlParam(a.href));

    const a = document.createElement('a');
    a.download = '';
    for(const url of imageUrls) {
        a.href = url;
        a.click();

        await new Promise(r => setTimeout(r, 200));
    }
})();

Nice one @JLWalsh! Showing the whole gallery rather than paging through the carousel is a nice tweak.

I've updated the source to use this mechanism. I made a few small tweaks, namely I continue downloading the original source file by removing -scaled from the URL. Additionally, I simply check if the gallery is open instead of waiting 1000ms.

Thank you both for the updates!

It looks like the issue when -scaled is in the middle of the URL instead of just at the end is still present. This is the test listing that I used to check: https://bringatrailer.com/listing/1979-bmw-320i-23/

One new issue I am having is .replace('-scaled', '');. Some pictures in the BMW listing have -scaled in the middle of the filename and those weren't getting downloaded as the URL would 404. Example: https://bringatrailer.com/wp-content/uploads/2023/05/1979_bmw_320i_Doc-May-18-2023-2-50-PM-p3-36336-scaled-1-84154.jpg?fit=1587%2C2048 would get turned into: https://bringatrailer.com/wp-content/uploads/2023/05/1979_bmw_320i_Doc-May-18-2023-2-50-PM-p3-36336-1-84154.jpg

Replacing it with .replace('-scaled.', '.'); would make sure it's only replaced at the end of the filename.

Good catch @handro123, fixed.

Great collaboration - this helped me document a car I'm hoping to buy. Thanks, all.