While going through the sample tutorials on how to remix a website (I chose TechCrunch), I noticed the image transformation:
$$("img") {
attribute("src", "http://www.montessoricats.com/buddha-scottish-fold-its-magic.jpg")
}
only seemed to apply some of the images. See:
Upper Page - Incomplete Transformation
Some of the below the fold for the other articles were transformed into the cat image. The main content weren't.
Lower Page - Incomplete Transformation
My initial hunch was that the transformation seems to only be working on TechCrunch's above the fold content, but this was debunked by the latter screenshot.
How would I go about fixing this or is there something I'm doing wrong or is this a short-coming of how TechCrunch serves its content and how Moovweb is grabbing this content, such that it may not be available while the remixer does it's thing?
All insight appreciated!
So I think you might gain some insight into what is happening if you try disabling JavaScript and reloading the page.
You'll notice a decent number of the images don't load! Since these images are being added via JavaScript, they won't actually be there when you're changing the src attribute of all the <img> elements (because JavaScript is executed by the client).
If you want to change those elements as well, it may depend on how they are being served. If a proper AJAX request is made to get those images, that will also pass through Moovweb and you can catch them using the Content-Type and the URL Path and then modify them accordingly. If they are hardcoded in there to be injected, you may need to add your own JavaScript that runs after the image load script in order to alter them. You can easily insert a script at the bottom of the body with Tritium.