The following article explains how to create dynamic cards with the Resource icon, like the example below. This tutorial assumes that you know what is a component and more specifically the Preview Card component. If not, you can read the documentation of CERN Components module.
Steps
Lets begin with the basics. The image above displays a grid of Preview Cards, which constitutes a component of CERN Components. However the pattern has one extra field, the format. This format can be the icon of an image, a video, a presentation etc. You can find a complete list of the supported format icons in a list below.
So how does the pattern know which icon to display? The answer is simple: you need to create a new field in the displayed content type and map it in the pattern settings to a specific value. This field needs to be a taxonomy reference field using a pre-defined taxonomy vocabulary. The taxonomy vocabulary should have specific values, as its the only way for the pattern to understand the displayed format.
1. Create a Taxonomy Vocabulary
The vocabulary name does not play a role. As an example, lets assume that it is called "Resource Format". What is important though are the terms of the vocabulary. If the following terms are incorrect - due to a typo etc - then the icon will not be displayed in the card. So be extra careful when you create them. The vocabulary terms should be the following:
- Courier
- Image
- Video
- 360 image
- 360 video
- Annual report
- Brochure
- Bulletin
- Document
- Presentation
- Publicaton
2. Create a field in the content type for the taxonomy vocabulary
In this step you just have to create a field in the content type that you want to use in the view. The field is of type "Taxonomy reference" and the used vocabulary should be the one created in step 1. This field will tag the content with the format.
3. Tag the content with the format
The content should be tagged with the format that you want to display in the view. For example, in the card below the node "Bene Pneum" is tagged with the format "Image".
The displayed icon will depend on the tag you picked in this step.
| Format | Icon |
|---|---|
| Courier | ^ |
| Image | z |
| Video | Z |
| 360 image | t |
| 360 video | t |
| Annual report | ^ |
| Brochure | ^ |
| Bulletin | ~ |
| Document | ~ |
| Presentation | _ |
| Publication | ^ |
4. Map the vocabulary field in the Preview Card pattern
In this step you should map the field in the Preview Card pattern. The field that you created in step 2 should be mapped under the pattern field Category, like the example below. In this example the field is called "Resource Format", but as already mentioned the field name is not important. If you do not understand this step, you should read the documentation of CERN Components.
5. Create a view and display the created component
The final step is simple. Just pick the desired format from CERN Display Formats and display your cards!