Date Time field machine name/view mode for theming using paragraphs

Question

I am using Drupal 8 core DateTime Range module and Date module in core to list date start and end date.

I have set various criteria and allowed content editors to set date/time under certain ranges with paragraphs module for events.

1. Event only has date. Created a date field using paragraphs module.

2. Event has date with start and end time. Created a date field and datetime range field with only time ranges using paragraphs module.

3. Event has start and end date. Created a datetime range fields using paragraphs with date ranges using paragraphs m.

4. Event has start and end date with time. Created two datetime field one with date ranges and another with time ranges using paragraphs.

Now for theming I need to target each field separately as each field represents different format and style. However while using paragraphs inside node and adding any one of datetime field to node using paragraphs does not allow me to determine which field it is or what view mode that datetime field is using.

This makes it difficult to theme those fields individually/seperately.

Also, while using views pages and rendering those datetime field on a pager based page view, same, it does not show what machine name/view mode its using for paragraphs.

I implemented hook_theme_suggestions_time_alter function to determine the machine name and view mode, but no information was available for said field.

I would like to each part of field in datetime field separately and differently while rendering using views and differently while rendering in full view mode of node.

Answer 1

The best way to Debug this is to enable twig debug open up or create sites/default/services.yml

change

 http.response.debug_cacheability_headers: true
 twig.config: 
   auto_reload: true
   cache: true
   debug: true

once done run drush cr or clear your cache

then go to the page with the paragraphs on them and inspect the element in chrome you will see ... some thing like

<!-- FILE NAME SUGGESTIONS:
  * field--paragraph--field-range--event.html.twig
  * field--paragraph--field-range.html.twig
  * field--paragraph--event.html.twig
  * field--field-range.html.twig
  * field--daterange.html.twig
  x field.html.twig
  -->

then theme the new field templates to your liking