DOC-3296: Rename Image Optimizer to Media Optimizer, add new UC-Video Documentation with supporting demos.

Author: kemister85

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: '<your-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; }
+  `
+});

modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html

@@ -0,0 +1,36 @@
+<textarea id="uploadcare-full-feature">
+    <h1>Discover Your Dream Home on Mallorca: Where Paradise Meets Investment</h1>
+    <p><span style="color: #4e5c73;">Mallorca, the jewel of the Mediterranean, is not just a place of beauty&mdash;it&rsquo;s a smart investment. With property values consistently on the rise, now is the perfect time to secure your piece of this sun-soaked paradise.&nbsp;</span></p>
+    
+    <figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 718;" src="https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/100x/ 100w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/200x/ 200w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/300x/ 300w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/500x/ 500w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/750x/ 750w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/preview/ 2048w" alt="Mallorca">
+    <figcaption>Michael Heuser on <a href="https://unsplash.com/@gum_meee">Unsplash</a></figcaption>
+    </figure>
+    
+    <p>Let us show you why Mallorca should be your next home&mdash;and introduce you to an exquisite villa that could soon be yours.</p>
+    
+    <h2>Experience Mallorca in Motion</h2>
+    <p>Watch this stunning video showcasing the beauty and lifestyle that awaits you on this Mediterranean paradise:</p>
+    <p><uc-video uuid="83fd9f98-1939-4d99-b5e3-85563f89f5fb" class="tox-uc-video" contenteditable="false" controls="true" /></p>
+    <p><em>Experience the crystal-clear waters, charming villages, and breathtaking landscapes that make Mallorca the perfect destination for your dream home.</em></p>
+    <blockquote><em>"The Mallorca real estate market has grown by an impressive 8% annually over the past five years,"</em> &mdash; Elena Alvarez, Market Analyst at Mediterranean Realty Insights.</blockquote>
+    <p>According to recent market data, Mallorca&rsquo;s property values have experienced steady growth, with an average&nbsp;<a href="tiny.cloud">increase of 8% annually over the past five years</a>. This consistent appreciation, coupled with a thriving rental market, makes it an ideal destination for investors seeking both luxury and financial returns.&nbsp;</p>
+    <h2>Explore Our Featured Villa: The Epitome of Luxury&nbsp;</h2>
+    <p>Located in one of Mallorca&rsquo;s most exclusive areas, this exquisite villa offers breathtaking views and modern design. Every detail has been meticulously crafted to provide the ultimate in comfort and elegance.</p>
+    <figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 1148;" src="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/100x/ 100w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/200x/ 200w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/300x/ 300w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/500x/ 500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/750x/ 750w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/ 2048w" alt="luxury wooden house interior">
+    <figcaption>Designed by <a href="https://www.freepik.com/">Freepik</a></figcaption>
+    </figure>
+    <ul>
+    <li><strong>5 luxurious bedrooms</strong> with private en-suite bathrooms</li>
+    <li><strong>Infinity pool</strong> with panoramic Mediterranean views</li>
+    <li><strong>Spacious terrace</strong> for outdoor dining and entertainment</li>
+    <li><strong>Private garden</strong> with lush landscaping</li>
+    <li><strong>Cutting-edge smart home system&nbsp;</strong><strong>&nbsp;</strong></li>
+    </ul>
+    <figure class="image"><img style="width: min(2000px, 100%); aspect-ratio: 2000 / 1121;" src="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/" sizes="(min-width: 2000px) 2000px, 100vw" srcset="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/100x/ 100w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/200x/ 200w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/300x/ 300w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/500x/ 500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/750x/ 750w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/ 2000w" alt="beautiful kitchen interior design">
+    <figcaption>Designed by <a href="https://www.freepik.com/">Freepik</a></figcaption>
+    </figure>
+    <p>Step inside, and you&rsquo;ll find bright, open living spaces that blend seamlessly with the outdoors, creating a harmonious living environment that&rsquo;s both relaxing and inspiring.</p>
+    <p>Owning a villa in Mallorca means more than just having a home&mdash;it means living a life of luxury and adventure. From exploring charming villages to dining at world-class restaurants and sailing the turquoise waters, every day is a new experience.</p>
+    <h2>Make This Dream a Reality</h2>
+    <p>Don&rsquo;t miss the opportunity to own a piece of paradise. <a href="tiny.cloud">Contact us today</a> to schedule a private tour of this exceptional villa and explore other exclusive properties on the island.</p> 
+    </textarea>

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; }
+  `
+});

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: '<your-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;}
+  `
+  });