Fix hero image padding.

hlxsites · Apr 16, 2024 · cd11c3a · cd11c3a
1 parent 635f21c
commit cd11c3a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/cigaradvisor/blocks/articleheader/articleheader.js b/cigaradvisor/blocks/articleheader/articleheader.js
@@ -7,6 +7,9 @@ export default async function decorate(block) {
   const picture = block.querySelector('picture');
   decorateSeoPicture(picture, window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1));
   imageWrapper.append(picture);
+  const img = picture.querySelector('img');
+  const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
+  picture.style.paddingBottom = `${ratio}%`;
   const articleInfo = document.createElement('div');
   articleInfo.classList.add('article-info');
   const categoryLink = block.querySelector('p.category').innerText;

diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
@@ -16,7 +16,7 @@ import {
 import { loadReturnToTop } from '../blocks/return-to-top/return-to-top.js';
 import addLinkingData from './linking-data.js';
 
-const LCP_BLOCKS = [];
+const LCP_BLOCKS = ['hero', 'articleheader'];
 const AUTHOR_INDEX_PATH = '/cigaradvisor/index/author-index.json';
 const CATEGORY_INDEX_PATH = '/cigaradvisor/index/category-index.json';
 const ARTICLE_INDEX_PATH = '/cigaradvisor/index/article-index.json';