Drupal 8 / D8

Ecoembes

Casanova — Tue, 27 Mar 2018 18:52:17 +0000

Ecoembes

Trabajando en nuestro CMS favorito (Drupal) y haciendo uso de diversas tecnologías como Js, Jquery, CSS y Compass, hemos dado soporte a diferentes necesidades de la web en general, como componentes, sliders y gestión de contenidos. Otro reto que asumimos en este sitio, fue la creación de un tema para adaptarlo a una versión móvil. Esto se implementó para que el sitio reconozca el dispositivo desde el que estaba entrando y muestre la versión para computadoras o dispositivos móviles según sea necesario.

En el mantenimiento de Ecoembes nos hacemos cargo en las reuniones con el cliente para dar una rápida retroalimentación sobre el impacto de los cambios, de alta prioridad y el plazo de resolución esperado.

www.ecoembes.com/en/

By Casanova Tue, 03/27/2018 - 20:52

Backend Developer

Frontend Developer

JavaScript

Drupal

CSS

Drupal 8 / D8

Drupal 8: Twig t() function with params

admin — Thu, 30 Jul 2020 22:39:47 +0000

Drupal 8: Twig t() function with params

Submitted by By admin on Friday, July 31, 2020 - 00:39.

<a href="#">{{ 'View all @type' | t({'@type' : 'articles'}) }}</a>

Drupal 8: Activar themes al habilitar un modulo

Capy — Mon, 07 Oct 2019 08:00:00 +0000

Drupal 8: Enable themes when a module gets enabled

Submitted by By Capy on Monday, October 7, 2019 - 10:00.

When you enable a Drupal module or profile, it may be useful to activate and set a theme for the end user and/or Drupal administration.

For this type of situations I leave you a snippet of code that is placed in the hook_install() of some module of your own that you have out there:

function foo_install() {
  $theme_list = [
    'stark',
    'adminimal_theme',
  ];

  // Install themes.
  \Drupal::service('theme_installer')->install($theme_list);

  // Get theme manager
  $system_theme = \Drupal::configFactory()->getEditable('system.theme');

  // Set default and admin themes.
  $system_theme
    ->set('default', 'stark')
    ->set('admin', 'adminimal_theme')
    ->save();
}

And that's it. When you activate the module "stark" will be activated for the end user and "adminimal_theme" for the admin part.

NOTE: This code logically works also in the hook_update_N() and hook_uninstall().

Bye!

Composer prohibits: Why my Drupal doesn’t upgrade?

leandro — Mon, 26 Nov 2018 06:00:00 +0000

Composer prohibits: Why my Drupal doesn’t upgrade?

Submitted by By leandro on Monday, November 26, 2018 - 07:00.

With Drupal 8, arrives Composer as the standard for dependencies management on our projects. This implies that our processes will need to be adapted to follow this new dependency management organization, like modules installation or Core upgrades.

In this case we will talk about components upgrades, focused on how “composer prohibits” command can help us when the upgrade process doesn’t work fine. Here we will use Drupal as an example to explain how this command work, but the solution works on every project with composer as dependency manager.

Let’s assume that we have a Drupal project with 8.5 Core version, and we'd like to upgrade to Drupal 8.6. What we would do is to execute the following:

composer update drupal/core --with-dependencies

When we execute this, Composer will upgrade dependencies and needed packages, but when Composer finished, it may happen that drupal/core is still in 8.5.x version. In this moment, many people fall back to force the upgrade with “composer update”. That can bring us to many headaches, because the update command will upgrade every dependency of the project.

It's on that moment when “composer prohibits” can help us. To check why Drupal core doesn’t upgrade, we will execute the following command:

composer prohibits drupal/core:8.6.2

Composer will check what package is blocking Drupal core 8.6.2 upgrade. The command give us a list of packages that are holding back the upgrade, like the following:

webflo/drupal-core-require-dev  8.5.8 requires  drupal/core (8.5.8)

As for this example, the command is telling us that “webflo/drupal-core-require-dev” needs 8.5.8 core version to work, and is blocking the core upgrade. To solve the problem, we should include this package when executing the update command:

composer update drupal/core webflo/drupal-core-require-dev --with-dependencies

