1

I'm making a custom module that will hook into the default theme and override a template file. Like you can do in a custom theme. At this moment I can already use the template that was made in the custom module with the hook_theme() function, it shows in my page. But the available variables are not showing in here. (for example: content, attributes, ...).

Probably because the module does not recognise these variables? How do I pass these variables to the template in my custom module. I read about the function hook_preprocess_HOOK() but no luck so far.

This is the implementation of hook_theme().

/**
 * Implements hook_theme()
 */
function episode_data_theme($existing, $type, $theme, $path) {
        return [
        'paragraph__episode_content_question_slider' => ['variables' => [] ],
    ];
}

This is the content of the template.

{#
/**
 * @file
 * Default theme implementation to display a paragraph.
 *
 * Available variables:
 * - paragraph: Full paragraph entity.
 *   Only method names starting with "get", "has", or "is" and a few common
 *   methods such as "id", "label", and "bundle" are available. For example:
 *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
 *   - paragraph.id(): The paragraph ID.
 *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
 *   - paragraph.getOwnerId(): The user ID of the paragraph author.
 *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
 *   and methods for the paragraph object.
 * - content: All paragraph items. Use {{ content }} to print them all,
 *   or print a subset such as {{ content.field_example }}. Use
 *   {{ content|without('field_example') }} to temporarily suppress the printing
 *   of a given child element.
 * - attributes: HTML attributes for the containing element.
 *   The attributes.class element may contain one or more of the following
 *   classes:
 *   - paragraphs: The current template type (also known as a "theming hook").
 *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
 *     "Image" it would result in "paragraphs--type--image". Note that the machine
 *     name will often be in a short form of the human readable label.
 *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
 *     preview would result in: "paragraphs--view-mode--preview", and
 *     default: "paragraphs--view-mode--default".
 * - view_mode: View mode; for example, "preview" or "full".
 * - logged_in: Flag for authenticated user status. Will be true when the
 *   current user is a logged-in member.
 * - is_admin: Flag for admin user status. Will be true when the current user
 *   is an administrator.
 *
 * @see template_preprocess_paragraph()
 *
 * @ingroup themeable
 */
#}
{% block paragraph %}
    <div{{ attributes }}>
        {% block content %}
            {% set sliderDescription = content.field_slider_description|render|striptags %}
            {{ content.field_available_for }}
            <div {{ attributes }}  class="content-block content-block-slider">
                {{ content.field_slider_question }}
                <div class="field_slider_description">{{ sliderDescription|length > 200 ? sliderDescription|slice(0, 200) ~ '...' : sliderDescription }}</div>
                <a class="got-it" href="#content-block-{{ paragraph.id() }}" data-id="{{ paragraph.id() }}">{{ 'Got it'|trans }}</a>
            </div>
            <div id="content-block-{{ paragraph.id() }}" class="modal-dialog">
                <div>
                    <a href="#close" data-id="{{ paragraph.id() }}" id="{{ paragraph.id() }}" class="content-block-done close-modal-dialog"></a>
                    {{ content.field_slider_question }}
                    {{ content.field_slider_description }}
                </div>
            </div>
        {% endblock %}
    </div>
{% endblock paragraph %}

This is the debug output I get on the page.

The twig template that is being used on the page

2

According to your code, you are creating a custom template for a paragraph.

As you are trying to access variables, that will be added by the paragraph module, you'll have to tell the theming system that it is a paragraph.

You can do so by adding the 'paragraph' base hook. This way the template will get the variables provided by the paragraph (pre-)processing:

/**
 * Implements hook_theme()
 */
function episode_data_theme($existing, $type, $theme, $path) {
  return [
    'paragraph__episode_content_question_slider' => [
      'base hook' => 'paragraph',
    ],
  ];
}
  • Thank you so much, it works! I have been looking for this like everywhere but could not find an answer. – Ben Jan 3 '18 at 9:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.