From 9217cdee7feb82c0d20c3caa00565260cc99442b Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 30 Sep 2025 14:11:05 +1000 Subject: [PATCH 01/10] DOC-3296: Rename Image Optimizer to Media Optimizer, add new UC-Video Documentation with supporting demos. --- .../uploadcare-full-feature/example.js | 50 ++++ .../uploadcare-full-feature/index.html | 36 +++ .../uploadcare-full-feature/index.js | 49 ++++ .../live-demos/uploadcare-image/example.js | 34 +++ .../index.html | 13 +- .../{uploadcare => uploadcare-image}/index.js | 2 +- .../live-demos/uploadcare-video/example.js | 41 ++++ .../live-demos/uploadcare-video/index.html | 42 ++++ .../live-demos/uploadcare-video/index.js | 43 ++++ .../examples/live-demos/uploadcare/example.js | 34 --- modules/ROOT/nav.adoc | 4 +- modules/ROOT/pages/8.1.0-release-notes.adoc | 10 +- modules/ROOT/pages/8.2.0-release-notes.adoc | 23 ++ modules/ROOT/pages/uploadcare-image.adoc | 219 +++++++++++++++++ modules/ROOT/pages/uploadcare-video.adoc | 157 +++++++++++++ modules/ROOT/pages/uploadcare.adoc | 203 +++------------- .../configuration/a11y_advanced_options.adoc | 4 +- .../uploadcare_disable_video_resize.adoc | 35 +++ .../uploadcare_supported_files.adoc | 222 ++++++++++++++++++ .../uploadcare_video_properties.adoc | 58 +++++ .../partials/index-pages/premium-plugins.adoc | 4 +- ...plugin-compatibility-uploadcare-image.adoc | 17 +- .../partials/misc/premium-plugin-list.adoc | 2 +- 23 files changed, 1088 insertions(+), 214 deletions(-) create mode 100644 modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js create mode 100644 modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html create mode 100644 modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js create mode 100644 modules/ROOT/examples/live-demos/uploadcare-image/example.js rename modules/ROOT/examples/live-demos/{uploadcare => uploadcare-image}/index.html (99%) rename modules/ROOT/examples/live-demos/{uploadcare => uploadcare-image}/index.js (97%) create mode 100644 modules/ROOT/examples/live-demos/uploadcare-video/example.js create mode 100644 modules/ROOT/examples/live-demos/uploadcare-video/index.html create mode 100644 modules/ROOT/examples/live-demos/uploadcare-video/index.js delete mode 100644 modules/ROOT/examples/live-demos/uploadcare/example.js create mode 100644 modules/ROOT/pages/uploadcare-image.adoc create mode 100644 modules/ROOT/pages/uploadcare-video.adoc create mode 100644 modules/ROOT/partials/configuration/uploadcare_disable_video_resize.adoc create mode 100644 modules/ROOT/partials/configuration/uploadcare_supported_files.adoc create mode 100644 modules/ROOT/partials/configuration/uploadcare_video_properties.adoc diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js new file mode 100644 index 0000000000..d629fc52bc --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js @@ -0,0 +1,50 @@ +tinymce.init({ + selector: "textarea#uploadcare-full-feature", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + uploadcare_filters: [ + { name: 'none' }, // No filter applied + { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' + { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' + { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' + { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' + { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' + { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' + { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' + { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' + { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' + { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' + { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' + ], + // Video configuration + uploadcare_video_properties: { + controls: true, + autoplay: false, + loop: false, + muted: false, + playsInline: true, + preload: 'metadata', + showLogo: false + }, + uploadcare_disable_video_resize: false, + uploadcare_supported_files: [ + { mimeType: 'video/mp4', extensions: ['mp4'] }, + { mimeType: 'video/webm', extensions: ['webm'] } + ], + a11y_advanced_options: true, + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { display: block; margin: 1rem 0; } + ` +}); \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html new file mode 100644 index 0000000000..9b21719fce --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html @@ -0,0 +1,36 @@ + \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js new file mode 100644 index 0000000000..c70a3b3915 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js @@ -0,0 +1,49 @@ +tinymce.init({ + selector: "textarea#uploadcare-full-feature", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '630992ad50fe2291c406', + uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', + uploadcare_store_type: 'temporary', + uploadcare_filters: [ + { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' + { name: 'adaris', amount: -100, label: 'Vintage' }, // Adaris with inverted effect (amount -100), label reads 'Vintage' + { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' + { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' + { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' + { name: 'galen', amount: 80, label: 'Soft' }, // Galen with softening effect (amount 80), label reads 'Soft' + { name: 'carris', amount: 120, label: 'Sharp' }, // Carris with high contrast (amount 120), label reads 'Sharp' + { name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel with darkened effect (amount -50), label reads 'Night' + { name: 'none' }, // No filter applied + ], + // Video configuration + uploadcare_video_properties: { + controls: true, + autoplay: false, + loop: false, + muted: false, + playsInline: true, + preload: 'metadata', + showLogo: false + }, + uploadcare_disable_video_resize: false, + uploadcare_supported_files: [ + { mimeType: 'video/mp4', extensions: ['mp4'] }, + { mimeType: 'video/webm', extensions: ['webm'] } + ], + a11y_advanced_options: true, + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { display: block; margin: 1rem 0; } + ` +}); diff --git a/modules/ROOT/examples/live-demos/uploadcare-image/example.js b/modules/ROOT/examples/live-demos/uploadcare-image/example.js new file mode 100644 index 0000000000..c2556e1d39 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-image/example.js @@ -0,0 +1,34 @@ +tinymce.init({ + selector: "textarea#uploadcare-image", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + uploadcare_filters: [ + { name: 'none' }, // No filter applied + { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' + { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' + { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' + { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' + { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' + { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' + { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' + { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' + { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' + { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' + { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' + ], + a11y_advanced_options: true, + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + ` + }); diff --git a/modules/ROOT/examples/live-demos/uploadcare/index.html b/modules/ROOT/examples/live-demos/uploadcare-image/index.html similarity index 99% rename from modules/ROOT/examples/live-demos/uploadcare/index.html rename to modules/ROOT/examples/live-demos/uploadcare-image/index.html index 6fb2c2d2e2..94c511d821 100644 --- a/modules/ROOT/examples/live-demos/uploadcare/index.html +++ b/modules/ROOT/examples/live-demos/uploadcare-image/index.html @@ -1,17 +1,23 @@ - \ No newline at end of file + diff --git a/modules/ROOT/examples/live-demos/uploadcare/index.js b/modules/ROOT/examples/live-demos/uploadcare-image/index.js similarity index 97% rename from modules/ROOT/examples/live-demos/uploadcare/index.js rename to modules/ROOT/examples/live-demos/uploadcare-image/index.js index 40d7018930..122595eec4 100644 --- a/modules/ROOT/examples/live-demos/uploadcare/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-image/index.js @@ -1,5 +1,5 @@ tinymce.init({ - selector: "textarea", + selector: "textarea#uploadcare-image", plugins: [ "uploadcare", "code", "link", "preview", "lists" ], uploadcare_public_key: '630992ad50fe2291c406', uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/example.js b/modules/ROOT/examples/live-demos/uploadcare-video/example.js new file mode 100644 index 0000000000..8349032677 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-video/example.js @@ -0,0 +1,41 @@ +tinymce.init({ + selector: "textarea#uploadcare-video", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + // Video configuration + uploadcare_video_properties: { + controls: true, + autoplay: false, + loop: false, + muted: false, + playsInline: true, + preload: 'metadata', + showLogo: false + }, + uploadcare_disable_video_resize: false, + uploadcare_supported_files: [ + { mimeType: 'video/mp4', extensions: ['mp4'] }, + { mimeType: 'video/webm', extensions: ['webm'] } + ], + a11y_advanced_options: true, + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { + display: block; + margin: 1rem 0; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + ` + }); diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.html b/modules/ROOT/examples/live-demos/uploadcare-video/index.html new file mode 100644 index 0000000000..b3a3cc30c3 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.html @@ -0,0 +1,42 @@ + diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.js b/modules/ROOT/examples/live-demos/uploadcare-video/index.js new file mode 100644 index 0000000000..4e84d5f66b --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.js @@ -0,0 +1,43 @@ +tinymce.init({ + selector: "textarea#uploadcare-video", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '630992ad50fe2291c406', + uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', + uploadcare_store_type: 'temporary', + // Video configuration + uploadcare_video_properties: { + controls: true, + autoplay: false, + loop: false, + muted: false, + playsInline: true, + preload: 'metadata', + showLogo: false + }, + uploadcare_disable_video_resize: false, + uploadcare_supported_files: [ + { mimeType: 'video/mp4', extensions: ['mp4'] }, + { mimeType: 'video/webm', extensions: ['webm'] } + ], + a11y_advanced_options: true, + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { + display: block; + margin: 1rem 0; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + ` +}); diff --git a/modules/ROOT/examples/live-demos/uploadcare/example.js b/modules/ROOT/examples/live-demos/uploadcare/example.js deleted file mode 100644 index 38bcb9f27a..0000000000 --- a/modules/ROOT/examples/live-demos/uploadcare/example.js +++ /dev/null @@ -1,34 +0,0 @@ -tinymce.init({ - selector: "textarea", - plugins: [ "uploadcare", "code", "link", "preview", "lists" ], - uploadcare_public_key: '', - uploadcare_filters: [ - { name: 'none' }, // No filter applied - { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' - { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' - { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' - { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' - { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' - { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' - { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' - { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' - { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' - { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' - { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' - ], - a11y_advanced_options: true, - toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", - height: 700, - content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } - h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } - h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } - p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } - p { line-height: 1.6; margin: 0; } - p + p { margin-top: 1rem; } - a { color: #2b70e3; } - blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } - figcaption {font-size: 0.875em;} - ` - }); \ No newline at end of file diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 53cda02892..c255dab1a1 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -324,7 +324,9 @@ ***** xref:import-from-word-with-jwt-authentication-nodejs.adoc[Node.js] ***** xref:import-from-word-with-jwt-authentication-php.adoc[PHP] *** xref:editimage.adoc[Image Editing] -*** xref:uploadcare.adoc[Image Optimizer Powered by Uploadcare] +*** xref:uploadcare.adoc[Media Optimizer] +**** xref:uploadcare-image.adoc[Image] +**** xref:uploadcare-video.adoc[Video] *** xref:inline-css.adoc[Inline CSS] *** xref:linkchecker.adoc[Link Checker] *** xref:math.adoc[Math] diff --git a/modules/ROOT/pages/8.1.0-release-notes.adoc b/modules/ROOT/pages/8.1.0-release-notes.adoc index 842703e846..607d9a2fcc 100644 --- a/modules/ROOT/pages/8.1.0-release-notes.adoc +++ b/modules/ROOT/pages/8.1.0-release-notes.adoc @@ -55,19 +55,19 @@ To resolve this, {productname} now inserts a temporary hidden element before the For information on the **Spell Checker** plugin, see: xref:introduction-to-tiny-spellchecker.adoc[Spell Checker]. -=== Image Optimizer (Powered by Uploadcare) +=== Media Optimizer (Powered by Uploadcare) -The {productname} {release-version} release includes an accompanying release of the **Image Optimizer (Powered by Uploadcare)** premium plugin. +The {productname} {release-version} release includes an accompanying release of the **Media Optimizer (Powered by Uploadcare)** premium plugin. -**Image Optimizer (Powered by Uploadcare)** includes the following fix. +**Media Optimizer (Powered by Uploadcare)** includes the following fix. ==== Image previews sometimes showed the wrong image from a `srcset`. -In previous versions of the Image Optimizer premium plugin, an issue where image effects were applied based on the main `src` instead of the active `srcset` URL, caused discrepancies when the displayed image was selected from `srcset`. This led to a mismatch in the adjustment preview (rendered from the main `src`) versus the image shown in the editor (rendered from the `srcset` URL), resulting in different visual outcomes for effects such as blur or resize. +In previous versions of the Media Optimizer premium plugin, an issue where image effects were applied based on the main `src` instead of the active `srcset` URL, caused discrepancies when the displayed image was selected from `srcset`. This led to a mismatch in the adjustment preview (rendered from the main `src`) versus the image shown in the editor (rendered from the `srcset` URL), resulting in different visual outcomes for effects such as blur or resize. {productname} {release-version} resolves this issue by using the `currentSrc` property to generate previews, ensuring the preview and the editor image reference the same resource. As a result, the preview image and the image in the editor are now consistent. -For information on the **Image Optimizer Powered by Uploadcare** plugin, see: xref:uploadcare.adoc[Image Optimizer (Powered by Uploadcare)]. +For information on the **Media Optimizer Powered by Uploadcare** plugin, see: xref:uploadcare.adoc[Media Optimizer (Powered by Uploadcare)]. === Accessibility Checker diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 72151042b1..7f5c4d2a63 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -29,6 +29,29 @@ include::partial$misc/admon-releasenotes-for-stable.adoc[] The following premium plugin updates were released alongside {productname} 8.2.0. +=== Media Optimizer + +The {productname} 8.2.0 release includes an accompanying release of the **Media Optimizer** premium plugin. + +**Media Optimizer** now includes comprehensive video handling capabilities. + +==== Video Upload Support + +The **Media Optimizer** plugin now supports video upload and processing, extending beyond its previous image-only functionality. Users can now upload videos directly within the editor through drag-and-drop, file selection, or URL input. + +The plugin now supports multiple video formats: + +* **MP4 Video**: Full support for MP4 video files `video/mp4` +* **WebM Video**: Support for WebM video files `video/webm` + +This new functionality is supported with the following new configuration options: + +* **`uploadcare_video_properties`**: Comprehensive video player configuration including autoplay, controls, loop and more. +* **`uploadcare_disable_video_resize`**: Option to control whether videos can be resized directly within the editor. +* **`uploadcare_supported_files`**: Extended file type support to include video formats alongside existing image and document support. + +For information on the **Media Optimizer** plugin, see: xref:uploadcare-video.adoc[Media Optimizer: Video]. + // === // The {productname} 8.2.0 release includes an accompanying release of the **** premium plugin. diff --git a/modules/ROOT/pages/uploadcare-image.adoc b/modules/ROOT/pages/uploadcare-image.adoc new file mode 100644 index 0000000000..7e0e5f5bec --- /dev/null +++ b/modules/ROOT/pages/uploadcare-image.adoc @@ -0,0 +1,219 @@ += Media Optimizer (Image) +:navtitle: Image feature of the Media Optimizer plugin +:description: The Image feature of the Media Optimizer plugin allows you to optimize images in your content. +:description_short: optimize images in your content. +:plugincode: uploadcare +:pluginname: Media Optimizer's Image feature +:keywords: plugin, {plugincode}, image, align, transform, alt text, caption, adjust, filter +:plugincategory: premium + +include::partial$misc/admon-premium-plugin.adoc[] + +== Overview + +The **Image feature of the Media Optimizer plugin** offers a range of powerful features for image hosting, serving, and editing. These include responsive image delivery, automatic image format selection, automatic compression, and non-destructive image transformations and adjustments, all powered by link:https://uploadcare.com[Uploadcare^]. + +== Key benefits + +* Improve page loading speed and save on bandwidth by serving images in the optimal size, format, and compression based on the visitor's browser and device. +* Ditch the image editor and adjust images right inside {productname} with non-destructive transformations and adjustments. Change your mind any time! +* Stay safe and compliant with secure uploads, built in malware protection, and unsafe content detection +* Enterprise-ready scalable cloud storage provided by Uploadcare, delivered through its lightning-fast global CDN, and compliant with SOC2 and GDPR standards. + +== Interactive example + +liveDemo::uploadcare-image[] + +:includedSection: uploadcarePlugin +include::partial$misc/plugin-compatibility-uploadcare-image.adoc[] +:!includedSection: + +== Basic setup + +To add the {pluginname} plugin to the editor, include `{plugincode}` in the `plugins` option in the editor configuration. + +.Example +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', // Required for Uploadcare integration + // uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({ + // signature: 'sig', + // expire: 123 + // }), // Recommended option for secure uploads +}); +---- + +[NOTE] +==== +The {pluginname} plugin overrides the xref:quickbars.adoc[Quickbar] quickimage toolbar item. To ensure a better user experience and to avoid having two image buttons configure `quickbars_insert_toolbar` to omit the `quickimage` toolbar item. +==== + + +== Image Operations + +Below is an overview of the features provided by the {pluginname} plugin for image optimization: + +[cols="1,1,^1,3",options="header"] +|=== +| Feature | Operation | Icon | Description + +| Align +| +| image:icons/align-left.svg[align-left.svg] +| Provides alignment options for the image or element. + +| +| Align Left +| image:icons/align-left.svg[align-left.svg] +| Aligns the image to the left. + +| +| Align Centre +| image:icons/align-center.svg[align-center.svg] +| Centers the image. + +| +| Align Right +| image:icons/align-right.svg[align-right.svg] +| Aligns the image to the right. + +| Transform +| +| image:icons/transform-image.svg[transform-image.svg] +| Allows users to apply transformations to the image: + +| +| Rotate Left +| image:icons/rotate-left.svg[rotate-left.svg] +| Rotates the image counterclockwise (left). + +| +| Rotate Right +| image:icons/rotate-right.svg[rotate-right.svg] +| Rotates the image clockwise (right). + +| +| Flip Vertically +| image:icons/flip-vertically.svg[flip-vertically.svg] +| Flips the image vertically. + +| +| Flip Horizontally +| image:icons/flip-horizontally.svg[flip-horizontally.svg] +| Flips the image horizontally. + +| +| Resize +| image:icons/resize.svg[resize.svg] +| Changes the size of the image. + +| Adjust +| +| image:icons/adjustments.svg[adjustments.svg] +| Provides tools for adjusting image properties: + +| +| Brightness +| image:icons/brightness.svg[brightness.svg] +| Adjusts the image brightness. + +| +| Contrast +| image:icons/contrast.svg[contrast.svg] +| Adjusts the image contrast. + +| +| Exposure +| image:icons/exposure.svg[exposure.svg] +| Adjusts the image exposure. + +| +| Gamma +| image:icons/gamma.svg[gamma.svg] +| Adjusts the image gamma. + +| +| Vibrance +| image:icons/vibrance.svg[vibrance.svg] +| Adjusts the image vibrance. + +| +| Saturation +| image:icons/saturation.svg[saturation.svg] +| Adjusts the image saturation. + +| +| Warmth +| image:icons/warmth.svg[warmth.svg] +| Adjusts the image warmth. + +| +| Grayscale +| image:icons/grayscale.svg[grayscale.svg] +| Converts the image to grayscale. + +| +| Invert Colors +| image:icons/invert.svg[invert.svg] +| Inverts the image colors. + +| +| Sharpen +| image:icons/sharpen.svg[sharpen.svg] +| Sharpens the image. + +| +| Blur +| image:icons/blur.svg[blur.svg] +| Blurs the image. + +| Filters +| +| image:icons/auto-image-enhancement.svg[auto-image-enhancement.svg] +| Provides tools for applying filters to the image. + +| Alt Text +| +| image:icons/alt-text.svg[alt-text.svg] +| Adds alternative text to describe the image for accessibility purposes. + +| +| Decorative Image +| image:icons/image-decorative.svg[image-decorative.svg] +a| +Marks the image as decorative, indicating it doesn't require alternative text for accessibility. + +This icon will only appear when the `a11y_advanced_options` configuration option is enabled. + +| Caption +| +| image:icons/caption.svg[caption.svg] +| Adds a caption below the image for additional context. + +| Revert +| +| image:icons/revert.svg[revert.svg] +| Restores the image to its original state by undoing all edits. +|=== + +== Options + +The following configuration options affect the behavior of the {pluginname} plugin: + + +include::partial$configuration/uploadcare_srcset_steps.adoc[leveloffset=+1] + + +include::partial$configuration/uploadcare_filters.adoc[leveloffset=+1] + +:includedSection: uploadcarePlugin +include::partial$configuration/a11y_advanced_options.adoc[leveloffset=+1] +:!includedSection: + +include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[] + +include::partial$misc/plugin-menu-item-id-boilerplate.adoc[] diff --git a/modules/ROOT/pages/uploadcare-video.adoc b/modules/ROOT/pages/uploadcare-video.adoc new file mode 100644 index 0000000000..d7111e6345 --- /dev/null +++ b/modules/ROOT/pages/uploadcare-video.adoc @@ -0,0 +1,157 @@ += Media Optimizer (Video) +:navtitle: Video feature of the Media Optimizer plugin +:description: The Video feature of the Media Optimizer plugin allows you to optimize videos in your content. +:description_short: optimize videos in your content. +:plugincode: uploadcare +:pluginname: Media Optimizer's Video feature +:keywords: plugin, {plugincode}, video, controls, autoplay, loop, poster, resize, upload, url, insert, edit, video +:plugincategory: premium + +The {pluginname} plugin allows {productname} users to upload, process, and embed both images and videos directly within the editor. + +== Overview + +The {pluginname} plugin extends {productname} with powerful video handling features that allow users to upload, process, and embed videos directly within the editor. The plugin leverages Uploadcare's infrastructure to provide video processing, custom video player functionality, and responsive video sizing. + +== Key benefits + +* Upload and optimize videos directly within the editor +* Custom video player with configurable properties +* Video poster image generation +* Responsive video sizing +* Support for MP4 and WebM formats +* Drag-and-drop video upload +* URL-based video insertion +* Video controls customization +* Accessibility features for videos + +== Interactive example + +liveDemo::uploadcare-video[] + +== Basic setup + +To add the {pluginname} plugin to the editor, include `uploadcare` in the `plugins` option in the editor configuration. + +.Example +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', // Required for Uploadcare integration + uploadcare_video_properties: { + controls: true, + autoplay: false, + loop: false, + ... // other video player properties + } +}); +---- + +[NOTE] +==== +The {pluginname} plugin uses the same plugin code `+uploadcare+` as the Media Optimizer plugin. Video functionality is automatically enabled when video files are uploaded. +==== + +== Video Operations + +Below is an overview of the features provided by the Video Optimizer plugin: + +[cols="1,1,4",options="header"] +|=== +| Feature | Icon | Description + +| Upload +| image:icons/folder.svg[folder.svg] +| Upload videos via drag-and-drop, file selection, or URL input + +| Upload from URL +| image:icons/link.svg[link.svg] +| Upload videos from a URL +|=== + +Below are the video player control options that are available to the video element: + +[cols="1,1,4",options="header"] +|=== +| Operation | Icon | Description + +| Play +| +| Customize video player controls and behavior + +| Mute +| +| Mute the video + +| Unmute +| +| Unmute the video + +| Slider +| +| Shows the progress of the video and allows users to move the slider to seek to a specific time in the video + +| Resize +| image:icons/resize.svg[resize.svg] +| Changes the size of the video (when enabled) + +| Remaining Time +| +| Shows the remaining time of the video + +| Picture-in-Picture +| +| Enables picture-in-picture mode for the video + +| Settings +| +| Opens the video settings menu + +| Fullscreen +| +| Enables fullscreen mode for the video + +| UC Logo +| +| Shows the Uploadcare logo +|=== + +== Options + +The following configuration options affect the behavior of the {pluginname} plugin: + +include::partial$configuration/uploadcare_video_properties.adoc[leveloffset=+1] + +include::partial$configuration/uploadcare_disable_video_resize.adoc[leveloffset=+1] + +include::partial$configuration/uploadcare_supported_files.adoc[leveloffset=+1] + +== Custom Video Element + +The plugin creates a custom `++` element that replaces the standard HTML `+