Skip to content

Instantly share code, notes, and snippets.

@STRML
Last active July 10, 2024 15:47
Show Gist options
  • Save STRML/bc6f400033207f503dce16ffedf06ea9 to your computer and use it in GitHub Desktop.
Save STRML/bc6f400033207f503dce16ffedf06ea9 to your computer and use it in GitHub Desktop.
A simple script for downloading all images for a listing on BringATrailer.com
(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);
@maplecoffee
Copy link

Thanks for creating this, it works perfectly.

@handro123
Copy link

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

@STRML
Copy link
Author

STRML commented Jun 25, 2023

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

@handro123
Copy link

@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!

@STRML
Copy link
Author

STRML commented Jun 26, 2023

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.

@handro123
Copy link

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.

@CuHead
Copy link

CuHead commented Jan 2, 2024

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.

@Z-Karma
Copy link

Z-Karma commented Jan 24, 2024

@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.

@ymatushe
Copy link

ymatushe commented Mar 5, 2024

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!

@aronparsons
Copy link

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

@STRML
Copy link
Author

STRML commented May 22, 2024

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

@PaulProe
Copy link

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

@JLWalsh
Copy link

JLWalsh commented Jun 19, 2024

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

@STRML
Copy link
Author

STRML commented Jun 19, 2024

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.

@handro123
Copy link

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.

@STRML
Copy link
Author

STRML commented Jun 20, 2024

Good catch @handro123, fixed.

@bayousteve
Copy link

bayousteve commented Jul 10, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment