Problem/Motivation

Presently, it's not obvious what might have changed with an image, which was removed, which was added, etc...

Proposed resolution

Provide a client-side solution to detect various image situations and provide a more intuitive review interface.

An image was added

Image diff showing an added image overlaid with a green filter.

An image was modified

Image diff view showing an overview of the change and an expanded view which shows the removed image, added image, and associated alt texts.

An image was removed

Image diff showing an removed image overlaid with a red filter.

Remaining tasks

TBD

User interface changes

An intuitive image diffing experience!

API changes

TBD

Data model changes

TBD

CommentFileSizeAuthor
intuitive-image-removed.png6.97 KBluke.leber
intuitive-image-added.png7.42 KBluke.leber
intuitive-image-diff.png53 KBluke.leber

Issue fork diff_plus-3336511

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

Luke.Leber created an issue. See original summary.

luke.leber’s picture

luke.leber
Primary language English
Location Pennsylvania
commented
Title: Make image diffs less confusing » Make visual inline image diffs less confusing
jacobupal’s picture

jacobupal commented

I've been playing round with the CSS for the same reason and it seems there's no way of adding a color overlay to an image without writing js or changing the markup... the issue is that img tags are self-closing so you can't use pseudo elements.

What did work was adding outlines though which I think helps at least show which version version of the image was deleted and which was added.

You should be able to add this CSS to your theme for the same result:

del.diffimg img{
  outline: 2px dashed red;
  outline-offset: -3px;
}

ins.diffimg img{
  outline: 2px solid limegreen;
  outline-offset: -3px;
}