You are here

How to create a View with a featured item and a list that excludes the featured item, Drupal 8

A super common pattern for websites is a list of content with one (or more) featured items (say a news article), then some more items, excluding the featured one. The featured item might display at the top and/or larger than the rest.

Here's an example of how to achieve that in Drupal 8 using Views. Note that there are many ways of flagging featured content. In this case, we want to display the items on the front page. We have a Homepage content type with an entity reference field called "Featured News Article". The field is a reference to the News content type, and is limited to one item. This is an easier way for content editors to choose the featured content than having to go to the individual News node and set a flag on it, and enforces that only one is selected at a time without having to add special modules.

Our goal is a block which is a list of 4 news articles, one which is the article selected in the Homepage featured news article field, and three which are simply the latest ordered by most recent, excluding the featured one. I won't go through all the nuances of the View setup; assuming you know the basics of Views, we'll just focus on the featured part.

First, add the entity reference field to the content type where you want to display your list of items. Make sure you've created some content of the type you are displaying, and that you've added at least one in the entity reference field, so you have data to test with.

Next, we create a view of content, type News, sorted by newest first. Select both the "create a page" and "create a block" settings (assuming you want a page view that is a list of all the content, if not, feel free to skip that; conversely, maybe you need a page view with a featured item, in which case, skip the block).

Once we've created the view, we will add another display, an attachment. In "Attachment settings", choose the display you want the attachment to be attached to. In this case, we choose the block display. You can also choose whether the attachment displays before or after its parent, or both.

Next, we are going to add a couple of relationships to the view. Relationships are a way of passing information to the view that normally it wouldn't know about, in this case, what is in that "Featured News Article" field. As the field is on the Homepage content type, and this is a view of News, we need to add a relationship to that field so Views can do something with it. These relationships should be added to both the attachment and the display it's attached to.

We add two relationships, "Content using field_featured_news_article" and "Content referenced from field_featured_news_article". Once they're added, make sure the "Content using
field_featured_news_article" (which will display as "field_featured_news_article") is first, and rearrange the relationships if it's not. Click the "field_featured_news_article: Content" relationship to edit its settings, and under "Relationship", click the dropdown and choose "field_featured_news_article".

Now, for the attachment only, in the "field_featured_news_article: Content" settings, select "Require this relationship" (make sure you're overriding the default settings for this attachment only). In the view preview, you should now see the article you chose to feature in the attachment.

Next, we have to exclude the featured article from our block display. Making sure we're overriding the defaults for this display only, we add a filter of type "Featured News Article (field_featured_news_article)". In the filter configuration, under "Relationship", choose "field_featured_news_article: Content", then under "Operator", select "Is empty (NULL)". This way, we're telling it to exclude any News content that is referenced by that field.

If everything has been set up correctly, in the view preview you should see your featured article under "Attachment before" and the rest of however many articles you've chosen to display under "Content", excluding the featured one. Save your view and you're good to go!

Add new comment

Full HTML

  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.