imagecta link fix (#41)

* imagecta link fix * refactored * Update styles.css * refactoring code
hlxsites · Dec 11, 2023 · 116744d · 116744d
1 parent ec00e88
commit 116744d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 20 deletions.
diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css
@@ -20,3 +20,28 @@
   object-fit: cover;
   object-position: center;
 }
+
+.section[data-layout="50/50"] .imagecta-wrapper{
+  display: flex;
+  flex-basis: 100%;
+}
+
+.section[data-layout="50/50"] .imagecta.block{
+  display: flex;
+  flex-basis: 100%;
+}
+
+.section[data-layout="50/50"]  .imagecta.block > a{
+  flex-basis: 100%;
+}
+
+@media screen and (min-width: 1200px) {
+  .section[data-layout="50/50"] .imagecta.block>a img {
+    border: 1px solid #000;
+  }
+
+  /* removing border for 2 column videos section */
+  .two-column-section[data-layout="50/50"] .imagecta.block>a img {
+    border: none;
+  }
+}
diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js
@@ -1,3 +1,5 @@
+import { isExternal } from '../../scripts/scripts.js';
+
 export default async function decorate(block) {
   const children = [];
   const anchor = document.createElement('a');
@@ -7,7 +9,10 @@ export default async function decorate(block) {
   picture.style.paddingBottom = `${ratio}%`;
   anchor.style.maxWidth = `${img.width}px`;
   anchor.append(picture);
-  anchor.setAttribute('href', block.querySelector('a').getAttribute('href'));
+  const link = block.querySelector('a').getAttribute('href');
+  anchor.setAttribute('href', link);
+  anchor.setAttribute('target', isExternal(link) ? '_blank' : '_self');
+  anchor.setAttribute('title', img.alt);
   children.push(anchor);
   block.replaceChildren(...children);
 }
diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
@@ -93,6 +93,15 @@ export function decorateMain(main) {
   buildTwoColumnGrid(main);
 }
 
+export function isExternal(path) {
+  try {
+    const url = new URL(path);
+    return window.location.hostname !== url.hostname;
+  } catch (error) {
+    return false;
+  }
+}
+
 /**
  * Loads everything needed to get to LCP.
  * @param {Element} doc The container element

diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
@@ -113,22 +113,3 @@ main .section[data-layout="50/50"] .right-grid > div{
   padding: 10px;
 }
 
-main .section[data-layout="50/50"] .imagecta-wrapper{
-  display: flex;
-  flex-basis: 100%;
-}
-
-main .section[data-layout="50/50"] .imagecta.block{
-  display: flex;
-  flex-basis: 100%;
-}
-
-main .section[data-layout="50/50"]  .imagecta.block > a{
-  flex-basis: 100%;
-}
-
-@media screen and (min-width: 1200px) {
-  main .section[data-layout="50/50"] .imagecta.block>a img {
-    border: 1px solid #000;
-  }
-}