Customize the display page for events

Question

Using BackdropCMS and CiviCRM.

I'm looking for tips on how to customize the event pages. The pages used to display the details of individual events.

We are including the event location and price in the 'complete description' field for the event and would prefer that CiviCRM not display this information again at the bottom of the page, right before the register button.

See image:

I was leaning towards editing the EventInfo.tpl file as the best solution, but found this in documentation:

Changing page templates is the wrong choice when ...it is possible to make the needed changes by updating the CSS styles. For example, if a requirement is to hide or move some information or form fields on a screen, a CSS style for that HTML element can be changed to display: none, or position: absolute within the CSS file.

https://docs.civicrm.org/dev/en/latest/framework/templates/

Hiding fields with CSS does not feel like it is the best solution. But, is it the best solution available?

Answer 1

One of my sites also required a customised event page and ended up doing up their own designs but only grabbed the event details (e.g description, time, venue) and registration link from CIVICRM via API. This is quite doable if you have someone handy with html/js.

Answer 2

You can update the rendered html content with implementing the alterContent hook in an extension. You can check the tplName input to decide that the given content is connected to an event page or not. In case of event templates it is looks like CRM/Event/.... The html string is stored in the content variable. You can use the phpQuery tool for doing the dom manipulation. For example you can remove the section that contains the default when and fees block. It changes the html content on the server side.

Other solution could be adding custom js files and do the manipulation with javascript functions on the client side. You can implement the pageRun and buildForm hooks in your extension. If you are on the event pages or forms (you can decide it based on the page and form names that prefixed with CRM_Event_), you can add your custom js files with the Civi::resources()->addScriptFile() function.

The EventInfo.tpl will not be changed with the options above.