Hand-picked content at the top of a chronologically sorted view: Option 2, Entity queues

<p><span class="drop-cap">E</span><a href="https://www.drupal.org/project/entityqueue">ntity queues</a> are awesome for the following reasons:</p> <ul> <li>Your content editor gets <strong>a single administration page</strong> to set up the featured articles.</li> <li>The selected articles <strong>can be ordered</strong> manually in that page.</li> <li>The queue admin page allows the editor to add articles through a search (here,  searching by title).</li> <li>As an admin, you can give <strong>permissions</strong> to your content editor to just edit the queue contents, and not mess up the queue configurations.</li> <li>Entity queues play nicely with <strong>views</strong>.</li> </ul> <p>As I said on the <a href="/blog/hand-picked-content-top-chronologically-sorted-view-option-1-make-it-sticky">previous <em>one way or another</em> post</a>, the requirement here is to display articles by created date, and allow our content editors to override that order with an entity queue.</p> <p>For this tutorial, I'll use the same articles that I created for the previous one. </p> <p><strong>Here’s how the functionality is done: </strong>First we create a View as an example, called  “Animals”, that displays articles tagged with the “Animals” taxonomy term.</p> <p><img alt="Add view backend page, displays content of type Article tagged with our Animals tag, as a page, displays 2 elements" data-entity-type="file" data-entity-uuid="2b1198d0-c006-41f0-98b2-3113461eb138" src="/sites/default/files/inline-images/entity_01_create_view.png" width="915" height="1204" loading="lazy" /></p> <p>So far pretty standard stuff. We set up the order by <em>authored on</em> date, and limit the amount of results to 2 (I only created 5 articles, bear with me). Here’s how the view looks at first glance:</p> <p><img alt="View edit page. Displays the recently created view and the preexisting contents that match the criteria." data-entity-type="file" data-entity-uuid="53d0c8e0-fad7-4a64-be56-c3dbd5b45a7a" src="/sites/default/files/inline-images/entity_02_view.png" width="915" height="2092" loading="lazy" /></p> <p>Notice that we see <em>The polar bear</em> and <em>The mountain lion</em> first, in that order. That means those are the last generated contents, since the view is ordering by created date. There are also other contents, The rabbit, The elephant and The tiger, but we don’t see them yet, because the view only allows 2 elements to be displayed at any time (on purpose).</p> <p>We must create our entity queue at /admin/structure/entityqueue (if you haven’t, remember to enable the module first!) next, and set our new "My favorite animals" queue up:</p> <p><img alt="Configuration page for the new Queue. Reference method is set to default, Article, Sort by Title Ascending." data-entity-type="file" data-entity-uuid="b4324c63-f617-4ec6-a668-917c23be772e" src="/sites/default/files/inline-images/entity_03_queue.png" width="915" height="836" loading="lazy" /></p> <p><img alt="On the queue settings tab in the Queue configuration page, set the queue to a minimum of 0 elements and maximum of 2." data-entity-type="file" data-entity-uuid="3f4a20c7-5db9-4ec6-be62-b98c47fe560a" src="/sites/default/files/inline-images/entity_03_queue_settings.png" width="919" height="380" loading="lazy" /></p> <p>Notice that we can change the Reference method (awesome feature, I’ll probably do another post about it), restrict the queue to a single content type, and even define how it will sort the results for us when searching by title.</p> <p>To be able to test this as I develop, I added one element to the queue, The tiger:</p> <p><img alt="The only element in the queue is the Article &quot;The tiger&quot;" data-entity-type="file" data-entity-uuid="e8122e8d-0e0f-4e1b-8ebf-39e97583b3b8" src="/sites/default/files/inline-images/entity_04_queue_tiger.png" width="917" height="417" loading="lazy" /></p> <p>Now that we set that up, <strong>the next step is to tell the view that we want to use an entityqueue</strong>, and to give it priority when displaying the contents. The way to do that is by first adding a relationship on or view (third column on the view page) like on the screenshot:</p> <p><img alt="On the view page, on Relationships, add Content queue relationship" data-entity-type="file" data-entity-uuid="e4f1a627-129e-4f94-b7de-c9fe3a760530" src="/sites/default/files/inline-images/entity_05_view_queue.png" width="915" height="608" loading="lazy" /></p> <p>We must select here which queue we’re using (it’s easy here, there is only one), and we get the option to force it… we don’t want that now, we want our content editors to be able to skip filling the queue.</p> <p><img alt="Limit the results to the queue we created earlier." data-entity-type="file" data-entity-uuid="e0fa860a-1bfc-4eec-bb45-3566dc736f68" src="/sites/default/files/inline-images/entity_06_view_queue.png" width="702" height="358" loading="lazy" /></p> <p>Next, since we’re planning on displaying our queue first, and then fill the rest of the view with chronological content, we need to add <strong>two</strong> new sort criteria: display the elements that are in the queue first (In content queue, descending), and display those in the order of the queue (Content queue position, ascending).</p> <p> </p> <p><img alt="New sort criteria for the view: &quot;Content queue position&quot; and &quot;In content queue&quot;" data-entity-type="file" data-entity-uuid="6131cc2c-443a-4c4a-a387-3c1eb26132ec" src="/sites/default/files/inline-images/entity_07_sort.png" width="915" height="608" loading="lazy" /></p> <p><img alt="Position in queue must be sorted by ascending" data-entity-type="file" data-entity-uuid="cbbd5fb7-f53c-40c7-b3fc-05840b64aa91" src="/sites/default/files/inline-images/entity_07_sort_position.png" width="692" height="353" loading="lazy" /></p> <p><img alt="Belonging to the queue must be sorted by descending" data-entity-type="file" data-entity-uuid="f01f9511-6f72-46ef-860a-758d02eb30ec" src="/sites/default/files/inline-images/entity_07_sort_in_queue.png" width="691" height="357" loading="lazy" /></p> <p>And finally rearranged the sort criteria, so that the view actually sorts by my queue first:</p> <p><img alt="Sort criteria order is &quot;In content queue - desc&quot;, then &quot;Content queue Position - asc&quot; and finally &quot;Authored on - desc&quot;" data-entity-type="file" data-entity-uuid="bc43117f-968f-42ad-99fa-87bf54b250d8" src="/sites/default/files/inline-images/entity_08_rearrange_sort.png" width="915" height="608" loading="lazy" /></p> <p>Now to the moment of truth… as expected, when we check the results of the view we see The tiger first and then the first chronological element, The polar bear:</p> <p><img alt="Final configuration of the view. The preview shows the tiger first, the polar bear second." data-entity-type="file" data-entity-uuid="b55ae02c-cc14-4a19-984e-c98e0e86e532" src="/sites/default/files/inline-images/entity_09_result.png" width="915" height="1101" loading="lazy" /></p> <p>If I add another element to the nodequeue (the elephant) right after the tiger, the preview of the view changes successfully:</p> <p><img alt="The queue now has &quot;The tiger&quot; and &quot;The elephant&quot; articles, in that order." data-entity-type="file" data-entity-uuid="c862cfb6-607a-4785-ac54-08edef0ffcbf" src="/sites/default/files/inline-images/entity_10_queue.png" width="974" height="366" loading="lazy" /></p> <p><img alt="The preview of the results now shows the elements of the queue only." data-entity-type="file" data-entity-uuid="2ec6b843-b732-4c05-966b-2d47de7f11d8" src="/sites/default/files/inline-images/entity_11_result.png" width="913" height="1080" loading="lazy" /></p> <p>And for the final test, I removed all elements from the queue, saw the original order again.</p> <p>That’s it for today. In our next post in the series we’ll tackle this problem with entities and field references. As always, stay tuned for more!</p> <p> </p>