diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css index f22e77e1..a7a96267 100644 --- 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 index ee980e02..db34d461 100644 --- 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 index 96fb1770..fa44ccdb 100644 --- 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 index 0e30054a..3286a29d 100644 --- 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; - } -} \ No newline at end of file