2

I have a views page that shows all the latest articles that were posted. I want to show case the latest article in a different div on it's own, and then have my loop with all the other articles.

This is my code for the loop, which is in the node--view.html.twig file -

    <div{{ attributes.addClass('col-4')}}>
      <div class="news-card">
        <img src="{{ file_url(node.field_image.entity.fileuri) }}">
        <h3>{{ node.label }}</h3>
        {% set text = content.body|render|striptags %}
        <p>{{ text|length > 100 ? text|slice(0, 120) ~ '...' : text }}</p>
        <a href="{{ url }}" class="btn black-btn">Read More</a>
      </div>
    </div>

and in my views-view-unformatted.html.twig file I have -

<h2>{{ view.getTitle() }}</h2>
  {% if title %}
      <h3>{{ title }}</h3>
  {% endif %}
<div class="row news-row">
{% for row in rows %}
  {%
    set row_classes = [
      default_row_class,
    ]
  %}
    {{- row.content -}}
  {% endfor %}
</div>

2 Answers 2

3

You could also do

views-view-unformatted.html.twig

Note: add the view name if you want to target a specific view, views-view-unformatted--view-name.html.twig

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
{% set count = 1 %}
{% for row in rows %}
  {%
    set row_classes = [
    default_row_class ? 'views-row',
  ]
  %}
  {% if count == 1 %}
    {%  set row_classes = row_classes|merge(['first-row']) %}
  {%  endif %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{- row.content -}}
  </div>
  {% set count = count + 1 %}
{% endfor %}

and then in css

.first-row { ... }

OR alternatively follow How can I get numbered classes on rows?

and

.views-row-1 { ... }
2
  • 1
    This should be the accepted answer. When someone's new here, i always assume Drupal newcomers as well (even when this could be totally wrong). So i try to give answers that are possible without touching any code... ;)
    – Volker
    Dec 23, 2020 at 12:56
  • 1
    +1 for being a good sport @Volker
    – No Sssweat
    Dec 23, 2020 at 12:57
3

One possible solution ist to create two views. One for your featured content (only 1 item or as much you want to feature) and the second one for the rest with an offset. You can set the offset under pager options (items to skip).

5
  • Can I display both views on one page?
    – jfc
    Dec 22, 2020 at 21:38
  • 3
    Yes, just output them as blocks. Alternatively you can use an 'attachment' as display and attach it before or after a page display.
    – Volker
    Dec 22, 2020 at 21:42
  • Do you know if I can edit the attachment on a different twig file? Before the attachment the debugger suggets - node--view--news--attachment-1.html.twig Right now my file is node--view.html.twig, and it's still loading that even if I create a node--view--news--attachment-1.html.twig file. Do you know if I can have 2 files? 1 for the attachment, 1 for my other content?
    – jfc
    Dec 22, 2020 at 22:53
  • 2
    @jfc You can definitely have separate twig files for each view display. If it's not being picked up, double-check the file name, clear the cache, and so on. The pattern is usually views-view--VIEW_MACHINE_NAME--DISPLAY_MACHINE_NAME.html.twig. Dec 23, 2020 at 1:35
  • While this answer works, not the best, you're making things more complicated than it needs to be by having to manage two views.
    – No Sssweat
    Dec 23, 2020 at 12:30

Your Answer

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

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