Scrape all images from thumbnail images

Hi, i'm fairly inexperienced with this and confuses me greatly! :slight_smile: I am moving all our products from ecwid to another ecommerce solution but i am struggling to grab all the gallery images for each product. Most have 6 or so thumbnails when clicked on change the main picture to be the thumb, so i thought using element select would work and then download the subsequent image, alas i was wrong and can't figure the solution

For an example product page showing the images:
Url: https://www.ecwid.com/store/moroccancushions/Verona-Blue-and-Honeycomb-Red-Moroccan-Box-Floor-Cushions-p57892035

Sitemap:
{"_id":"morrocancushion","startUrl":["https://www.ecwid.com/store/moroccancushions/"],"selectors":[{"id":"category","type":"SelectorLink","parentSelectors":["_root"],"selector":"div.menu a","multiple":true,"delay":0},{"id":"subcategory","type":"SelectorLink","parentSelectors":["category"],"selector":"a.grid-product__title","multiple":true,"delay":0},{"id":"thumblink","type":"SelectorElementClick","parentSelectors":["subcategory"],"selector":"a.details-gallery__thumb-img","multiple":true,"delay":0,"clickElementSelector":"div.details-gallery__thumb.details-gallery__thumb--active a.details-gallery__thumb-img","clickType":"clickOnce","discardInitialElements":false,"clickElementUniquenessType":"uniqueText"},{"id":"imageurl","type":"SelectorElement","parentSelectors":["thumblink"],"selector":"img.details-gallery__picture.details-gallery__photoswipe-index-0","multiple":false,"delay":0}]}

Hi there!

You can grab all images by using an Element Attribute selector. The most important thing is to have a proper selection to have necessary results.

You can use Browser Built-in Inspect tool to analyze the html structure:

I've highlighted the needed wrapper (container), that has image inside. All thumbs that you click on, result in bringing corresponding image onto your screen.

So, a proper selector to pick it all up would be:
div.details-gallery__image-wrapper > div > img

And an attribute to extract is src.

Here's a sample you can analyze and then integrate with your sitemap:

{"_id":"ecwid-img","startUrl":["https://www.ecwid.com/store/moroccancushions/Verona-Blue-and-Honeycomb-Red-Moroccan-Box-Floor-Cushions-p57892035"],"selectors":[{"id":"images","type":"SelectorElementAttribute","parentSelectors":["_root"],"selector":"div.details-gallery__image-wrapper > div > img","multiple":true,"extractAttribute":"src","delay":0}]}
2 Likes

HI there I need help with this too.

The url Im trying to scrape frompage is https://www.wexphotovideo.com/canon-eos-5d-mark-iv-digital-slr-camera-body-1605233/

Hi there,

I'm a newbie at scraping. Just started today. So far so good, except for images in the image gallery. I'm trying to scrape this PDP for example: https://www.cletile.com/product/zellige/essaouira%20lustre%20blend?sku=Z21289

Here's a screenshot of my input:

Yet, it's showing "null" in data preview. Element preview is highlighting the correct area, however.

TIA!

@mbnewbie Hello, you should be able to extract the images with the following 'Grouped' selector - div.VueCarousel-wrapper img with the 'Attribute name' - src.

I could cry happy tears right now! Thank you for saving me hundreds of hours of work!!! Sharing a screenshot for any other newbies who learn visually for how it's inputted.

Hello,
I have a similar task on a magento image gallery.
URL: Kachen Silk Twill Tie - Yellow
I would like to scrape the SRC URLs, however I am seeing the results attached.
i.e. I see the src URLs, however the string format is not correct and not one image URL per line.
Thank you

jt1

@batman Hi, yes, it is the default formatting of 'Grouped' selector.

In order to fix that you can apply additional data post-processing in Web Scraper Cloud by using the 'Regex match' parser.

Learn more: Web Scraper Cloud | Web Scraper Documentation