I have search view UI with two filter criteria.

Basically, to output contents in the page we write {{ page.content }}, which I currently used.

What I want is to slice the page.content in divs. Search filter will be displayed in, say <div class="search"></div> and its result will be on <div class="results"></div>.

I found this: Twig Field Value, but confused how to implement it the right way.

In the image below, they are in called in {{ page.content }}, so I want to separate the search filter and its result.

Exposed filter with result

Anyone knows how to properly write search UI and its specific fields(as an output) with twig format?

  • Is your page a view with an exposed filter? Then use views-view.html.twig. There you find {{ exposed }} for the search div and {{ rows }} for the results div. – 4k4 Feb 16 '17 at 17:40
  • Right, it is a view with exposed filter. But how can I call {{ exposed }} and {{ rows }} separately in my front-page. Thanks – John Rey Tanquinco Feb 16 '17 at 18:04
  • You have to copy views-view.html.twig to the template folder of your theme and rename it to views-view--view-name.html.twig – 4k4 Feb 16 '17 at 18:08
  • He's right, you can't do this from page.html.twig level - it must be the Views level. – Kevin Feb 16 '17 at 18:11
  • I already have the template folder included in my theme. And its actually reading the views-view.html.twig. Also, I'm using page--front.html.twig. What I'm worried about is how each code be called so I can place it in different divs in my front page. PS: I added an image and details on thread. – John Rey Tanquinco Feb 16 '17 at 18:17

For example if you use the preinstalled view Search Content, then put the file views-view--search-content.html.twig in the template folder of your theme and add the div containers:

  set classes = [
    dom_id ? 'js-view-dom-id-' ~ dom_id,
<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {{ title }}
  {{ title_suffix }}

  {% if header %}
      {{ header }}
  {% endif %}

  <div class="search">
    {{ exposed }}
    {{ attachment_before }}

  <div class="results">
    {{ rows }}
    {{ empty }}
    {{ pager }}

  {{ attachment_after }}
  {{ more }}

  {% if footer %}
      {{ footer }}
  {% endif %}

  {{ feed_icons }}
  • Yes, right... I can follow your instruction and I have separate them into divs. But in my case I have a div class intro(with screensize background image) and body(below the intro with white background) in the page. Since I am calling {{ page.content }} to display the view in the front page, I can't still properly implement it. I get confused. I want that {{ page.content }} be displayed in class intro but only with {{ exposed }} field and call again {{ page.content }} in the body class but only with {{ rows }} field. Thanks – John Rey Tanquinco Feb 17 '17 at 7:56
  • Do you have enabled twig debug? Probably you can't do this all in one template and when you use twig debug you can better see where to place the custom markup. – 4k4 Feb 17 '17 at 8:00
  • Yes, I have my twig debug enabled. I can of course separate them from view template through divs and do some CSS to place the rows below but it's not the right way as both is called in the intro class. – John Rey Tanquinco Feb 17 '17 at 8:05
  • Alright, I'll see what I can do. Will update this thread as soon as I properly implemented it. Thanks! :D – John Rey Tanquinco Feb 17 '17 at 8:07
  • 1
    Great, the only problem with twig debug is, that it doesn't show the names you have available for views templates. That's the reason why I've chosen this example how you can add the view name to it. – 4k4 Feb 17 '17 at 8:11

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.