Now Composer will upgrade both packages, drupal core and webflo package, and Drupal will be upgraded normally.

The composer prohibits command can be used to check if, for example, we like to upgrade some system requirement, like php version:

composer prohibits php:7.2

This will tell us which packages don’t support the new php version.

As we mentioned earlier, this isn’t an Drupal exclusive solution, so we can apply this fantastic command to any project that has Composer as dependency manager.

References:

Composer documentation

Drupal Template Helper

keopx — Tue, 23 Oct 2018 13:53:22 +0000

Drupal Template Helper

Submitted by By keopx on Tuesday, October 23, 2018 - 15:53.

Drupal Template Helper is a dev tool to works with a Drupal templates on Chrome/Chromium browser.

Enable Drupal theme debugging and other local/dev settings

Drupal as debug mode for show comments with different twig template.

Open up the settings.php file in your preferred code editor and uncomment the following lines (~ lines 767-770):

Uncomment

if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
  include $app_root . '/' . $site_path . '/settings.local.php';
}

Copy the file sites/example.settings.local.php to sites/default/settings.local.php using the following terminal command, or through your display:
1. ```
$ cp sites/example.settings.local.php sites/default/settings.local.php
```

Locate the following file default/settings.local.php and add:

$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/default/local.services.yml';

Create sites/default/local.services.yml file and add:

# Local development services.
parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
    debug: true
    auto_reload: true
    cache: false
services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory

Clear cache and visit your site.

Check an example of the potential output.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'node' -->
<!-- FILE NAME SUGGESTIONS:
   * node--article--teaser.html.twig
   * node--article.html.twig
   * node--teaser.html.twig
   x node.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->

Drupal Template Helper

A Chrome DevTools extension for Drupal 8, Drupal 7 and Backdrop CMS templates:

https://chrome.google.com/webstore/detail/ppiceaegogijpjodfpiimifhbnaifbnn

Installation

Step 1: Install and configure.

Download and install the Drupal Template Helper extension for Chrome.
Click on the extension icon.
Click on Options under Drupal Template Helper.
Add the urls for sites to enable the extension. Example: http://drupal.dev, http://www.drupal.dev.
Save.

Step 2: Enable Chrome Experimental APIs.

Go to chrome://flags/#enable-devtools-experiments, find Experimental Extension APIs and Developer Tools experiments, click the "Enable" links, and restart Chrome.
Open DevTools and click on Settings.
Find the Experiments tab and enable Allow custom UI themes. See screenshot below. Don't forget to restart Chrome again.

Note: If you want to hide the Twig comments, uncheck Show HTML comments under Preferences.

Step 3: Enable theme debug

For Drupal 8, see Phil's article here: https://www.chapterthree.com/blog/drupal-8-theming-setting-theme-debugging
For Drupal 7, see https://www.drupal.org/node/223440.

Usage

Inspect an element using DevTools and click on Templates in the DevTools sidebar.

Source

https://github.com/arshad/drupal-template-helper

Drupal 8 y 7: Modificar el peso de un hook en tu módulo para que se ejecute al final.

Capy — Tue, 29 Nov 2016 15:05:00 +0000

Drupal 8 y 7: Modificar el peso de un hook en tu módulo para que se ejecute al final.

Submitted by By Capy on Thursday, September 6, 2018 - 12:49.

Digamos que tienes un hook_form_alter() en tu módulo y quieres modificar un label de un elemento de formulario pero después de hacer tu cambio viene otro modulo y vuelve a tocar ese label. Jode ¿a que si?

No problemo, para eso está el hook_module_implements_alter() que nos permite especificar el orden en el que todos los módulos ejecutan un hook puntual:

/**
 * Implements hook_module_implements_alter.
 *
 * Run after the path module.
 */
function MI_MODULO_module_implements_alter(&$implementations, $hook) {
  if ($hook == 'form_alter') {
    unset($implementations['MI_MODULO']);
    $implementations['MI_MODULO'] = FALSE;
  }
}

Lo que hacemos es simplemente quitar y volver a poner a a nuestro modulo dentro de la cola de orden de ejecución de ese hook (hook_form_alter()). Pero al volver a agregarlo queda puesto al final de la cola, por lo que tu módulo va a ser el último en ser ejecutado.

