Skip to content

Conversation

ickk
Copy link
Contributor

@ickk ickk commented Jul 9, 2023

Adds a side-by-side image-compare widget for usage in news posts.

Usage in a document should look as follows

<main>
  <div class="image-compare" style="aspect-ratio: 16 / 9" data-title-a="Apples" data-title-b="Oranges">
    <img class="image-a" alt="Apples" src="apples.png" />
    <img class="image-b" alt="Oranges" src="oranges.png" />
  </div>
</main>
<script type="module">
  import { enable_image_compare } from '/components.js';
  document.addEventListener("DOMContentLoaded", function() {
    enable_image_compare();
  });
</script>

The aspect-ratio should be set to match the aspect ratio of the images, but it will default to 16/9.


I tested this on Windows with Firefox, Chrome, & Edge. Additional testing for Safari & others would be appreciated.

@ickk ickk requested a review from IceSentry July 9, 2023 10:42
@ickk
Copy link
Contributor Author

ickk commented Jul 9, 2023

It wasn't exactly clear in which file I should include the js.. so I made a new components.js file. I think it probably makes sense to rationalise our js utilities into only 1 or 2 different places.

@ickk ickk force-pushed the image-compare branch from 463fc28 to 4a7caba Compare July 9, 2023 11:28
@ickk ickk mentioned this pull request Jul 9, 2023
@ickk ickk changed the title Add image-compare component Add image-compare widget Jul 9, 2023
@ickk ickk requested a review from mockersf July 9, 2023 13:24
@cart cart mentioned this pull request Jul 9, 2023
@cart cart added this pull request to the merge queue Jul 9, 2023
Merged via the queue into bevyengine:main with commit 63dc14c Jul 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants