Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
53 lines (37 sloc) 2.58 KB

Wagtailvisualdiff

Wagtailvisualdiff is a simple Django app to extend the wagtail revisions module. Whenever a new PageRevision is published, a PageRevisionScreenshot Object is created, in which a screenshot of the Desktop and Mobile page is saved. When a previous PageRevisionScreenshot for the page is available, a Visual Diff will be created and saved with the object.

All screenshots, visual diffs and block by block diff of field changes between revisions can be accessed from /cms/admin/pages/XXXX/revisions/.

A celery task will send the newest visual diff and a quick summary of field changes to the configured slack channel after every new publish event.

Quick start

  1. Add "wagtailvisualdiff" to your INSTALLED_APPS setting like this:

    INSTALLED_APPS = [
        ...
        'wagtailvisualdiff',
        'wagtail.wagtailadmin'
    ]
    
    Needs to be inculded before wagtailadmin, so we can override the revisions template.
    
  2. Include the wagtailvisualdiff URLconf in your project urls.py like this:

    url(r'^wagtailvisualdiff/', include('wagtailvisualdiff.urls')),
    
  3. Run python manage.py migrate to create the PageRevisionScreenshot model.

  4. Add the necessary setting in your config/settings.py:

    # A AWS Bucket with CORS permission and unrestricted Headers
    SCREENSHOT_AWS_ACCESS_KEY_ID = 'XXXXXXXXX'
    SCREENSHOT_AWS_SECRET_ACCESS_KEY = 'XXXXXXXXX'
    SCREENSHOT_AWS_BUCKET_NAME = 'XXXXXXXXXX'
    SCREENSHOT_AWS_LOCATION = 'XXXXXXX' # Folder in which to save
    SCREENSHOT_BUCKET = True
    SCREENSHOT_STORAGE_URL = "https://%s.s3.amazonaws.com/%s" % (SCREENSHOT_AWS_BUCKET_NAME, SCREENSHOT_AWS_LOCATION)
    SCREENSHOT_SLACK_WEBHOOK = 'XXXXXXXXXXXXX' # Configure a new Slack Webhook and paste the URL here if you want to receive notifications in Slack
    SLACK_CHANNEL = '#XXXXXXXXXX'
    SCREENSHOT_BOT_SLACK_ICON = HOSTNAME + "/public/wagtailvisualdiff/images/tailwagger.png" # Option to customize Slack Picture
    SCREENSHOT_DIFF_MAX_HEIGHT = 600 # Set a Maximum Pixel Height for the Diff Screenshots sent to Slack (For very long Websites)
    SCREENSHOTLAYER_ACCESS_KEY = 'XXXXXXXXXXXXXXXXX' # Configure on https://screenshotlayer.com/
    SCREENSHOTLAYER_SECRET_KEYWORD = 'XXXXXXXXXXXXXXXXX' # If you want encription
    SCREENSHOTLAYER_URL = 'https://api.screenshotlayer.com/api/capture'
    
  5. Visit the Revisions list for any page: /cms/admin/pages/XXXX/revisions/ and you will get access to field by field diff information.

  1. Publish a new Page to receive a notification about it in slack (Visual Diff will only be available the second time you publish a page)
You can’t perform that action at this time.