We have a link field (field_link) on the Basic page content type. We wanted to add the link as an anchor link by putting current-page#section1 into the Link field, but it is not current.

What can we do to populate a link field such that it take the current URL and add #section1?

This is how the link field is used in the twig template

{% set cta = content.field_link.0 %}
<a href="{{ cta['#url'] }}'>
  <i class="fa fa-car" aria-hidden="true"></i>
  <div> {{ content.field_name }} </div>
  <div> {{ cta['#title'] }}</div>

Current output

<a href="/current/page/path'>
  <i class="fa fa-car" aria-hidden="true"></i>
  <div> Professionally facilitate standardized vortals whereas high-payoff e-business. Distinctively productize high. </div>
  <div> Download </div>

Expected output

<a href="/current/page#section1'>
  <i class="fa fa-car" aria-hidden="true"></i>
  <div> Completely brand cross-platform "outside the box" thinking through visionary supply. </div>
  <div> Download</div>
  • You can't have <button> element inside <a> element, not even in HTML5. You have to style the <a> to look like a button if that is why you did that. I'm not sure about the twig link output. Are you only trying to style the Link field output? – prkos Jun 5 '18 at 23:36
  • @prkos we are attempting to make the entire elements inside the <a> clickable using the link and label provided in the link field. how would we do that so that if they put #section1 it functions an anchor text? we updated the html to use <div> instead of <button> – usernameabc Jun 5 '18 at 23:45
  • 1
    Is your goal to always render the same pattern, current page + the same identifier on the View Node? And you don't need anything as input on the Node Create/Edit page? If yes, then you don't need the Link field at all, just add the code in the twig template. If you do need to use the Link field try reading these answers: How to get the valid URL of a Link field from within a Twig template?. – prkos Jun 7 '18 at 0:25
  • @prkos i have posted the answer from the question that solved my problem. Interestingly enough i had to use |render – usernameabc Jun 7 '18 at 16:16

Drupal will automatically do that if you only enter #section1 into the Link URL.

| improve this answer | |
  • i added how it is being used in the twig template to provide more context. It is basically displaying the current page without the #section1 – usernameabc Jun 5 '18 at 22:54
  • I think @prkos point is about what you are entering in the field. Are you typing /current/page/path#section-1, or just #section-1? – mediaashley Jun 6 '18 at 9:37
  • @mediaashley i have attempted to add both /current/page#section-1 and #section-1. The #section-1 is always removed in both situation. – usernameabc Jun 6 '18 at 16:31
  • For me adding the identifier works as expected. But it seems you might be after something else, since you added the twig code output. I'll address this in a comment to your question. – prkos Jun 7 '18 at 0:15

The only way i got this to work is by using an answer found How to get the valid URL of a Link field from within a Twig template?, thanks to @prkos

{{ content.field_my_link[0]['#url']|render }}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.