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>
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 '20 at 12:56
  • 1
    +1 for being a good sport @Volker – No Sssweat Dec 23 '20 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 '20 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 '20 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 '20 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. – Patrick Kenny Dec 23 '20 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 '20 at 12:30

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.