How to override slideshow item template file?

Created on 7 December 2023, about 1 year ago
Updated 17 July 2024, 5 months ago

I would like to override the paragraph--ept-slideshow-item--default.html.twig file, so that I can change this:

      <a href="{{ content.field_ept_slideshow_link.0['#url'] }}">
        {{ content.field_ept_slideshow_slide }}
      </a>
      {{ content.field_ept_slideshow_title }}
      {{ content.field_ept_slideshow_text }}

To this:

      <a href="{{ content.field_ept_slideshow_link.0['#url'] }}">
        {{ content.field_ept_slideshow_slide }}
      <div class="ept-slideshow-content">
		  {{ content.field_ept_slideshow_title }}
		  {{ content.field_ept_slideshow_text }}
	  </div>
      </a>

I copied the file to my /themes/contrib/themename/templates folder, made my changes, and cleared cache. The changes are not being reflected on the website. How can I override the template file for this module?

πŸ’¬ Support request
Status

Fixed

Version

1.4

Component

Miscellaneous

Created by

πŸ‡ΊπŸ‡ΈUnited States hockey2112

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @hockey2112
  • πŸ‡·πŸ‡ΈSerbia levmyshkin Novi Sad, Serbia

    Hi hockey2112, contrib theme is not a good place for custom templates. Because it can be removed by composer on the next 'composer update'. You have two options to override templates in drupal:
    1. Create custom theme and put template there. You can inherit custom theme from your contrib theme:
    https://www.drupal.org/docs/develop/theming-drupal/creating-sub-themes β†’
    2. In file ept_slideshow you can find ept_slideshow_theme_registry_alter() implementation of hook hook_theme_registry_alter(), it allows to define which templates can be overridden in this module. So you can create custom module, for example ept_enhancements:

    /**
     * Implements hook_theme_registry_alter().
     */
    function ebt_enhancements_theme_registry_alter(&$theme_registry) {
      $ept_module = 'ebt_enhancements';
      $module_path = \Drupal::service('extension.list.module')->getPath($ept_module);
      $base_theme = 'paragraph';
      $theme_registry['paragraph__ept_slideshow_item__default'] = [
        'path' => $module_path . '/templates',
        'template' => 'paragraph--ept-slideshow-item--default',
        'render element' => $theme_registry[$base_theme]['render element'],
        'base hook' => $base_theme,
        'type' => 'module',
        'theme path' => $module_path,
        'preprocess functions' => $theme_registry[$base_theme]['preprocess functions'],
      ];
    }
    
  • Status changed to Needs review about 1 year ago
  • πŸ‡·πŸ‡ΈSerbia levmyshkin Novi Sad, Serbia
  • πŸ‡ΊπŸ‡ΈUnited States hockey2112

    levmyshkin,

    Thanks for your help with this!

    1. Sorry, I should clarify. I am using a subtheme, so my template file is in /themes/contrib/themename_subtheme/templates/. But it is not taking effect on the front-end.

    2. I created a module as you suggested. Here are the files I created, in /modules/custom/ept_enhancements:

    ept_enhancements.info.yml
    ept_enhancements.module
    /templates
    paragraph--ept-slideshow-item--default.html.twig

    /modules/custom/ept_enhancements/ept_enhancements.info.yml:

    name: 'EPT Enhancements'
    type: module
    description: 'Custom enhancements for EPT module.'
    package: Custom
    core_version_requirement: ^8 || ^9 || ^10
    version: '1.0'

    /modules/custom/ept_enhancements/ept_enhancements.module

    <?php
    
    /**
     * Implements hook_theme_registry_alter().
     */
    function ept_enhancements_theme_registry_alter(&$theme_registry) {
      $ept_module = 'ept_enhancements';
      $module_path = \Drupal::service('extension.list.module')->getPath($ept_module);
      $base_theme = 'paragraph';
    
      $theme_registry['paragraph__ept_slideshow_item__default'] = [
        'path' => $module_path . '/templates',
        'template' => 'paragraph--ept-slideshow-item--default',
        'render element' => $theme_registry[$base_theme]['render element'],
        'base hook' => $base_theme,
        'type' => 'module',
        'theme path' => $module_path,
        'preprocess functions' => $theme_registry[$base_theme]['preprocess functions'],
      ];
    }
    

    /modules/custom/ept_enhancements/templates/paragraph--ept-slideshow-item--default.html.twig

    {#
    /**
     * @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
     */
    #}
    {%
      set classes = [
      'paragraph',
      'paragraph--type--' ~ paragraph.bundle|clean_class,
      view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
      not paragraph.isPublished() ? 'paragraph--unpublished'
    ]
    %}
    {% block paragraph %}
      {% block content %}
        {% if content.field_ept_slideshow_link|render %}
          <a href="{{ content.field_ept_slideshow_link.0['#url'] }}">
            {{ content.field_ept_slideshow_slide }}
          <div class="ept-slideshow-content">
    		  {{ content.field_ept_slideshow_title }}
    		  {{ content.field_ept_slideshow_text }}
    	  </div>
          </a>
        {% else %}
          {{ content }}
        {% endif %}
      {% endblock %}
    {% endblock paragraph %}
    {{ attach_library('core/drupalSettings') }}
    {{ attach_library('ept_slideshow/flexslider') }}
    {{ styles|raw }}
    

    And here is the result (attached screenshot). As you can see, the new template file is still not reflecting any changes on the website. I'm not sure if I am just missing something obvious, or what...

  • πŸ‡ΊπŸ‡ΈUnited States hockey2112

    I should also say, if I make the changes directly to the template file within the module dir, the changes reflect on the website. However, I know that is not a valid best-practices way to make this change since it will be overwritten when the module is updated.

  • πŸ‡·πŸ‡ΈSerbia levmyshkin Novi Sad, Serbia

    > I should also say, if I make the changes directly to the template file within the module dir, the changes reflect on the website. However, I know that is not a valid best-practices way to make this change since it will be overwritten when the module is updated.

    You can create a patch for this module with your updates for the template:
    https://vazcell.com/blog/how-apply-patch-drupal-9-and-drupal-10-composer

    I can't see what exactly you want to change in Slideshow item. But I can add {{ content|without() }} for other fields in Slideshow Item paragraph type:

    {% block paragraph %}
      {% block content %}
        {% if content.field_ept_slideshow_link|render %}
          <a href="{{ content.field_ept_slideshow_link.0['#url'] }}">
            {{ content.field_ept_slideshow_slide }}
          </a>
          {{ content.field_ept_slideshow_title }}
          {{ content.field_ept_slideshow_text }}
          {{ content|without('field_ept_slideshow_slide', 'field_ept_slideshow_text', 'field_ept_slideshow_title') }}
        {% else %}
          {{ content }}
        {% endif %}
      {% endblock %}
    {% endblock paragraph %}

    That's strange that template can't be overriden with templates folder in custom theme. I will check if it's side effect using template from module.

    Try to enable Twig Debuging comments and see where you can override templates. I switched to the another pet project and won't spend much time on EBT/EPT modules for a while at least in this year.

  • Status changed to Fixed 8 months ago
  • πŸ‡·πŸ‡ΈSerbia levmyshkin Novi Sad, Serbia
  • Status changed to Fixed 8 months ago
  • πŸ‡·πŸ‡ΈSerbia levmyshkin Novi Sad, Serbia
  • πŸ‡·πŸ‡ΈSerbia levmyshkin Novi Sad, Serbia

    I added new releases for EBT/EPT modules:
    https://www.drupal.org/project/ept_core/releases/1.4.1 β†’
    https://www.drupal.org/project/ebt_core/releases/1.4.16 β†’

    There is a new theme suggestion with --custom suffix, so you can override template in your custom theme:

    block--block-content--ebt-accordion--custom.html.twig
    block--block-content--ebt-accordion.html.twig
    paragraph--ept-accordion--default--custom.html.twig
    paragraph--ept-accordion--custom.html.twig
    paragraph--ept-accordion--default.html.twig

Production build 0.71.5 2024