Skip to content

Commit

Permalink
Fixed image paths.
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelsharman
michaelsharman committed May 30, 2024
1 parent 8ee47c4 commit 708f280
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 28 deletions.
30 changes: 16 additions & 14 deletions docs/module-Extensions_Authoring_imageUploader.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,18 @@ <h1 class="page-title">Extensions/Authoring/imageUploader</h1>
<p>Extensions add specific functionality to Learnosity APIs.
They rely on modules within LT being available.</p>
<p>--</p>
<p>Adds a custom image uploader (DAM) that supports image editing and compression
before uploading to the Learnosity CDN.</p>
<p>This extension replaces the default Learnosity image uploader with a custom image
uploader that supports image editing and compression before uploading to the
Learnosity CDN.</p>
<p>Consider this extension if you're looking to reduce the file size of images or
if you want to give users the flexibility to crop or rotate them before uploading.</p>
<p>Supported mime types: <code>image/gif</code>, <code>image/jpeg</code>, <code>image/png</code>, <code>image/svg+xml</code></p>
<p>.webp files are not supported by Learnosity, so we don't support them here.</p>
<p>Animated gifs become static.</p>
<p>By default, we resize images to a maximum width or height of 1500px. The calling
page can override <code>width</code>, <code>height</code>, and <code>quality</code>. See below in <code>run()</code>.</p>
<p>Image comparisons (before and after)</p>
<h2>Image comparisons (before and after)</h2>
<p>Click image to view full size.</p>
<table style="table-layout: auto; max-width: 1000px;">
<thead>
<tr>
Expand All @@ -88,61 +90,61 @@ <h1 class="page-title">Extensions/Authoring/imageUploader</h1>
</thead>
<tr>
<td>
<a href="../src/assets/images/imageUploader/original/20-preiodic-table-elements-icon-pack-design-vector-illustration_1142-18270.jpg" target="blank"><img src="../src/assets/images/imageUploader/original/20-preiodic-table-elements-icon-pack-design-vector-illustration_1142-18270.jpg" width="200"></a>
<a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/20-preiodic-table-elements-icon-pack-design-vector-illustration_1142-18270.jpg" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/20-preiodic-table-elements-icon-pack-design-vector-illustration_1142-18270.jpg" width="200"></a>
<br><code>205kB (2000x1589)</code></td>
<td>
<a href="../src/assets/images/imageUploader/compressed-0.7-1500px/9e9324ea-19b0-4698-99e6-60b1bf42a883.jpg" target="blank"><img src="../src/assets/images/imageUploader/compressed-0.7-1500px/9e9324ea-19b0-4698-99e6-60b1bf42a883.jpg" width="200"></a>
<a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/9e9324ea-19b0-4698-99e6-60b1bf42a883.jpg" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/9e9324ea-19b0-4698-99e6-60b1bf42a883.jpg" width="200"></a>
<br><code>128kB (1500x1091)</code></td>
</td>
<td><code>37.56%</code></td>
</tr>
<tr>
<td>
<a href="../src/assets/images/imageUploader/original/Colour_18-col_PT_with_labels.png" target="blank"><img src="../src/assets/images/imageUploader/original/Colour_18-col_PT_with_labels.png" width="200"></a>
<a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Colour_18-col_PT_with_labels.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Colour_18-col_PT_with_labels.png" width="200"></a>
<br><code>480kB (2584x1518)</code></td>
</td>
<td>
<a href="../src/assets/images/imageUploader/compressed-0.7-1500px/9f299c65-5032-47c7-b1ff-7cae16a5155b.png" target="blank"><img src="../src/assets/images/imageUploader/compressed-0.7-1500px/9f299c65-5032-47c7-b1ff-7cae16a5155b.png" width="200"></a>
<a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/9f299c65-5032-47c7-b1ff-7cae16a5155b.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/9f299c65-5032-47c7-b1ff-7cae16a5155b.png" width="200"></a>
<br><code>305kB (1500x881)</code></td>
</td>
<td><code>36.46%</code></td>
</tr>
<tr>
<td>
<a href="../src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.52.07 PM.png" target="blank"><img src="../src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.52.07 PM.png" width="200"></a>
<a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.52.07 PM.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.52.07 PM.png" width="200"></a>
<br><code>16.5mb (5102x2488)</code>
</td>
<td>
<a href="../src/assets/images/imageUploader/compressed-0.7-1500px/714093c2-e0ae-429f-a540-c9991fa1ed31.png" target="blank"><img src="../src/assets/images/imageUploader/compressed-0.7-1500px/714093c2-e0ae-429f-a540-c9991fa1ed31.png" width="200"></a>
<a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/714093c2-e0ae-429f-a540-c9991fa1ed31.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/714093c2-e0ae-429f-a540-c9991fa1ed31.png" width="200"></a>
<br><code>155kB (1500x731)</code>
</td>
<td><code>99.06%</code></td>
</tr>
<tr>
<td>
<a href="../src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.53.09 PM.png" target="blank"><img src="../src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.53.09 PM.png" width="200"></a>
<a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.53.09 PM.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.53.09 PM.png" width="200"></a>
<br><code>11.9mb (5098x2480)</code>
</td>
<td>
<a href="../src/assets/images/imageUploader/compressed-0.7-1500px/8f60995d-e1e3-44d0-b250-845e8929872c.png" target="blank"><img src="../src/assets/images/imageUploader/compressed-0.7-1500px/8f60995d-e1e3-44d0-b250-845e8929872c.png" width="200"></a>
<a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/8f60995d-e1e3-44d0-b250-845e8929872c.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/8f60995d-e1e3-44d0-b250-845e8929872c.png" width="200"></a>
<br><code>97kB (1500x729)</code></td>
</td>
<td><code>99.18%</code></td>
</tr>
<tr>
<td>
<a href="../src/assets/images/imageUploader/original/thumb.gif" target="blank"><img src="../src/assets/images/imageUploader/original/thumb.gif" width="200"></a>
<a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/thumb.gif" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/thumb.gif" width="200"></a>
<br><code>4.7mb (770x702)</code>
</td>
<td>
<a href="../src/assets/images/imageUploader/compressed-0.7-1500px/3619d683-95ac-4890-895f-0b8ec61d43e9.gif" target="blank"><img src="../src/assets/images/imageUploader/compressed-0.7-1500px/3619d683-95ac-4890-895f-0b8ec61d43e9.gif" width="200"></a>
<a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/3619d683-95ac-4890-895f-0b8ec61d43e9.gif" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/3619d683-95ac-4890-895f-0b8ec61d43e9.gif" width="200"></a>
<br><code>50kB (770x702)</code></td>
</td>
<td><code>98.94%</code></td>
</tr>
</table>
<br>
<p><img src="../src/assets/images/imageUpload.gif" alt="" width="900"></p>
<p><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUpload.gif" alt="" width="900"></p>

