Drupal – Customisation avec Display Suite

Il y a actuellement plusieurs manières de générer des Display avec Drupal. Les développeurs plus expérimentés utilisent principalement Display Suite. Dans ce post, nous allons voir comment générer quelques output en fonction du format sélectionné avec Display Suite, et aussi modifier des view modes des champs existant.

Il faut tout d'abord télécharger le module Display Suite (DS) et installer au moins DS et DS UI, mais il est conseillé d’activer toute la liste suivante. Comme dépendance il y a aussi le module Devel, et pour travailler avec des hooks nous allons créer un module customisé (main.module)

Dans notre module nous allons travailler principalement avec deux hooks :

Modification des view modes des champs existant (hook_entity_view_mode_alter )
Changer le view mode d’une entité dans un certain display.
Génération des champs avec Display Suite (hook_ds_fields_info)

Création/définition des champs avec certaines règles dans les displays.

Nous allons faire un exemple pour le premier cas où nous allons utiliser un type de contenu déjà existant (page), et un champ checkbox qui doit être créé depuis le backoffice (admin/structure/types/manage/page) qui s’appelle Checkfield (field_checkfield), du type "liste des integers" et allowed values = 1|Yes

Pour l’exemple dans notre hook nous allons modifier le display du type full (/admin/structure/types/manage/page/display/full), du display teaser (/admin/structure/types/manage/page/display/teaser), nous ferons une vérification du $view_mode, du champ “field_checkfield”, il montrera une image ou une autre. Pour cet exemple il y a la même image, mais il est possible de changer les dimensions pour chaque cas.

function main_entity_view_mode_alter(&$view_mode, $context){
	
	if ($view_mode == 'full') {
		
		if ($context['entity']->field_environnement['und'][0]['value'] == 1)
			$context['entity']->field_environnement['und'][0]['value'] =  theme_image(array (
																			'path' => '/sites/all/modules/custom/main/img/logo_tousensemble.jpg',
																			'alt' => 'Environment Normal badge',
																			'attributes' => array (
																				'width' => '40',
																				'height' => '40',
																				'class' => 'environment_image_small'
																			)
																		));
		
		else
			$context['entity']->field_environnement['und'][0]['value'] = ''; //
		//with this we rendering diff content, not to be saved DB side tho,
		//but it will change its value for later hooks
		


		//In case of being finaliste, do not render
		if ($context['entity']->field_laureat2['und'][0]['tid'] == '1'){
			//FOR CSS' sake we do not render it, because we dont wanna show anything
			unset ($context['entity']->field_laureat2);
		}

	}else if ($view_mode == 'teaser') {

		if ($context['entity']->field_environnement['und'][0]['value'] == 1)
			$context['entity']->field_environnement['und'][0]['value'] = theme_image(array (
																			'path' => '/sites/all/modules/custom/main/img/logo_tousensemble.jpg',
																			'alt' => 'Environment Normal badge',
																			'attributes' => array (
																				'width' => '70',
																				'height' => '102',
																				'class' => 'environment_image_small'
																			)
																		));
		
		else
			$context['entity']->field_environnement['und'][0]['value'] = ''; //
	}
}

Si le champ Checkfield est coché dans le front office, l’image cat_image (dimension 40x40) apparaîtra de cette façon.

Pour le deuxième cas, il va falloir configurer les options du display @admin/structure/types/manage/page/display.

Par défaut, plusieurs thèmes d’administration n’offrent pas un layout propre et préparé, donc dans l’onglet « Custom Display Settings » il faut cocher « Full Content » et « Teaser » pour les activer.

Ensuite, dans chaque formulaire (admin/structure/types/manage/page/display/full), sélectionnez un layout (obligatoire pour faire marcher Display Suite)

Ensuite, nous allons créer un autre hook dans le module customisé où nous définirons deux champs différents. Faire attention au deuxième “Variable Field…” parce qu’il a deux formatters que nous pouvons voir après dans le formulaire d’administration du display, pour les sélectionner.

function main_ds_fields_info($entity_type) {
   if ($entity_type == 'node'){
	  $fields = array();
	  // New DS field for node types.
	  // kpr (get_defined_vars());
	  $fields['node']['customizedenvironment'] = array(
	    'title' => 'Environment Customized for Projects',
	    'field_type' => DS_FIELD_TYPE_FUNCTION,
	    'function' => 'main_ds_customizedenvironment',
	    'properties' => array(),
	  );

	  $fields['node']['customizedjevote'] = array(
	    'title' => 'Je Vote Customized for Projects',
	    'field_type' => DS_FIELD_TYPE_FUNCTION,
	    'function' => 'main_ds_customizedjevote',
	    'properties' => array(),
	  );

	  return $fields;
   }

Chaque champ a une fonction de callback pour imprimer ce que nous voulons dans chaque cas. Encore autre fois, nous allons vérifier si la checkbox est cochée ou pas, dans le première exemple, pour montrer une image de 200x200

function main_ds_customizedfield($field) {
	
	$output = '';
	//Checking 1st) Page? 2nd) checkbox is defined 3rd) not 0
	if ( $field['entity']->type == 'page' )
		if ( sizeof($field['entity']->field_checkbox)>0 )
			if ( $field['entity']->field_checkbox['und'][0]['value'] == "0" 
                         || $field['entity']->field_checkbox['und'][0]['value'] == "" ){

			}else{
				
				$output .= '<div class="customized_check">'. theme_image(array (
					'path' => '/sites/all/modules/custom/main/img/logo_tousensemble.jpg',
					'alt' => 'Environment Normal badge',
					'attributes' => array (
						'width' => '135',
						'height' => '196',
						'class' => 'environment_image_normal'
					)
				)). '</div>';
			}
  return $output;
}

Et dans le deuxième, nous montrons seulement du texte HTML pour chaque format diffèrent.

function main_ds_depending_format($field){
	global $user;
	$output = '';

	if (user_access('administer main module', $user)){

		$entity = $field['entity'];
		$formatter  = $field['formatter'];

		if ($formatter == 'first_format'){
			$output = 'first one selected';
		}else if ($formatter == 'first_format'){
			$output = 'second format selected';
		}
	}
}

Vous l'avez peut-être remarqué, dans ce dernier exemple, nous avons utilisé un droit customisé…. Pour compléter cela, je vais vous montrer comment créer ce droit dans le module main.module

function main_permission() {
	return array (
		'administer main module' => array (
			'title' => t('Administer main module'),
			'description' => t('Administer functionalities of main.module.')
		)
	);
}

Il est important d’activer notre nouveau champ (admin/structure/types/manage/page/display/full)
Customized field for content types
Variable Field depending on selected format. Nous allons sélectionner le deuxième (Second Format)

Dans la page créée avant, nous pourrons voir :

La grande image du chat (200 x 200) grâce au champ “Customized field for content types”
Le HTML “Second format selected” grâce au champ “Variable Field…” et sélectionner le deuxième formatter
La petite image du chat (champ checkfield)

Enregistrer

Le blog

Drupal – Customisation avec Display Suite

Laisser un commentaire Annuler la réponse