Get the most out of display modes!
Big thanks to the organaizers
Jose Luis Bellido (jlbellido)
@jose_lakatos
https://github.com/jlbellido
https://www.drupal.org/u/jlbellido
- Backend developer.
- +5 years of experience with Drupal.
We are hiring!
Goals of this session
- Basic knowledge about how organize your project.
- Sharing best practices.
- From the basics.
- Practical session with real examples.
- Have fun.
Table of contents
- I : Introduction
- View modes in Drupal 7
- Display modes in Drupal 8
- II : Real example
- Form Modes in Drupal 8
- View modes in Drupal 8
- Pseudo-fields
Introduction
View modes in Drupal 7
View modes In Drupal 7
It's a concrete visualization mode for a node or other entities.
Where can we use view modes?
- Views
- Panels
- etc..
For nodes :
- Full content (full)
- Teaser (teaser)
- RSS, Search Index, Search Result
More info : https://www.drupal.org/node/1577752
View modes In Drupal 7
Related concepts
- Field Formatter : Specify how a field is displayed when the entity is displayed.
- Field Widget : Specify how a field is displayed in the edit form
View modes In Drupal 7
View modes In Drupal 7
Manage display
View modes In Drupal 7
How to create new view modes
/**
* Implements hook_entity_info_alter().
*/
function MYMODULE_entity_info_alter(&$entity_info) {
$entity_info['node']['view modes']['related'] = array(
'label' => t('Related'),
'custom settings' => TRUE,
);
}
Theme suggestions.
/**
* Implements template_preprocess_node()
*/
function THEME_preprocess_node(&$variables) {
$node = $variables['node'];
$view_mode = $variables['view_mode'];
// Set up template suggestions for non-standard view modes
if ($view_mode !== 'full') {
$variables['theme_hook_suggestions'][] = 'node__' . $node->type . '__' . $view_mode;
}
}
- No UI by default.
- What about forms?
- No exportable by default.
View modes In Drupal 7
Limitations
Useful contrib modules
Display modes IN DRUPAL 8
Form Modes + View Modes
Display modes In Drupal 8
Form Modes
No more : #access => FALSE !!!!
Display modes In Drupal 8
New administration page
Display modes In Drupal 8
Exportable configuration.
Display modes In Drupal 8
Other features
- Properties are also configurable.
- (Title, created, changed...)
- No extra contrib modules needed.
More info : https://www.drupal.org/node/2511722
Part 2 : REAL EXAMPLE
Tapas section!
Requirements
- A Tapa will have the following fields
- Title
- Description
- Image
- Price
- 2 Tapas forms:
- Full tapa form
- Suggested tapa form
- 2 visualization modes:
- Tapas most sold
- Tapas list
- A common text for all tapas.
Previous Work
- Custom module: display_modes_example
- Custom entity: Tapa
- $ drupal generate:module
- $ drupal generate:entity:content
https://drupalconsole.com/ (v 1.0.0-RC16)
Only 5 minutes with Drupal Console!!!
Available on Github :
Source Code
Form MODES IN DRUPAL 8
- Tapas forms
- Full tapa form
- Suggested tapa form
Requirements that we want to achieve:
Our first goal
Form MODES IN DRUPAL 8
Define a new form mode (I)
Form MODES IN DRUPAL 8
Define a new form mode (II)
Form MODES IN DRUPAL 8
Configure our fields for our field mode
Form MODES IN DRUPAL 8
Declare as "Form operation"
* "form" = {
* "default" = "Drupal\display_modes_example\Form\TapaForm",
* "add" = "Drupal\display_modes_example\Form\TapaForm",
* "suggested_tapa_form" = "Drupal\display_modes_example\Form\TapaForm",
* "edit" = "Drupal\display_modes_example\Form\TapaForm",
* "delete" = "Drupal\display_modes_example\Form\TapaDeleteForm",
* },
For other entities:
/**
* Implements hook_entity_type_alter().
*/
function display_modes_example_entity_type_alter(array &$entity_types) {
if (isset($entity_types['entity'])) {
$entity_types['entity']->setFormClass(....);
}
}
Form MODES IN DRUPAL 8
Adding a new route to routing.yml
entity.tapa.suggested_tapa_form:
path: '/admin/structure/tapa/suggestion'
defaults:
_entity_form: tapa.suggested_tapa_form
_title: 'Suggested tapa from'
requirements:
_permission: 'edit tapa entities'
Form MODES IN DRUPAL 8
entity.tapa.suggested_tapa_form:
route_name: entity.tapa.suggested_tapa_form
title: 'Add Tapa suggestion'
appears_on:
- entity.tapa.collection
New link action
display_modes_example.links.action.yml
Form MODES IN DRUPAL 8
Final result: Action links
Form MODES IN DRUPAL 8
Final result: Suggested tapa form
Other considerations
Contrib modules
- Form mode manager (8.x-1.x-dev)
- Form mode control (8.x-1.0-beta0)
Documentation page
VIEW MODES IN D8
-
2 visualization modes:
- Tapas most sold (highlighted)
- Tapas list
Requirements that we want to achieve:
VIEW MODES IN D8
Define a new view mode (I)
VIEW MODES IN D8
Define a new view mode (II)
VIEW MODES IN D8
Configure our view modes.
VIEW MODES IN D8
Using our view modes - Views
VIEW MODES IN D8
Final result
More Advantages of View modes USAGE
Contextual links
Inline editing
More Advantages of View modes USAGE
Available in several hooks and methods
/**
* Implements hook_entity_view().
*/
function hook_entity_view(&$build, $entity, EntityViewDisplayInterface $display, $view_mode) {
......
}
Template suggestions
/**
* Implements hook_theme_suggestions_HOOK().
*/
function node_theme_suggestions_node(array $variables) {
$suggestions = array();
$node = $variables['elements']['#node'];
$sanitized_view_mode = strtr($variables['elements']['#view_mode'], '.', '_');
$suggestions[] = 'node__' . $sanitized_view_mode;
$suggestions[] = 'node__' . $node->bundle();
$suggestions[] = 'node__' . $node->bundle() . '__' . $sanitized_view_mode;
$suggestions[] = 'node__' . $node->id();
$suggestions[] = 'node__' . $node->id() . '__' . $sanitized_view_mode;
return $suggestions;
}
Pseudo-fields in Drupal 8
Extra fields
- Common text for all tapas.
Requirements that we want to achieve:
Pseudo-fields in Drupal 8
Not field components that we handle as fields at Manage fields and Manage form display sections
Pseudo-fields in Drupal 8
Exposing pseudo-fields
/**
* Implements hook_entity_extra_field_info().
*/
function display_modes_example_entity_extra_field_info() {
$extra = [];
$extra['tapa']['tapa']['display']['common_text'] = [
'label' => t('Common text'),
'description' => t('Common text for Tapas'),
'weight' => 0,
'visible' => TRUE,
];
return $extra;
}
Pseudo-fields in Drupal 8
Exposing pseudo-fields
Pseudo-fields in Drupal 8
Retrieving content for the pseudo field
/**
* Class TapaViewBuilder
*
* Render controller for Tapas.
*/
class TapaViewBuilder extends EntityViewBuilder {
/**
* {@inheritdoc}
*/
public function buildComponents(array &$build, array $entities, array $displays, $view_mode) {
parent::buildComponents($build, $entities, $displays, $view_mode);
foreach ($entities as $id => $entity) {
$bundle = $entity->bundle();
$display = $displays[$bundle];
if ($display->getComponent('common_text')) {
$build[$id]['common_text'] = [
'#theme' => 'common_text',
'#text' => t('Taste this and other awesome Tapas at this DrupalCamp Es!!! '),
];
}
}
}
}
Pseudo-fields in Drupal 8
Final Result
Pseudo-fields in Drupal 8
Pseudo-fields in forms
/**
* Implements hook_entity_extra_field_info().
*/
function display_modes_example_entity_extra_field_info() {
$extra = [];
$extra['tapa']['tapa']['display']['common_text'] = [
'label' => t('Common text'),
'description' => t('Common text for Tapas'),
'weight' => 0,
'visible' => TRUE,
];
$extra['tapa']['tapa']['form']['common_text_form'] = [
'label' => t('Common text Form'),
'description' => t('Common text for form Tapas'),
'weight' => 0,
'visible' => TRUE,
];
return $extra;
}
Pseudo-fields in Drupal 8
Pseudo-fields in forms
/**
* Form controller for Tapa edit forms.
*
* @ingroup display_modes_example
*/
class TapaForm extends ContentEntityForm {
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state) {
/* @var $entity \Drupal\display_modes_example\Entity\Tapa */
$form = parent::buildForm($form, $form_state);
$display = $this->getFormDisplay($form_state);
if ($display->getComponent('common_text_form')) {
$form['common_text_form']['#markup'] = t('Common text form');
}
return $form;
}
....
....
SumMary
Time for Questions !!
@jose_lakatos
https://github.com/jlbellido
https://www.drupal.org/u/jlbellido
GET THE MOST OUT OF DISPLAY MODES!
By jlbellido
GET THE MOST OUT OF DISPLAY MODES!
- 4,287