Feature/image cta (#31)

* image-cta --------- Co-authored-by: Bryan Stopp <[email protected]>
hlxsites · Dec 4, 2023 · a331621 · a331621
1 parent 240a314
commit a331621
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css
@@ -0,0 +1,22 @@
+.imagecta.block > a {
+  display: block;
+  margin: 0 auto;
+}
+
+.imagecta.block > a picture {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.imagecta.block > a picture > img {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js
@@ -0,0 +1,13 @@
+export default async function decorate(block) {
+  const children = [];
+  const anchor = document.createElement('a');
+  const picture = block.querySelector('picture');
+  const img = picture.querySelector('img');
+  const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
+  picture.style.paddingBottom = `${ratio}%`;
+  anchor.style.maxWidth = `${img.width}px`;
+  anchor.append(picture);
+  anchor.setAttribute('href', block.querySelector('a').getAttribute('href'));
+  children.push(anchor);
+  block.replaceChildren(...children);
+}