I'm trying to extract image URLs from this website, with an example product page being: https://www.kosherwinecellar.co.uk/whisky-c27/scotch-whisky-c28/aberfeldy-18-year-old-1l-p2239
The images have an automatic zoom on them, and standard image selector doesn't do the job here.
My hunch is that I have to use some sort of Element or Element Click selector, but this is beyond my capabilities and I cannot work it out. Any help?
The zoom URLs are actually in the source code, so you can grab them with something like:
Type: HTML
Selector: div#productWrapper div[class='product__image cf'] div.slick-track a
Regex: (?<=data-cloudzoom\=").+(?='\, zoomSize)
You will get results like
zoomImage: '/images/aberfeldy-18-year-old-1l-p2239-3747_zoom.jpg
Which you need to turn to
https://www.kosherwinecellar.co.uk/images/aberfeldy-18-year-old-1l-p2239-3747_zoom.jpg
But that is a straightforward search 'n replace which you can do even with Notepad. Or you can use Web Scraper Cloud (paid) which has a Parser feature which does search 'n replace.
Thanks Lee.
How did you build that selector? Is it something found in the source code? I'm a marketer rather than a developer, so this is all a bit out of my depth!
I did actually fluke my way to a solution that pulled the full image URL for me in the end, but I wasn't sure if it was going to work. I viewed the source code of the page on mobile and found one instance of the image link with an a class="product__image__zoom-link", so I set up a link selector with selector set as a.product__image__zoom-link and that worked. For some reason, I can only find that a class in the source code of the site, and not when I click 'inspect element' and search the source code in the Chrome 'Elements' window.
It'd still be helpful to know how you built your selector if you have a spare moment though, so I can try to understand it all a bit better! I gained a bit of exposure using XPaths with a tool called Screaming Frog, is that anything similar to this? For instance, would any of the below options help me build a selector?
If I choose 'copy selector' here, I get the following:
#js-photo-swipe > div.pswp__scroll-wrap > div.pswp__container > div:nth-child(2) > div > img:nth-child(2)
Not the a.product__image__zoom-link which worked for me.
Thanks again.
