Fix bg image for performance.

hlxsites · Jan 19, 2024 · feb82a9 · feb82a9
1 parent dcb32f2
commit feb82a9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/cigaradvisor/blocks/author-detail/author-detail.css b/cigaradvisor/blocks/author-detail/author-detail.css
@@ -1,7 +1,24 @@
 
 .author-detail.block {
-  background: url("https://main--famous-smoke-cigaradvisor--hlxsites.hlx.page/cigaradvisor/images/backgrounds/author.jpg") top no-repeat;
-  background-size: auto 300px;
+  position: relative;
+  overflow: hidden;
+}
+
+.author-detail.block picture.bg-image {
+  max-height: 300px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.author-detail.block picture.bg-image img {
+  object-position: center center;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
 }
 
 .author-detail.block .author-detail-content {
@@ -87,7 +104,10 @@
 @media screen and (min-width: 900px) {
   .author-detail.block {
     padding-top: 200px;
-    background-size: cover;
+  }
+
+  .author-detail.block picture.bg-image {
+    max-height: unset;
   }
 
   .author-detail.block .author-detail-content {

diff --git a/cigaradvisor/blocks/author-detail/author-detail.js b/cigaradvisor/blocks/author-detail/author-detail.js
@@ -1,4 +1,4 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/aem.js';
+import { readBlockConfig, decorateIcons, createOptimizedPicture } from '../../scripts/aem.js';
 
 export default async function decorate(block) {
   const config = readBlockConfig(block);
@@ -61,5 +61,8 @@ export default async function decorate(block) {
       </div>
     </div>
   `;
+  const bg = createOptimizedPicture('https://main--famous-smoke-cigaradvisor--hlxsites.hlx.page/cigaradvisor/images/backgrounds/author.jpg');
+  bg.classList.add('bg-image');
+  block.append(bg);
   decorateIcons(block);
 }
diff --git a/helix-query.yaml b/helix-query.yaml
@@ -64,27 +64,27 @@ indices:
       description:
         select: head > meta[property="og:description"]
         value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: attribute(el, "content")
       name:
-        select: .block.author-detail h2.author-name
+        select: div.author-detail > div:nth-of-type(1) > div:nth-of-type(2)
         value: textContent(el)
       author-title:
-        select: .block.author-detail p.author-title
+        select: div.author-detail > div:nth-of-type(2) > div:nth-of-type(2)
         value: textContent(el)
       intro:
-        select: .block.author-detail div.author-intro > p
+        select: div.author-detail > div:nth-of-type(4) > div:nth-of-type(2)
         value: textContent(el)
-      image:
-        select: .block.author-detail div.author-image > picture > img
-        value: match(attribute(el, 'src'), "(?:https:\/\/[^/]+)?(.+)")
       twitter:
-        select: .block.author-detail div.social-links > ul > li > a
+        select: div.author-detail ul > li > a
         value: match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?twitter\.com\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$')
       facebook:
-        select: .block.author-detail div.social-links > ul > li > a
+        select: div.author-detail ul > li > a
         value: match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?facebook\.com\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$')
       instagram:
-        select: .block.author-detail div.social-links > ul > li > a
+        select: div.author-detail ul > li > a
         value: match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?instagram\.com\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$')
       youtube:
-        select: .block.author-detail div.social-links > ul > li > a
+        select: div.author-detail ul > li > a
         value: match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?youtube\.com\/user\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$')