Surcharger le rendu d'une vue

Posté le: dim 11/11/2018 - 10:47 Par: rcowebdev
surcharge vue template

 

Il est parfois nécessaire de surcharger le rendu d'une vue (bloc ou page). Sur Drupal 7, il y avait le champ theme bien pratique, qui précisait les noms des fichiers disponibles pour la surcharge mais non présent sur Drupal 8 (je ne sais pas pourquoi mais c'est dommage ou alors j'ai oublié d'activer un truc ...).

Cependant, le principe reste toujours le même. Je vais partir de l'exemple d'un bloc que j'ai crée récemment et dont j'ai surchargé le rendu.

Surcharge bloc

 

C'est une vue de type bloc qui montre les articles en vedette pour la catégorie courante et qui sont flagués Promoted to header of category.

 

surcharge rendu


Il faut alors nommer le template ainsi 

views-view--promoted--block-1.html.twig

A comprendre

views-view--[view-machine-name]--[block-machine-name].html.twig

  • view-machine-name : présent dans l'URL ou dans la liste des vues
  • block-machine-name : présent dans l'édition de la vue, onglet Advanced > Machine name

Les underscore (_) doivent être remplacés par des tirets (-).

Ensuite, je voulais afficher ce bloc seulement sur la première page de la liste. Il faut alors modifier son fichier de thème afin de récupérer la ou les variables dont on a besoin.

themes/[nom_theme]/[nom_theme].theme

Et y ajouter la méthode

/**
 * Prepares variables for promoted block.
 *
 * Default template: views-view--promoted--block-1.html.twig
 *
 * @param array $variables
 */
function nexus_preprocess_views_view__promoted__block_1(&$variables) {
  $variables['first_page'] = (isset($_GET['page']) && $_GET['page'] == 0) || (!isset($_GET['page'])) ? true : false;
}

A comprendre

/**
 * Prepares variables for promoted block.
 *
 * Default template: views-view--promoted--block-1.html.twig
 *
 * @param array $variables
 */
function [theme-name]_preprocess_views_view__[view-machine-name]__[block-machine-name](&$variables) {
  $variables['first_page'] = (isset($_GET['page']) && $_GET['page'] == 0) || (!isset($_GET['page'])) ? true : false;
}

Le fichier de template ressemble du coup à ça

{#
/**
 * @file
 * Default theme implementation for main view template.
 *
 * Available variables:
 * - attributes: Remaining HTML attributes for the element.
 * - css_name: A css-safe version of the view name.
 * - css_class: The user-specified classes names, if any.
 * - header: The optional header.
 * - footer: The optional footer.
 * - rows: The results of the view query, if any.
 * - empty: The content to display if there are no rows.
 * - pager: The optional pager next/prev links to display.
 * - exposed: Exposed widget form/info to display.
 * - feed_icons: Optional feed icons to display.
 * - more: An optional link to the next page of results.
 * - title: Title of the view, only used when displaying in the admin preview.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the view title.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the view title.
 * - attachment_before: An optional attachment view to be displayed before the
 *   view content.
 * - attachment_after: An optional attachment view to be displayed after the
 *   view content.
 * - dom_id: Unique id for every view being printed to give unique class for
 *   Javascript.
 * - first_page: Boolean it is the first page ? @See nexus.theme
 * 
 * @see template_preprocess_views_view()
 *
 * @ingroup themeable
 */
#}

{% if first_page %}
<h2 id="custom-promoted">{{ 'Promoted' | t }}</h2>
	<div id="custom-promoted-article">
	{%
	  set classes = [
	    dom_id ? 'js-view-dom-id-' ~ dom_id,
	  ]
	%}
		<div{{ attributes.addClass(classes) }}>
		  {{ title_prefix }}
		  {{ title }}
		  {{ title_suffix }}
		  {% if header %}
		    <header>
		      {{ header }}
		    </header>
		  {% endif %}

		  {{ exposed }}
		  {{ attachment_before }}

		  {{ rows }}
		  {{ empty }}
		  {{ pager }}

		  {{ attachment_after }}
		  {{ more }}

		  {% if footer %}
		    <footer>
		      {{ footer }}
		    </footer>
		  {% endif %}

		  {{ feed_icons }}
		</div>
</div>
{% endif %}

 

Mots clés
Drupal 8
Trucs et astuces
Views
Twig
Theme