Link block linked to a CMS link has no option to open in a new tab

Community resources General
1

I would like to open a link in a new tab, but this link is a value from CMS.
When I link the CMS with the Link Block, i lost the option to open the link in a new tab.

The first screenshot shows the option without CMS link and the second screenshot shows after I link the CMS

image

image

1 Like
2

Hi Igor, I’m seeing a very different set of controls;

image
image1441×757 212 KB

  1. Link block selected
  2. Settings tab
  3. Using a url link
  4. CMS-bound
  5. Open in new tab is visible

I can’t tell if you’re doing this in a collection list or on a collection page, but I’ve checked both. Your UI looks closer to the one I remember from about 2 years ago.

Very odd. Might contact support on this one, or at least share a readonly link to your project and a video to show what you’re seeing.

3

I forgot to mention something important: the link block is within a custom component. If I use a link block outside of the component, then I have the same settings as yours. I’m sharing a read-only link above; the link is the one with an image of the Instagram logo.

image

https://preview.webflow.com/preview/executei?utm_medium=preview_link&utm_source=designer&utm_content=executei&preview=9888822b755fad8f903daa49146f3d2c&pageId=65ff2dba4bf5714c072590fc&itemId=661163e72e87885e52c80c84&locale=en&workflow=preview

4

That is important ;)

Can’t say but first thing I’d try is to establish your open in new window settings before you link it to a property. It may preserve your settings and then just allow the URL itself to be overridden.

If not, you’ll need to use custom code to find and update those.

Or use something like SA5 Dynamic Attributes feature to set x-target = _blank so that the link will open in a new tab.

2 Likes
5

I had to use the the SA5 solution and it worked, thanks a lot @memetican!

1 Like
6

I know this has technically been resolved, but there’s also a little code snippet you can add to your site settings code that detects if a link goes to an external site and opens it in a new tab.

  1. You won’t have to remember to do that manually for each external link
  2. This resolves the issue of linked components in CMS items not having the option to do it manually
<!-- DETECT IF LINK GOES TO EXTERNAL WEBSITE TO OPEN IN NEW TAB -->
<script>
  document.addEventListener("DOMContentLoaded", () => {
    // Loop through all <a> tags on the page
    document.querySelectorAll("a[href^='http']").forEach(link => {
      try {
        const linkUrl = new URL(link.href);
        // If the link’s hostname is different from the current site’s hostname…
        if (linkUrl.hostname !== window.location.hostname) {
          link.setAttribute("target", "_blank");
          link.setAttribute("rel", "noopener noreferrer");
        }
      } catch (e) {
        // If URL parsing fails (e.g. malformed href), just skip it
      }
    });
  });
</script>