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);

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.