VACMS-15632 CLP aspect ratio update

department-of-veterans-affairs · Nov 27, 2023 · e2934a7 · e2934a7
1 parent 994a345
commit e2934a7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/site/assets/sass/style.scss b/src/site/assets/sass/style.scss
@@ -18,3 +18,7 @@
   margin-top: 0;
   padding-top: 1.25rem;
 }
+
+#clp-header-image img {
+  width: 468px;
+}
diff --git a/src/site/layouts/campaign_landing_page.drupal.liquid b/src/site/layouts/campaign_landing_page.drupal.liquid
@@ -6,12 +6,11 @@
 <div id="content" class="interior" data-template="node-campaign_landing_page">
   <main>
     <!-- Hero-->
-    <div class="va-u-background--image" style="background-image: url('{{ fieldHeroImage.entity.image.derivative.url }}">
-      <!-- Hero Content -->
-      <div class="vads-l-grid-container vads-u-padding-x--0">
-        <div class="vads-l-row">
-          <div class="vads-l-col--12 medium-screen:vads-l-col--6">
-            <div class="va-u-background--gradiant-blue vads-u-padding-x--4 vads-u-padding-bottom--6 vads-u-padding-top--4 medium-screen:vads-u-margin-right--4">
+    <div class="va-u-background--gradiant-blue">
+      <div class="vads-l-grid-container vads-u-padding-x--4 large-screen:vads-u-padding-x--0">
+        <div class="vads-l-col--12 small-screen:vads-l-col--10 medium-screen:vads-l-col--8 small-desktop-screen:vads-l-col--12">
+          <div class="vads-u-display--flex small-desktop-screen:vads-l-row">
+            <div class="vads-l-col--12 small-desktop-screen:vads-l-col--6 vads-u-padding-top--4 vads-u-padding-bottom--6 small-desktop-screen:vads-u-padding-right--4">
               <h1 class="vads-u-color--white">{{ title }}</h1>
               <hr class="va-c-blue-line--large vads-u-border-color--primary-alt vads-u-border--2px vads-u-margin-y--2" />
               <p class="va-introtext vads-u-color--white">{{ fieldHeroBlurb }}</p>
@@ -26,6 +25,9 @@
                 </a>
               {% endif %}
             </div>
+            <div class="vads-u-display--none small-desktop-screen:vads-u-display--block" id="clp-header-image">
+              <img class="vads-u-height--full" style="object-fit:cover" alt="" src="{{ fieldHeroImage.entity.image.derivative.url }}">
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/site/stages/build/drupal/graphql/nodeCampaignLandingPage.graphql.js b/src/site/stages/build/drupal/graphql/nodeCampaignLandingPage.graphql.js
@@ -274,7 +274,7 @@ const nodeCampaignLandingPage = `
         entityId
         ... on MediaImage {
           image {
-            derivative(style: VIEWPORTWIDTH) {
+            derivative(style: CROPSQUARE) {
               height
               url
               width