How to add text above view (as in home.cern/events)

[mbbouvie]

Hello everyone,

I would like to replicate the Event grid of home.cern: https://home.cern/events
I have already followed the instructions in webtools and I can have a first grid: https://drupal-tools.web.cern.ch/docs/modules/display-formats/formats/event-grid

However, I do not know how to replicate the tabs “Past events” and “Ongoing and upcoming events”.

Thanks in advance,
Marie

[kplatis]

Hello there Marie,

This is not a specific feature of the Events Grid, it is Drupal view feature that you can use to display text above your view.

General

• As you will notice it is actually two view pagets (/events and /past-events).
• The one show curret/future events and the other shows past events

How to

Assuming that you have created the two view pages and you want to have links to navigate from the one to the other:

1. In your view add a Header of type Global: Result Summary as on the image below.
   
2. Inside the Header item add the following code and replace the words with your own (or just keep them):

<a href="/link/of/past/events">Past Events</a> | <a class="active" href="/link/of/ongoing/events">Ongoing and Upcoming Events (@total)</a>

The @total token actually shows the total results of the view. As a result and since the two views have different amount of results, you should use two different headers for the 2 different views.

In ongoing Events view

<a href="/link/of/past/events">Past Events</a> | <a class="active" href="/link/of/ongoing/events">Ongoing and Upcoming Events (@total)</a>

In past events page

<a href="/link/of/past/events">Past Events (@total)</a> | <a class="active" href="/link/of/ongoing/events">Ongoing and Upcoming Events </a>

Note

Apparently this solution requires to have 2 different view pages. One way to do that is to have 2 different views. However, a “cleaner” way would be to create a master view and then implement 2 different displays inside this view: one for past events and another for current events. Thats optional though, just to keep your views cleaner.

Hope that answers your question. Let me know if it works for you.

Konstantinos

[mbbouvie]

Thank you very much.
I opted for the second version and it works great, see https://test-voisins2.web.cern.ch/events

A few issues left:

1. In the search area, I would like the “Search Title” line to be in the first rown, and the dates below. How can I fix it?

2. I would prefer to have the “PAST EVENT” and “ONGOING AND UPCOMING EVENTS” in blue like in home.cern/events. How can I change it?

3. When people look for a date, I want them to be able to select it in a calendar. How do I make that happen?

4. In “PAST EVENTS”, the “<<First” and “Last>>” button don’t work (they always display the same first batch of events"

Cheers,

Marie

[kplatis]

Hello Marie,

@mbbouvie

In the search area, I would like the “Search Title” line to be in the first rown, and the dates below. How can I fix it?

This is a bug. I noticed that in some format the exposed filters were breaking after the last update. The fix will be deployed in v2.6.4 and will render like the following image.

@mbbouvie

I would prefer to have the “PAST EVENT” and “ONGOING AND UPCOMING EVENTS” in blue like in home.cern/events. How can I change it?

For that, it takes the default color of views (black). You can override it with inline styles:

<a href="/link/of/past/events" style="color: #2574b9;">Past Events (@total)</a> | <a class="active" href="/link/of/ongoing/events" style="color: #2574b9;">Ongoing and Upcoming Events </a>

@mbbouvie

When people look for a date, I want them to be able to select it in a calendar. How do I make that happen?

For that you need to install the Date Popup module and clear your caches. After installing it all exposed date fields will appear as Calendar popups

@mbbouvie

In “PAST EVENTS”, the “<<First” and “Last>>” button don’t work (they always display the same first batch of events"

Weird bug, I will investigate it. For now you can use the Full Pager instead of the Mini Pager

Konstantinos

[mbbouvie]

Hi Kostas,
Many thanks!
Everything works except for the blue, but I can do without it.
Cheers,
Marie

[mbbouvie]

Hi @kplatis,

Sorry, I am back about my events view because I had to make a change.

Now I have an Event Grid of Agenda Boxes for the Ongoing and Upcoming events.
And a list of fields for the Past events.

The header display differently on those views though. I have put the code to have the header of the event Grid in Blue but it did not work.

I would also need the header to be either on the left or centered, as long as it is the same on both views.

See:

Event Grid:

List:

Thanks in advance for your support!

Marie

[kplatis]

Hello Marie,

I had a look and unfortunately the color solution I provided cannot work, I will have a look if I can fix the link colors in the next version of the theme.

Konstantinos

[kplatis]

Hello @mbbouvie,

I applied a fix to the theme and now the header of the view will inherit the BODY: Link color from the color settings that you have set. I also fixed the issue that you had with the pager.

The fix will come with v2.6.4 of CERN Theme. The following image shows more or less how it will look like. Hope that helps.

Konstantinos

[mbbouvie]

Hi Kostas,

Yes, it is perfect for the colour (and the search button bug seems fixed too).

I will still have a problem because the header of the Event grid will be centered, while the header of the List will be on the left. Do you know how to fix this?

Many thanks,

Marie

[kplatis]

Which list are you reffering?

[mbbouvie]

See above:

@mbbouvie

List:

[kplatis]

Yes thats because Event Grid and list have different header styles. I will see what I can do about it