Open link in new tab button for non-coders

Continuing the discussion from My Panel Wishlist:

Don’t know if this is the best way to add to the panel wishlist, but had a client today ask for a “popup: true” checkbox in the kirbytext link builder button. That way they don’t have to go into the code and remember how to make some pages open in a new tab.

Thanks.

Hm, what is the Kirbytext link builder button?

Sorry, that’s probably not the right name. Here’s a screenshot with idea overlaid:

1 Like

Yeah, why not? :wink:
I think this should be a feature that must be enabled manually in the blueprint however (clients love to click that kind of checkbox even if it doesn’t make any sense).

Would you mind opening an issue in the Panel GitHub repo about this?

1 Like

Just opened one. Thanks Texnixe and Lukas!

Guess you want something like this?

…see the link-target in the middle-right-corner…

I added this option to all the anchors in my sites; it works pretty cool! :slight_smile:

@1n3JgKl9pQ6cUMrW If you would like to share your solution, it would be helpful if you post your code instead of posting a screenshot?

I guess you are adding a list of links via a structure field here? If so, this is different from adding a link in a textarea field via the link button.

1 Like

Yeah, it’s a simple fork of the core - nothing special really.

The screenshots shows the target-option in a modal, but it works for all anchors if you want to.

It’s just a proof of coding, nothing special.

- update -

English is not my native language, but I wanted to make clear I only posted the screenshot in order to “demo” my solution; maybe this is what the OP (opening poster) wanted / mentioned?

Thanks @1n3JgKl9pQ6cUMrW. I can see where this is useful in a structure field, but I would like this to also be in the link button at the bottom of a textarea field. Please see screenshot below.

I just started to implement this feature. And then realized. How would you represent this in the different Kirbytext/markdown inserted? We got:

<url>

(link: url text: text)

[text](url)

Ideas?

Well:

(link: url text: text popup: yes)
1 Like

I’m very critical with this feature as a default. target=_blank is something you should use very carefully and rather convince clients not to use it in the first place. I know from my own clients that this wish comes up over and over again.

In most cases I prefer to solve this with javascript for all external links if clients really want that.

But if you really need the button, copy the textarea field from the panel source and create your own custom textarea field. You can even keep the textarea name for it. Since 2.2.3 fields now have their own ways of adding modals, so you can modify the buttons as well as the modal and add the additional form field.

8 Likes

When do we need to use target blank?

Refering to this, almost never… Maybe send this link to customers who ask for it?

1 Like

Thanks Bastian and everyone. I’ll remind my boss about this, but I’ll probably go the js route like you suggested as it is the general belief that we need this feature where I’m working now.

For the js solution, do you just look for any link that has an href pointing to another domain?

Yes, I had a rather old script in place for this, but some Stackoverflowing brought me to a new much more elegant solution:

$('a').each(function() {
  if(this.host !== window.location.host) {
    $(this).attr('target', '_blank');
  }
});
1 Like

I didn’t know about the host attribute for links until now. This is really cool and powerful. I especially love that it’s in the spirit of progressive enhancement. If your clients really WANT it, you can add it, but it won’t modify your code. So it’s super easy to strip out, once your clients start to understand the web better :slightly_smiling:

This is what I like about this place. “Come to Kirby: be a better programmer.” Thanks Bastian!

4 Likes

I use a slightly different script then @bastianallgeier, but maybe you or someone else can use it.

The advantage: The script doesn’t add a “_blank” attribute to mailto: or tel: links

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');
1 Like

Hi there, This is what I’m looking for. Where would one add that code Ti_Gr?

@sportis Either within script tags in your footer or in a separate js file that you then load in the footer.