Saludos!

Embeber componentes de drupal dentro de paragraph de forma transparente al usuario.

alvar0hurtad0 — Fri, 01 Dec 2017 09:23:21 +0000

Embeber componentes de drupal dentro de paragraph de forma transparente al usuario.

Submitted by By alvar0hurtad0 on Friday, December 1, 2017 - 10:23.

Drupal 8: Templates a nivel form element

Capy — Mon, 16 Oct 2017 16:57:35 +0000

Drupal 8: Templates a nivel form element

Submitted by By Capy on Monday, October 16, 2017 - 18:57.

Alguna vez pasa que necesitamos modificar el HTML que genera un elemento de formulario. No me refiero a un form sino mas bien al HTML que conforma un elemento de tipo input, password, email, select, etc.

Este es un ejemplo típico del output de drupal para un campo input normal de tipo texto:

Y su codigo:

Pues bien, imaginen ahora que necesitamos que el label vaya después de la description, o que el input queremos que esté contenido en un div. Todo lo anterior requiere que tengamos control sobre el template de este tipo de campo. ¿Como lo hacemos? Vamos a ello.

El hook_theme_suggestions_HOOK_alter()

Drupal de serie nos permite usar un template que ya está en el core y que contiene el HTML que se va a generar para los elementos de formulario en general. Pero nosotros queremos ir un poco mas allá y disponer de la posibilidad de modificar solo el HTML de tipos específicos de elementos de formulario.

Para eso usamos hook_theme_suggestions_HOOK_alter() que nos permite añadir template suggestion al template form_element (que es el que define a form-element.html.twig):

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function MITHEME_O_MODULO_theme_suggestions_form_element_alter(array &$suggestions, array $variables, $hook) {
  $suggestions[] = 'form_element__type__' . $variables['element']['#type'];
}

¿Y que hemos conseguido con el código anterior? Pues antes del alter solo existía "form-element.html.twig" y ahora hemos conseguido tener templates granulares para cada tipo de elemento:

// Template original que viene en el core:
form-element.html.twig

// Nuevos templates disponibles para que los uses en tu theme:
form-element--type--textfield.html.twig
form-element--type--email.html.twig
form-element--type--password.html.twig
form-element--type--select.html.twig
form-element--type--ETCETERA.html.twig

Hagamos algo con los templates

Bueno ya tenemos entendidos y bien gestionados los templates. Ahora sigamos con nuestro ejemplo. Copia "form-element.html.twig" desde el core o desde el theme desde el que estés heredando tu subtheme y ponlo dentro de la carpeta de "templates" de tu theme.

Tip: Ubicaciones de form-element.html.twig:

// Si tu theme NO hereda de algún theme del core
web/core/modules/system/templates/form-element.html.twig

// Si tu theme hereda de algún theme del core:
web/core/themes/classy/templates/form/form-element.html.twig
web/core/themes/stable/templates/form/form-element.html.twig

Y ya lo tienes!. Solo te queda limpiar el cache y modificar la posición de los label, el campo (el input), la description y hacer todo lo que necesites en dicho campo.

Chau!

Drupal 8: Crear un botón para ckeditor

Capy — Thu, 28 Sep 2017 11:50:06 +0000

Drupal 8: Crear un botón para ckeditor

Submitted by By Capy on Thursday, September 28, 2017 - 13:50.

Botones!, una forma estupenda de conectar ckeditor con funcionalidades avanzadas de Drupal.

En Drupal 8 tenemos un sistema realmente bueno para añadir botones a ckeditor. Necesitas saber un pelín de backend y otro de JS y poco mas.

En este tutorial vamos a crear un boton que nos permita poner una selección de texto en "bolder". Bolder viene a ser lo siguiente a poner un texto en negrita. Hay muchas fuentes que tienen fuentes mas gruesas que la negrita. Por ejemplo Open Sans:

El backend

Ckeditor es un plugin creado en JS. Entonces, ¿por que necesitamos PHP?

Fácil, porque tenemos que implementar una clase que informe unas pocas cosas al sistema para que este pueda ofrecernos el botón en la sección de configuración de ckeditor (ej: admin/config/content/formats/manage/full_html):

