Redirect in new browser window

Hello,

I have an element in a menu that is redirecting to a new website.
It is defined with a folder, a 'default.md' file inside it and a redirect in the header:
redirect: 'http://yiking.xyz'

How can i do to open this link in a new window (ie. using target=_blank )?
I can't filter the links inside the menu to change the <a> option because it appears as a normal link to an internal webpage. Can i use some grav magic?

Thanks in advance for any tips,
n

Hi Nix,

I'm using Grav for a few days and my hack to external links in the (sub)menu(s) is this, using the default Quark theme in 1.4.6. I think it is usable in other themes as well.

Install the plugin "external_links" and change /user/themes/quark/templates/partials/navigation.html.twig to the following to make external links work in the menu:

{% macro nav_loop(page) %}
{% for p in page.children.visible %}
{% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
{% if p.children.visible.count > 0 %}
<li>
<a href="{{ p.url }}" class="{{ active_page }}" target="{{ p.header.external_links.target }}">
{{ p.menu }}
{% if p.header.external_links.target %}
<imgX src="{{ url('plugin://external_links/assets/images/link.png') }}" />
{% endif %}
</a>
<ul>
{{ _self.nav_loop(p) }}
</ul>
</li>
{% else %}
<li>
<a href="{{ p.url }}" class="{{ active_page }}" target="{{ p.header.external_links.target }}">
{{ p.menu }}
{% if p.header.external_links.target %}
<imgX src="{{ url('plugin://external_links/assets/images/link.png') }}" />
{% endif %}
</a>
</li>
{% endif %}
{% endfor %}
{% endmacro %}

<ul {{ tree ? 'class="tree"' : '' }}>
{{ _self.nav_loop(pages) }}
</ul>

It does leave extra 'target=""' entries in the source, so if you care about that extra overload, add some more checks in that snippet.

PS: strip the last X from that <img tag... this post got refused because I'm new on the forum...

Hope it helps. Kind regards, Elko 73's

Nice formatting filters these guys have 😛

{ % if p.header.external_links.target % }
< img src="{ { url( 'plugin://external_links/assets/images/link.png' ) } }" / >
{ % endif % }

@nix Yes you can use some Grav magic using the uri object

The following sample is using Quark as theme and should be adapted to your own theme.

• In partials/navigation.html.twig, add uri as extra parameter to the macro and its calls:
  TWIGCopy

  line 1: {% macro nav_loop(page, uri) %}
  line 10: {{ _self.nav_loop(p, uri) }}
  line 24: {{ _self.nav_loop(pages, uri) }}
  

  This is needed because template variables are not available inside macro's. See Twig docs.

• Change the else into:
  TWIGCopy

  {% else %}
      {% set target = (uri.host == uri.initializeWithUrl(p.header.redirect).host) ? '' : 'target="_blank"' %}
      <li>
          <a href="{{ p.url }}" class="{{ active_page }}" {{ target }}>
              {{ p.menu }}
          </a>
      </li>
  {% endif %}
  

Hope this helps...

NB. I guess the title of your post should be "Redirect in new browser window". If so, you might want to change the title for clarity...

Thanks for your answer.
I am not using a macro but a loop in my menu because it is divided in category.
For example I have:

<ul class="pure-menu-list">
  {% for page in taxonomy.findTaxonomy({'category':'performance'}).order('default')|reverse %}
    {% set current_page = (page.active or page.activeChild) ? 'pure-menu-item pure-menu-selected' : 'pure-menu-item' %}
    <li class="{{ current_page }}"><a href="{{ page.url }}" class="pure-menu-link"> {{ page.menu }}</a></li>`
  {% endfor %}`
</ul>

I am not sure how I can adapt your codes to this kind of taxonomy loop?

Would you mind sharing what you have tried so far?

I've inserted your code inside Quark's base.html.twig and added the gist of my solution and it works fine in my use-case.

NB. When you wrap your code lines inside ``` (aka triple graves or back-ticks) legibility will be much better.

I've tried with the external_links plugin doing:

<ul class="pure-menu-list"> 
    {% for page in taxonomy.findTaxonomy({'category':'performance'}).order('default')|reverse %}
        {% set current_page = (page.active or page.activeChild) ? 'pure-menu-item pure-menu-selected' : 'pure-menu-item' %}
        {% set target = (page.header.external_links.target) ? '_blank' : '' %}
        <li class="{{ current_page }}"><a href="{{ page.url }}" class="pure-menu-link" target="{{target}}">. {{ page.menu }}</a></li>
    {% endfor %}
</ul>

does not worK (all target are empty).

Regarding your solution, I don't know how to get the extra uri variable inside the for loop. I'll try a few things.

I have something working:

<ul class="pure-menu-list"> 
    {% for page in taxonomy.findTaxonomy({'category':'performance'}).order('default')|reverse %}
        {% set current_page = (page.active or page.activeChild) ? 'pure-menu-item pure-menu-selected' : 'pure-menu-item' %}
        {% set target = ('http' in page.header.redirect) ? 'target="_blank"' : '' %}
        <li class="{{ current_page }}"><a href="{{ page.url }}" class="pure-menu-link" {{target}}>. {{ page.menu }}</a></li>
    {% endfor %}
</ul>

I check if http is in the redirection of the header? if true I add target="_blank". Cool!
Thanks everyone.