0

I have a custom content type with fields in which I collect, among others things, country. I'm using Drupal 8. I'd like to create a grid view page (using Views) of the content that is separated by country like shown in the image.

I'd like to avoid creating mupltiple views, one for each country, and then collating them into yet another page.

Any suggestions on how to make it happen?

enter image description here

Improve this question

1 Answer 1

Reset to default
1

Use Grouping by a Field

Grouping by Fields is a standard feature in Views.

  1. Create your Content Views with Page Display
  2. Add the Country Field (Probably a Taxonomy term reference, there are ways to import country lists BTW)
  3. Set Format to Grid and set Number of columns

  4. In Format Settings set Grouping field Nr.1 to your Country field

    Check in Preview that things look the way you want.

  5. Edit the Country field and set it to Exclude from display because you have it output above each result group, your probably don't want it in each grid cell too
  6. Edit the Country field Style settings if you want more control over how the "group headings" are output, but this works only in certain cases: D7 How to change the HTML wrapped around a grouping output (HTML h3 tag), D8 Allow to configure the h3 element for view style plugins, although you can use Custom text field for more control too.
Improve this answer
5
  • Thanks, prkos! This worked! Yes, countries a taxonomy term.
    – Kamal
    Nov 24, 2018 at 17:45
  • Multiple entries under the country are stacked on top of one another rather than in columns though even though I selected 3 columns in the Grid Format setting. Bug? I'll see if I can fix it using CSS.
    – Kamal
    Nov 24, 2018 at 18:02
  • 1
    I tried it and the grid is displaying without problems. Does it look the same in the admin theme and also with your default theme when you visit the Views page? If you know CSS then you'll be able to debug what went wrong. Are you sure the grid template is being used and correct CSS styles are applied?
    – prkos
    Nov 25, 2018 at 3:37
  • Thanks again for your time, prkos! Your comment made me take another look at the field re-write option I was using and I had an orphan <div> in there, which was throwing everything off.
    – Kamal
    Nov 25, 2018 at 18:14
  • 1
    That makes sense. I'm glad you worked it out in the end :)
    – prkos
    Nov 26, 2018 at 0:45

Your Answer

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

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