Ese botón marcado en rojo es nuestro plugin button

No te preocupes. La clase es muy simple y puedes usar como base la que hemos creado para este plugin:

<?php

namespace Drupal\ckeditor_bolder_text\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginBase;
use Drupal\ckeditor\CKEditorPluginInterface;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "BolderButton" plugin.
 *
 * @CKEditorPlugin(
 *   id = "BolderButton",
 *   label = @Translation("CKEditor Bolder Button")
 * )
 */
class BolderButton extends CKEditorPluginBase implements CKEditorPluginInterface {

  /**
   * {@inheritdoc}
   */
  public function getFile() {
    return drupal_get_path('module', 'ckeditor_bolder_text') . '/js/bolderbutton/plugin.js';
  }

  /**
   * {@inheritdoc}
   */
  public function getConfig(Editor $editor) {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  public function getButtons() {
    return [
      'BolderButton' => [
        'label' => $this->t('Bolder'),
        'image' => drupal_get_path('module', 'ckeditor_bolder_text') . '/js/bolderbutton/icons/bolderbutton.png',
      ],
    ];
  }

}

Expliquemos un poco:

La clase la hemos creado dentro de nuestro modulo "ckeditor_bolder_text" en /src/Plugin/CKEditorPlugin/BolderButton.php

Necesita 3 metodos:

getFile() indica la ruta en la que tenemos el plugin JS de ckeditor.

getConfig() nos brinda la posibilidad de crear un formulario de configuración para configurar parámetros para el plugin. Te va a quedar mas claro con este ejemplo. El botón de imagen Cuando lo añades al toolbar de ckeditor te ofrece el siguiente formulario:

getButtons() informa cual es el icono a usar en el botón y el label.

El Frontend

Ya declarada la clase de PHP solo nos queda crear un plugin de ckeditor que haga algo al clickear en el botón bolder:

/**
 * @file
 * Bolder plugin.
 */

CKEDITOR.plugins.add('BolderButton', {
  icons: 'bolderbutton',
  init: function (editor) {

    var bolderStyle = new CKEDITOR.style({element: 'span', attributes: {'class': 'bolder'}});

    // Listen to contextual style activation.
    editor.attachStyleStateChange(bolderStyle, function (state) {
      !editor.readOnly && editor.getCommand('setBolder').setState(state);
    });

    // Register the "bold" command, which applies the bold style.
    editor.addCommand('setBolder', new CKEDITOR.styleCommand(bolderStyle));

    editor.ui.addButton('BolderButton', {
      label: 'Bolder',
      command: 'setBolder'
    });

  }
});

No hace falta aclarar que el archivo JS está ubicado en el path definido anteriormente en la clase de PHP en el método getFile()

La explicación de lo que hace ya corresponde mas a ckeditor que a Drupal pero vamos a ello:

var bolderStyle define un elemento de tipo <span> con un class "bolder". Ese span es el que se le va a aplicar al texto seleccionado cuando le demos al botón (obviamente tenemos en nuestro CSS un class .bolder{ font-weight: 800 } sino no conseguiríamos nada).

editor.attachStyleStateChange() aplica o quita el tag dependiendo de si ya estaba aplicado o no anteriormente.

editor.addCommand() define el comando "setBolder" y su acción que viene a ser aplicar bolderStyle (ver mas arriba que está explicado bolderStyle)

Por ultimo editor.ui.addButton() añade el botón y le dice que comando ejecutar cuando sea presionado.

Resultado

Chau!

Drupal 8: Crear un usuario programáticamente

Capy — Wed, 30 Nov 2016 12:04:06 +0000

Drupal 8: Crear un usuario programáticamente

Submitted by By admin on Thursday, September 6, 2018 - 12:49.

Cortito y conciso:

use Drupal\user\Entity\User;

$user = User::create();
$user->enforceIsNew();
$user->setEmail('mr.foo@gmail.com');
$user->setUsername('mr_foo');
$user->setPassword('foopass');
$user->activate();

$new_user = $user->save();

NOTA: A partir de Drupal 8.2 el email es opcional en los usuarios (Siempre que desmarques la opción "Require email verification when a visitor creates an account" en /admin/config/people/accounts )

Saludos!