0

I have an article content type which has a category field that is an entity reference field type linked to a taxonomy group of terms I created.

The website has 6 different pages which are just a taxonomy view based on the 6 different article categories listing the articles that are associated with that category. These are the settings of the taxonomy view used for each of the pages: taxonomy view settings

What I'm trying to do is create 6 block views on the homepage in a grid where each block view is a different category title showing the 4 most recent article titles and a more button to take you to the listing page of said category view. Each background would be a different image based on my CSS. This is what I'd like it to look like: block views on homepage

I'm using Boostrap so what I'd like is each row to be put within a <div class="row"> and then each block to have a <div class="col-sm-4">.

What I want the final code for each block to look like is the following:

<div class="col-md-4"> <div class="category background-img-class-name"> <div class="category__content"> <div class="category__content--title"> <h3>{{ category.title }}</h3> </div> <ul class="category__content--listings"> <li><a href="{{ link.to.article.1 }}">Article Title 1</a></li> <li><a href="{{ link.to.article.1 }}">Article Title 2</a></li> <li><a href="{{ link.to.article.3 }}">Article Title 3</a></li> <li><a href="{{ link.to.article.4 }}">Article Title 4</a></li> </ul> <div class="category__content--more"> <a class="btn btn-primary" href="{{ link.to.category.view }}">More</a> </div> </div> </div> </div>

I know I could create a different block view in views for each of these (would that be the best practice?) and then place them in the content region only on the homepage but then how would I theme the template files so that I could have them work the way I've shown above?

Is there a better approach to this than what I'm suggesting above? Any help/suggestions is greatly appreciated. Also, if something exactly like this has been asked/answered before, a link to that would be helpful as I've tried searching on here and haven' been able to find anything exactly like my issue.

Improve this question
2
  • Any chance that you could post a screenshot of how it currently looks? I want to be sure that I understand fully what is going on before offering help. Commented Aug 2, 2017 at 19:38
  • I'll be away from my computer until tomorrow but I currently don't have anything on the front page yet as I'm unsure of how to even begin this. Pretty much the site has 6 pages associated with a taxonomy term which is the category for the article. I just want these blocks on the homepage (as seen above) to give a quick glimpse of the 4 most recent stories associated with each category. Commented Aug 2, 2017 at 20:10

1 Answer 1

Reset to default
0

Please comment below if I have misunderstood anything and I can modify my answer.

First, I will clarify that I understand what is happening.

To the user, there appear to be 6 different pages on the site but in actuality, they are looking at the View Page that you posted above with contextual filters (each containing a different taxonomy term).

On the homepage, in a grid, you would like to display 6 Block Views that display the 4 most recent posts for their respective Taxonomy Term.

You would want Views to print out in a Bootstrap-like format so that they utilize the Bootstrap responsive grid.

This is what I recommend:

  • First we are going to create the first New Block.
  • Create a Block View called "Front Page News Blocks" (Or something along those lines) that lists Nodes of the Article type
  • Limit the View to only display 4 nodes
  • Ensure that it is sorted via post date (Ascending)
  • Add a "Custom text" field to the view and put the "More" link (with the btn and btn-primary classes) in the value
  • All of the above settings are "Applied to All Displays"
  • Now, you want to create some Block Views within this View. Have a total of 6 different Block Views
  • Within these, you can add categories Filters (but apply them only to the respective displays)
  • Also, override the URL in the "More" link in each view (Once again, don't forget to only apply it to the current display)
  • Create a template based on views-view.html.twig but name it after your View to override the default theme file
  • Within your custom TWIG file, you can add the "col-md-4" grid classes
  • You would also need to override the Homepage template so that you can add a div with the "row" class to the region where these blocks will be.

  • Now your CSS classes should be in the markup and you should be able to style your site as planned.

    What I laid out was pretty generalized and high level. Definitely comment below if you need clarification on anything and I can edit this answer.

    Hope this helps get you on the right track!

Improve this answer
4
  • Thank you for this very thorough answer. It seems that you understood exactly what I was asking. I will apply this to my site building and should I have any issues, I will let you know. Commented Aug 2, 2017 at 22:42
  • I seem to be stuck on the 5th point above. Where am I adding that custom text field for the "More" button? To the fields section where I currently have the Content:Title or in the footer of that view/somewhere else? If i add it to the fields section, it adds a more link under each title/article instead of just the one for the specific topic Commented Aug 3, 2017 at 14:10
  • Also, so when I create the 6 different Block Views, each one of those will need to be individually placed in the main content region, correct? Like there's no way of just placing one block that is linked to the 6? Commented Aug 3, 2017 at 14:54
  • @ACanadianCoder - For the 5th point, I would suggest adding it to the footer section. Also, for the 6 Blocks, yes that is right. At least to my knowledge. With Page views, as you know and are doing, you can use the same view but filter it with a Contextual Filter in the URL. However, I am not sure it is possible in your case with those blocks. Commented Aug 9, 2017 at 17:26

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.