How to create a composed field with Drupal 8?

Site building
1

Hi,

Having questions again :grimacing:

I was wondering if there is a way to have composed field for a Content type.

We are trying to associate a job position with a date for our management team and the render i get with the preview card is not exactly what we want.

In the picture below we can see that the two position are side by side to each other and same with the dates. The goal would be to have a line with each position and the date associated.

41

I looked a bit and for Drupal 7 it seems that there was a Composed Field module. I couldn’t find it for Drupal 8. Do you guys have any idea if such a thing exists ?

Alternatively, is there a way to insert a <br/> tag dynamically if the person in question had more than one position at CERN ?

Thank you very much for your help.

Maxime

2

Hey Maxime,

I checked composed field and it breaks a field into sub-fields so I am not sure if its suitable in your case. Can you give a URL of the view you tried it?

Kostas

3

Hi Kostas,

I didn’t manage to use it. Here is the URL where we have the issue : https://atlas-public-d8.web.cern.ch/management

Ideally i would like to have position | starting date - ending date but all vertically. Instead of something like SpokespersonDeputy Spokesperson | 2009-20132005-2009.

Thank you very much.

Maxime

4

Hey Maxime,

I checked your page and given that all the information are placed in one text field, I believe that the only way to make them vertical are using Javascript. However I think that it is an overkill and the boxes already look nice!

Some extra comments if you dont mind:

  • Since you added the background color for the title, I think its worth it to add a bit of opacity in the background in order to look neater. The following example is done using background-color: rgba(11,128,192, 0.9);
    13
  • In general its better to use CDS images instead of local ones in order to keep the least possible data in your filesystem. Smaller size in filesystem means faster clones and backups.

Kostas

5

Hey,

Thank you for your tips :slight_smile:

So the thing is there are two person who’ve had several position within the management and the ideal would be to have all their position in the card. I tried to insert a <br> in the “Format” field but it’s interpreted as text so it doesn’t seem to work :sweat_smile:

Is there a way to insert directly HTML in the format field of an article box ?

44
Capture d’écran 2019-08-27 à 11.00.44.png792×889 158 KB

Maxime

6

The format field of the Article Box is a field of type Text (plain), which does not support Full HTML text format. Also Drupal does not support changing a field type after the creation of a field. However, you can replace the format field using a field of different field type.

In general:

  1. Create a field in the Article Box paragraph type of type text(formatted) or text(formatted, long). The formatted part is the one that provides the HTML format.
  2. Add the new field in Manage Display of Article Box (/admin/structure/paragraphs_type/cern_article_box/display) and move the new field under Category
  3. Add the new field in Manage Form Display of Article Box (/admin/structure/paragraphs_type/cern_article_box/form-display) under Content and configuration

In general you replace the Format field with the new one. The negative part of this solution is that you have to find all the Article Boxes you have already created and copy-paste the Format value in the new field. If you dont do that the Format field will not display for the old boxes (because of step 2).

Let me know if it works for you.

Kostas

7

Hello,

Can you please tell me how you added the background color and removed the text shadows on this card?
Is is a Drupal configuration or CSS?

Thank you!
Evi

8

Hi @evi.dermata ,

I added some CSS. For the background it’s quit easy, you need to select the correct div. In my case, i did :

.preview-card__title { 
background-color: blue; 
}

In order to remove the text shadow i used the following :

.preview-cards__subtext > .preview-card__category {
  text-shadow: none;
}

.component-preview-cards__box > .preview-card__title > h3 > a {
  text-shadow: none;
}

Hope this helps :slight_smile:

Maxime

2 Likes
9

Thanks @kplatis it worked great ! :slight_smile:

10

Thank you Maxime.

We have a rule not to use our CSS, unless there is no other way, and keep CERN’s theming as it is.
But it looks really nice with this small modification that you did and I might use it!

Thank you a lot!

Evi