Create card grid with related card

[mclercq]

Hi All,

I’m trying to make card grid with related cards like https://hse.cern/content/hse-safety-office with picture, name, role, etc… for my team page.

I follow this tuto --> https://webtools.web.cern.ch/technologies/drupal/expansion/cern-display-formats#card-grid

But, i don’t know how add my content (content team page here https://test-2-ep-th-safety.web.cern.ch/team )

My view page setting is like this :

I would like learn how create beautiful grid card like their.

Maybe I didn’t correctly understand how to make this view, that my first experience on Drupal.

For the moment i get something very ugly :

The content is my main menu ( i dont know why ).

Your help would be greatly appreciated.
Many thanks!

[kplatis]

Hello,

The issue is that you do not filter by content type and as a result it renders all content (regardless content type) as a card. Obviously you haven’t set the card display for all content types and thats why it renders like that.

You can fix it by adding a Content Type Filter and display only the content types that you want.

Let me know if its clear.

Kostas

[mclercq]

Hi,

@kplatis Thanks for your answer.

I think I didn’t explain my problem well enough. In sub-problem it will be clearer

Problem 1:

I want to create cards like Preview or Related for each member like this :

I created an new type of content : team card
And apply Related Card in Manage Display section :

Question: Which field should I use and how do I arrange them ?

I want display the name as a link to the mail,
Role and Phone number like a text.

Problem 2 :

Question: When the card will be create, how display the view for get the cards arrange as on a grid, in line, 3 or 4 per line ?

If you see my first post on the top, you will see the card are horizontal and take the full width of the page.

[kplatis]

Hello,

I am answering for each question separately

@mclercq

Problem 1:

I want to create cards like Preview or Related for each member like this :

The specific cards are custom made cards for the HSE website. They were made specifically for this website and they are not maintained by the centralized infrastructure. The alternative offered by the infrastructure is the Related Card from CERN Components.

In Related Card the result will be rendered like the following image (without the colors and instead of the dummy image it will have the image you assigned for the node)

@mclercq

Question: Which field should I use and how do I arrange them ?

I want display the name as a link to the mail,
Role and Phone number like a text.

About displaying the name as a link to the mail: By default the title of the card is a link to the node.
Role and phone number: You can map those fields to the yellow and green fields in the image above.

@mclercq

Problem 2 :

Question: When the card will be create, how display the view for get the cards arrange as on a grid, in line, 3 or 4 per line ?

If you see my first post on the top, you will see the card are horizontal and take the full width of the page.

How to create a Card Grid?: Please read the documentation of CERN Display Formats
My cards are horizontal and take the full width: Read my answer in the previous comment. It is because you display nodes of content types that do not have the card display.

[mclercq]

@kplatis Really thanks for take time to help me.

It’s work

Just on Safari, i dont know why, i have a strange layout :

Chrome and firefox :

[kplatis]

Hey,

Are you planning on using the Related Card? Because the display you used does not look like the Related Card.

Kostas