<dl class="details">

Expand Down
30 changes: 16 additions & 14 deletions src/authoring/extensions/ui/imageUploader/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ import spinner from './assets/spinner.svg';
*
* --
*
* Adds a custom image uploader (DAM) that supports image editing and compression
* before uploading to the Learnosity CDN.
* This extension replaces the default Learnosity image uploader with a custom image
* uploader that supports image editing and compression before uploading to the
* Learnosity CDN.
*
* Consider this extension if you're looking to reduce the file size of images or
* if you want to give users the flexibility to crop or rotate them before uploading.
Expand All @@ -31,7 +32,8 @@ import spinner from './assets/spinner.svg';
* By default, we resize images to a maximum width or height of 1500px. The calling
* page can override `width`, `height`, and `quality`. See below in `run()`.
*
* Image comparisons (before and after)
* <h2>Image comparisons (before and after)</h2>
* <p>Click image to view full size.</p>
* <table style="table-layout: auto; max-width: 1000px;">
* <thead>
* <tr>
Expand All @@ -42,62 +44,62 @@ import spinner from './assets/spinner.svg';
* </thead>
* <tr>
* <td>
* <a href="../src/assets/images/imageUploader/original/20-preiodic-table-elements-icon-pack-design-vector-illustration_1142-18270.jpg" target="blank"><img src="../src/assets/images/imageUploader/original/20-preiodic-table-elements-icon-pack-design-vector-illustration_1142-18270.jpg" width="200"></a>
* <a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/20-preiodic-table-elements-icon-pack-design-vector-illustration_1142-18270.jpg" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/20-preiodic-table-elements-icon-pack-design-vector-illustration_1142-18270.jpg" width="200"></a>
* <br><code>205kB (2000x1589)</code></td>
* <td>
* <a href="../src/assets/images/imageUploader/compressed-0.7-1500px/9e9324ea-19b0-4698-99e6-60b1bf42a883.jpg" target="blank"><img src="../src/assets/images/imageUploader/compressed-0.7-1500px/9e9324ea-19b0-4698-99e6-60b1bf42a883.jpg" width="200"></a>
* <a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/9e9324ea-19b0-4698-99e6-60b1bf42a883.jpg" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/9e9324ea-19b0-4698-99e6-60b1bf42a883.jpg" width="200"></a>
* <br><code>128kB (1500x1091)</code></td>
* </td>
* <td><code>37.56%</code></td>
* </tr>
* <tr>
* <td>
* <a href="../src/assets/images/imageUploader/original/Colour_18-col_PT_with_labels.png" target="blank"><img src="../src/assets/images/imageUploader/original/Colour_18-col_PT_with_labels.png" width="200"></a>
* <a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Colour_18-col_PT_with_labels.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Colour_18-col_PT_with_labels.png" width="200"></a>
* <br><code>480kB (2584x1518)</code></td>
* </td>
* <td>
* <a href="../src/assets/images/imageUploader/compressed-0.7-1500px/9f299c65-5032-47c7-b1ff-7cae16a5155b.png" target="blank"><img src="../src/assets/images/imageUploader/compressed-0.7-1500px/9f299c65-5032-47c7-b1ff-7cae16a5155b.png" width="200"></a>
* <a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/9f299c65-5032-47c7-b1ff-7cae16a5155b.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/9f299c65-5032-47c7-b1ff-7cae16a5155b.png" width="200"></a>
* <br><code>305kB (1500x881)</code></td>
* </td>
* <td><code>36.46%</code></td>
* </tr>
* <tr>
* <td>
* <a href="../src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.52.07 PM.png" target="blank"><img src="../src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.52.07 PM.png" width="200"></a>
* <a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.52.07 PM.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.52.07 PM.png" width="200"></a>
* <br><code>16.5mb (5102x2488)</code>
* </td>
* <td>
* <a href="../src/assets/images/imageUploader/compressed-0.7-1500px/714093c2-e0ae-429f-a540-c9991fa1ed31.png" target="blank"><img src="../src/assets/images/imageUploader/compressed-0.7-1500px/714093c2-e0ae-429f-a540-c9991fa1ed31.png" width="200"></a>
* <a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/714093c2-e0ae-429f-a540-c9991fa1ed31.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/714093c2-e0ae-429f-a540-c9991fa1ed31.png" width="200"></a>
* <br><code>155kB (1500x731)</code>
* </td>
* <td><code>99.06%</code></td>
* </tr>
* <tr>
* <td>
* <a href="../src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.53.09 PM.png" target="blank"><img src="../src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.53.09 PM.png" width="200"></a>
* <a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.53.09 PM.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/Screenshot 2024-05-29 at 3.53.09 PM.png" width="200"></a>
* <br><code>11.9mb (5098x2480)</code>
* </td>
* <td>
* <a href="../src/assets/images/imageUploader/compressed-0.7-1500px/8f60995d-e1e3-44d0-b250-845e8929872c.png" target="blank"><img src="../src/assets/images/imageUploader/compressed-0.7-1500px/8f60995d-e1e3-44d0-b250-845e8929872c.png" width="200"></a>
* <a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/8f60995d-e1e3-44d0-b250-845e8929872c.png" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/8f60995d-e1e3-44d0-b250-845e8929872c.png" width="200"></a>
* <br><code>97kB (1500x729)</code></td>
* </td>
* <td><code>99.18%</code></td>
* </tr>
* <tr>
* <td>
* <a href="../src/assets/images/imageUploader/original/thumb.gif" target="blank"><img src="../src/assets/images/imageUploader/original/thumb.gif" width="200"></a>
* <a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/thumb.gif" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/original/thumb.gif" width="200"></a>
* <br><code>4.7mb (770x702)</code>
* </td>
* <td>
* <a href="../src/assets/images/imageUploader/compressed-0.7-1500px/3619d683-95ac-4890-895f-0b8ec61d43e9.gif" target="blank"><img src="../src/assets/images/imageUploader/compressed-0.7-1500px/3619d683-95ac-4890-895f-0b8ec61d43e9.gif" width="200"></a>
* <a href="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/3619d683-95ac-4890-895f-0b8ec61d43e9.gif" target="blank"><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUploader/compressed-0.7-1500px/3619d683-95ac-4890-895f-0b8ec61d43e9.gif" width="200"></a>
* <br><code>50kB (770x702)</code></td>
* </td>
* <td><code>98.94%</code></td>
* </tr>
* </table>
* <br>
*
* <p><img src="../src/assets/images/imageUpload.gif" alt="" width="900"></p>
* <p><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/imageUpload.gif" alt="" width="900"></p>
* @module Extensions/Authoring/imageUploader
*/

Expand Down

0 comments on commit 708f280

Please sign in to comment.