Checking if an image has changed

Help and Support
2

When monitoring a website for changes, by default Distill will only track changes to text content. If you need to monitor changes to images in a page, a better option is to use JavaScript selector. It gives you a very high degree of control over what needs to be monitored. Following example monitors changes to all images in the page:

JavaScript selector: $('img').each((x,i) => $(i).parent().append(i.src)).parent()

Config:

{
  "includeStyle": true,
  "ignoreEmptyText": true,
  "dataAttr": "text",
  "selections": [
    {
      "frames": [
        {
          "index": 0,
          "excludes": [],
          "includes": [
            {
              "type": "js",
              "expr": "$('img').each((x,i) => $(i).parent().append(i.src)).parent()"
            }
          ]
        }
      ],
      "dynamic": true,
      "delay": 2
    }
  ]
}

If you need to monitor both, text and images in the page, the config could be:

JavaScript selector: $('img').each((x,i) => $(i).parent().append(i.src)).parent()

Config:

{
  "includeStyle": true,
  "ignoreEmptyText": true,
  "dataAttr": "text",
  "selections": [
    {
      "frames": [
        {
          "index": 0,
          "excludes": [],
          "includes": [
            {
              "type": "css",
              "expr": "html"
            },
            {
              "type": "js",
              "expr": "$('img').each((x,i) => $(i).parent().append(i.src)).parent()"
            }
          ]
        }
      ],
      "dynamic": true,
      "delay": 2
    }
  ]
}

Note that in both examples, I have used a very generic selector that matches all images in the page and full HTML. This rarely what we need. These can be customized by changing img to a more specific image selector in that page. If you need help creating selectors for your page, please feel free to share the page URL and I can show who.

Cheers!

1 Like