(#5086) Fixes Embedded Inline Images

docroot/profiles/custom/cgov_site/modules/custom/cgov_yaml_content/content/14550_inner_page_embedded_images.content.yml

@@ -375,6 +375,34 @@
             ></drupal-entity>
             <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
             <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+    - entity: 'paragraph'
+      type: 'body_section'
+      field_body_section_heading:
+        - format: 'simple'
+          value: 'Inline Display'
+      field_body_section_content:
+        - format: 'ncids_full_html'
+          value: |
+            <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
+            <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
+            <div class="grid-row grid-gap">
+              <div class="grid-col-3">
+                <drupal-entity
+                  data-align=""
+                  data-caption=""
+                  data-embed-button="media_entity_embed"
+                  data-entity-embed-display="view_mode:media.image_display_article_large"
+                  data-entity-type="media"
+                  data-entity-uuid="#process"
+                  data-cgov-yaml-query-bundle="cgov_image"
+                  data-cgov-yaml-query-name="Promo Placeholder"
+                ></drupal-entity>
+              </div>
+              <div class="grid-col-6">
+                <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
+                <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+              </div>
+            </div>
   field_date_posted:
     value: "2024-10-02"
   field_date_reviewed:

docroot/profiles/custom/cgov_site/modules/custom/cgov_yaml_content/content/14555_inner_page_embedded_images_biography.content.yml

@@ -304,6 +304,27 @@
       ></drupal-entity>
       <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
       <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+      <h2>Inline Image</h2>
+      <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
+      <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
+      <div class="grid-row grid-gap">
+        <div class="grid-col-4">
+          <drupal-entity
+            data-align=""
+            data-caption=""
+            data-embed-button="media_entity_embed"
+            data-entity-embed-display="view_mode:media.image_display_inline"
+            data-entity-type="media"
+            data-entity-uuid="#process"
+            data-cgov-yaml-query-bundle="cgov_image"
+            data-cgov-yaml-query-name="Promo Placeholder"
+          ></drupal-entity>
+        </div>
+        <div class="grid-col-8">
+          <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
+          <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+        </div>
+      </div>
   field_image_promotional:
     - target_type: 'media'
       '#process':

docroot/profiles/custom/cgov_site/modules/custom/cgov_yaml_content/content/14560_inner_page_embedded_image_blog_post.content.yml

@@ -258,6 +258,27 @@
         ></drupal-entity>
         <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
         <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+        <h2>Inline Image</h2>
+        <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
+        <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
+        <div class="grid-row grid-gap">
+          <div class="grid-col-4">
+            <drupal-entity
+              data-align=""
+              data-caption=""
+              data-embed-button="media_entity_embed"
+              data-entity-embed-display="view_mode:media.image_display_inline"
+              data-entity-type="media"
+              data-entity-uuid="#process"
+              data-cgov-yaml-query-bundle="cgov_image"
+              data-cgov-yaml-query-name="Promo Placeholder"
+            ></drupal-entity>
+          </div>
+          <div class="grid-col-8">
+            <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
+            <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+          </div>
+        </div>
   field_browser_title:
     value: 'Embedded Video Content Blog Post Test Page - NCIDS Styles'
   field_card_title:

docroot/profiles/custom/cgov_site/modules/custom/cgov_yaml_content/content/14565_inner_page_embedded_image_cancer_center.content.yml

@@ -304,6 +304,27 @@
         ></drupal-entity>
         <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
         <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+        <h2>Inline Image</h2>
+        <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
+        <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
+        <div class="grid-row grid-gap">
+          <div class="grid-col-4">
+            <drupal-entity
+              data-align=""
+              data-caption=""
+              data-embed-button="media_entity_embed"
+              data-entity-embed-display="view_mode:media.image_display_inline"
+              data-entity-type="media"
+              data-entity-uuid="#process"
+              data-cgov-yaml-query-bundle="cgov_image"
+              data-cgov-yaml-query-name="Promo Placeholder"
+            ></drupal-entity>
+          </div>
+          <div class="grid-col-8">
+            <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
+            <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+          </div>
+        </div>
   field_date_posted:
     value: "2012-07-26"
   field_date_reviewed:

docroot/profiles/custom/cgov_site/modules/custom/cgov_yaml_content/content/14570_inner_page_embedded_image_event.content.yml

@@ -290,6 +290,27 @@
         ></drupal-entity>
         <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
         <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+        <h2>Inline Image</h2>
+        <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
+        <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
+        <div class="grid-row grid-gap">
+          <div class="grid-col-4">
+            <drupal-entity
+              data-align=""
+              data-caption=""
+              data-embed-button="media_entity_embed"
+              data-entity-embed-display="view_mode:media.image_display_inline"
+              data-entity-type="media"
+              data-entity-uuid="#process"
+              data-cgov-yaml-query-bundle="cgov_image"
+              data-cgov-yaml-query-name="Promo Placeholder"
+            ></drupal-entity>
+          </div>
+          <div class="grid-col-8">
+            <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
+            <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+          </div>
+        </div>
   field_image_article:
     - target_type: 'media'
       '#process':

docroot/profiles/custom/cgov_site/modules/custom/cgov_yaml_content/content/14575_inner_page_embedded_image_press_release.content.yml

@@ -285,3 +285,24 @@
         ></drupal-entity>
         <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
         <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+        <h2>Inline Image</h2>
+        <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
+        <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
+        <div class="grid-row grid-gap">
+          <div class="grid-col-4">
+            <drupal-entity
+              data-align=""
+              data-caption=""
+              data-embed-button="media_entity_embed"
+              data-entity-embed-display="view_mode:media.image_display_inline"
+              data-entity-type="media"
+              data-entity-uuid="#process"
+              data-cgov-yaml-query-bundle="cgov_image"
+              data-cgov-yaml-query-name="Promo Placeholder"
+            ></drupal-entity>
+          </div>
+          <div class="grid-col-8">
+            <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
+            <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
+          </div>
+        </div>

docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/wysiwyg/common/cgdp-embed-image/index.scss

@@ -20,4 +20,10 @@
 	&.cgdp-embed-image--small {
 		@include embedded.embedded-entity(3);
 	}
+
+	&.cgdp-embed-image--inline {
+		img {
+			@include u-height('auto');
+		}
+	}
 }

docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/media/image/entity-embed-container--media.image-display-inline.html.twig

@@ -8,4 +8,6 @@
  * items.
  */
 #}
-{{ children }}
+<div class="cgdp-embed-image cgdp-embed-image--inline">
+  {{ children }}
+</div>