0

In D8, I want to display a view through quicktabs. For this, at first I have created a view file and call the view through QT. The view is displays well through QT. Now, I want to change the look & feel of the view. Please look into the screen of view which I've created before.enter image description here

Now, based on the below theme suggestions I created the file block--quicktabs-block--gallery-tab.html.twig to override and place it under the "templates" folder in my theme.

<!-- FILE NAME SUGGESTIONS:
   * block--quicktabsgallerytab.html.twig
   * block--quicktabs-block--gallery-tab.html.twig
   * block--quicktabs-block.html.twig
   * block--quicktabs.html.twig
   x block.html.twig
-->

When I write something fixed like "Hello Test" in the block--quicktabs-block--gallery-tab.html.twig, its showing well. However, when I tried to do something dynamic coding like below, nothing appeared.

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
{% for key, row in rows %}
  {% if key in rows_with_tabs %}
    {{ tabs }}
    <div class="quicktabs-main" id="quicktabs-container-{{ quicktab_id }}">
  {% endif %}
  {% if key in rows_with_page_starts %}
    {% for page_key, page in rows_with_page_starts %}
      {% if key == page %}
        <div class="quicktabs-tabpage{{ page_key > 0 ? ' quicktabs-hide' : '' }}" id="quicktabs-tabpage-{{ quicktab_id }}-{{ page_key }}"> <!-- start of tbapage -->
        {% set page_number = page_key %}
      {% endif %}
    {% endfor %}
  {% endif %}
  {{ row.content }}
  {% if key in rows_with_page_endings %}
    {# close .quicktabs-tabpage #}
    </div> 
  {% endif %}
  {% if key == last_index %}
    {# close .quicktabs-main #}
    </div> 
  {% endif %}
{% endfor %}

Am I overriding the correct file? Any suggestion?

PS: after implementing the template file as said above, the suggestions looks like:

<!-- FILE NAME SUGGESTIONS:
   * block--quicktabsgallerytab.html.twig
   x block--quicktabs-block--gallery-tab.html.twig
   * block--quicktabs-block.html.twig
   * block--quicktabs.html.twig
   * block.html.twig
-->
6
  • Seems correct, is your twig template called ? did you rebuild cache ? is the FILE NAME SUGGESTIONS: changed with x next to your template ?
    – GiorgosK
    Mar 29, 2019 at 7:58
  • Yes, I saw that anything fixed like "XYX or TEST" within the view gets printed. I re-build the cache too. I can't understand about "changed with x next to your template". I just created a file named - block--quicktabs-block--gallery-tab.html.twig as said above. Mar 29, 2019 at 8:02
  • Than the FILE NAME SUGGESTIONS should have a line like this x block--quicktabs-block--gallery-tab.html.twig the x should be on the line of your template, meaning it is using this template
    – GiorgosK
    Mar 29, 2019 at 8:09
  • Im new to drupal 8. Can you send me sample code for it? Means how to write it? Mar 29, 2019 at 8:16
  • I am not telling you how to write something. I am asking you to observe in your HTML code. In you sample FILE NAME SUGGESTIONS: above the x is next to block.html.twig. Did it change place after you included your template and cleared cache ? Its an indicator of which twig template is used.
    – GiorgosK
    Mar 29, 2019 at 8:24

1 Answer 1

0

As Sunil says you are probably using view variables in your block template

Perhaps look for another template to override further down in order to find a views template to override and use your html/twig code

enter image description here

Here is what I would do.

Find the first template inside views-view.html.twig in my case it is views-view-unformatted.html.twig (red arrow above) and copy it in your theme templates folder. Clear cache and make sure it is used and than explore the possibility of renaming it to be specific and used only for the quicktabs block.

See here for more info on how to name your templates

2
  • Yes, I'm using View in QT as said in my question title. Should I first template the view like views-view--gallery--block-1.html.twig ? Mar 29, 2019 at 9:47
  • I can't know which template name you have to use without looking at the html comments of you code, find the first template inside views-view.html.twig as I show in my red arrow above and copy it in your theme. Make sure it is used (after clear cache) than explore renaming it to be specific to your quicktabs.
    – GiorgosK
    Mar 29, 2019 at 10:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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