Image
Eliminar cabecera y añadir un before
Eliminar cabecera y añadir un before

Eliminar cabecera y añadir un before, me ha parecido interesante compartir esto, con un ejemplo práctico, vamos a ver como en el formulario de inscripción a una oferta de trabajo de una web, nos encontramos con que en la parte superior aparece una información que al cliente no le interesa, en este caso concreto un texto, pero podria aplicarse tambien en el caso de una imagen o un simbolo.

Image
Eliminar cabecera y añadir un before

Para ello, desde el navegador inspeccionamos el texto con el botón derecho del ratón, y le añadimos el comando display:none.

Este comando hace que el texto se oculte, y además hace también que el espacio dónde estaba disminuya.

Image
Eliminar cabecera y añadir un before

Una vez hecho ésto, volvemos a inspeccionar la zona que nos ha quedado (de la misma manera que antes, clic derecho - inspeccionar en el navegador), y le añadimos al div un padding 0.

Por último, queremos añadir una "x" más grande, ya que la actual es muy pequeña y puede pasar desapercibida, para ello, a la que tenemos actualmente, le ponemos un display none (así la eliminamos) y después añadimos la que el cliente nos requiere colocándole un before al botón.

Image
Eliminar cabecera y añadir un before
Image
Eliminar cabecera y añadir un before
Image
Eliminar cabecera y añadir un before

Si os fijais en el codigo mostrado arriba, vereis que también hemos posicionado nuestro before para que quede en uno de los laterales.

Image
Eliminar cabecera y añadir un before

De esta manera hemos conseguido ocultar el texto que no queriamos mostrar a requirimiento de cliente y cambiar el aspa de cierre que existia por una con mejor visualizacion y posicionada en su lugar natural.

Y esto ha sido el tutorial de como eliminar cabecera y añadir un before en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Campo de tipo referencia a termino de taxonomía en Drupal

Campo de tipo referencia a termino de taxonomía en Drupal. A continuación, se detalla como añadir en Drupal un campo en el que las opciones de selección se autocompletan con términos de taxonomía referenciada. Primero crearemos un vocabulario llamado “Tipos de noticias” desde /admin/structure/taxonomy/add

Image
Campo de tipo referencia a termino de taxonomía en Drupal

Con el vocabulario ya creado se agregarán los términos: Científica, Cultural y Deportiva.

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Image
Campo de tipo referencia a termino de taxonomía en Drupal

Posteriormente, creamos el campo “Tipo noticia” para el tipo de contenido “Artículo” desde /admin/structure/types/manage/article/fields/add-field

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Image
Campo de tipo referencia a termino de taxonomía en Drupal


En la edición del campo , seleccionamos el vocabulario de taxonomía creado previamente : Tipos de noticia.

Image
Campo de tipo referencia a termino de taxonomía en Drupal


Una vez tenemos el campo “Tipo noticia” creado y configurado, podemos ir a “Administración de la visualización de formulario” desde /admin/structure/types/manage/article/form-display para aplicar el campo creado al formulario de creación del tipo de contenido “Artículo”.

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Así, elegiremos el tipo de control: Lista de selección, un modo ‘select’ que nos nuestra un listado desplegable.

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Si ahora añadimos un contenido de tipo Artículo desde /node/add/article vemos que se puede elegir el término de vocabulario desde el selector.

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Image
Campo de tipo referencia a termino de taxonomía en Drupal

De forma que si en adelante se añade nuevos términos al vocabulario “Tipos de noticias”, aparecerían como posible selección del campo “Tipo noticia”. 

Para mostrarlo, se añadirá un nuevo término “Social” al vocabulario que referencia el campo:

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Si ahora editamos el nodo “Primera noticia científica” que se creó con anterioridad, o bien, creamos un nuevo contenido de tipo Artículo, se puede ver como permite seleccionar el nuevo término “Social” que hemos agregado al vocabulario “Tipos de noticia”.

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Siendo un tipo de campo que se completa con términos de referencia a un vocabulario (taxonomía), las opciones que permitirá elegir este campo serán los términos que tengamos añadidos al vocabulario en cuestión.

Image
Campo de tipo referencia a termino de taxonomía en Drupal

Para finalizar, señalar que se puede modificar el orden jerárquico con el que se presentan las términos desde el listado de términos, posicionándolos en el orden con el que se prefieran mostrar, en este caso “Social” ha subido una posición

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Y esto ha sido el tutorial de como crear un campo de tipo referencia a término de taxonomía en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Image
Esquivando jQuery
Mostrar y ocultar un elemento con CSS esquivando jQuery

Mostrar y ocultar un elemento con CSS esquivando jQuery.

Como hacer que un elemento aparezca y desaparezca desde un lado de la pantalla solo con CSS.

Como frontend hay veces que por exigencias del guion nos vemos en la tesitura de no poder usar jquery, ya sea por no saber usarlo, porque el cliente no quiere, por cuestiones de rendimiento, … En este artículo se explica un truco para poder hacer que un elemento aparezca de uno de los lados.

Son dos las condiciones que necesitamos para este truco, la primera y la mas obvia es saber CSS, y la otra, la que nos va a dar toda la lógica, es el combinado de un <label> con su atributo “for” y un <input type=”checkbox” con su “id”.

Por un lado pondremos la label en donde nos interese dentro de nuestro html y la maquetaremos para que tenga el aspecto de botón que queremos. Por otro lado, y este es uno de los puntos importantes a tener en cuenta, pondremos el checkbox justo por delante del div o el tag que vayamos a hacer que entre y salga de la pantalla.

Image
Mostrar y ocultar un elemento con CSS esquivando jQuery

Ahora toca dejar esto visualmente listo para que haga su magia.

Por un lado debemos poner el body con “overflow: hidden;”, también valdría hacerlo sobre un contenedor que encapsule tanto al checkbox como al div que le acompaña.

El checkbox lo maquetaremos de la siguiente manera:

.view-option-anchor{    
    display: inline-block;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

Es importante que no pongamos “display: none;“ ya que aunque no lo veamos es indispensable que este dentro del documento.

Ahora vamos con la caja que queremos que se oculte y se muestre, en este caso es el div con la clase “filter-content”.

Para ello lo que vamos a hacer es maquetarlo, posicionándolo para que posteriormente nos aparezca desde el lado derecho de la pantalla.

. filter-content{
    height: 100vh;
    width: 100 vw;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 9999;
    transition: left 0.4s ease;
}

Bien, ahora ya está colocado cada elemento donde debe estar en su posición inicial. En este caso no veremos el div “filter-content” porque sobresale de la ventana por la derecha. Para verlo, y aquí es donde está la magia, no ayudaremos de su posición con respecto el checkbox de la siguiente manera.

 .view-option-anchor:checked + .filter-content{
    left: 0;
}

De esta forma haremos que el div que está justo al lado de checkbox entre dentro de la pantalla.

Por último, para hacer totalmente usable este elemento que sale y entra de la pantalla, necesitaremos un botón de cierre, o más bien un nuevo <label> en el que su “for” apunte también al “id” de este checkbox y que se encuentre dentro de el div que entra y sale. Con lo que la estructura html nos quedaría así:

Image
Mostrar y ocultar un elemento con CSS esquivando jQuery

Y con esto tendríamos la funcionalidad completa. Todo lo referente al aspecto de estos label como botones queda en tu mano para ponerlos a tu gusto.

Esta forma de usar el checkbox puede aplicarse a diferentes situaciones, la única condición es usar y posicionar los elementos de la forma descrita, así que toca experimentar todo lo que se te ocurra.

Y esto ha sido mostrar y ocultar un elemento con CSS, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

 

 

Image
Crear una tabla de bbdd en la instalación de un módulo en Drupal
Crear una tabla de bbdd en la instalación de un módulo en Drupal

En el desarrollo de un módulo en Drupal, una de las cosas que más nos puede interesar es, que en la instalación de nuestro módulo, se pueda generar una tabla donde nuestra aplicación pueda tratar datos.

Sobre la relación de Drupal y las bases de datos

Drupal utiliza un sistema que permite llevar a cabo dicha operación independientemente del motor de base de datos con el que esté trabajando llamado Database Abstraction Layer que traduce el lenguaje de Drupal para el tratamiento de las bases de datos al lenguaje del motor de base de datos. De modo que cualquier operación que desarrollemos con base de datos en Drupal, podrá funcionar en cualquier motor de base de datos en el que instalemos Drupal.

Entendamos motor de base de datos como sistema que tengamos instalado en el servidor, como MariaDB, MySQL, PotgreSQL, etc.

Suponiendo que tenemos creado un primer módulo, en caso contrario podéis encontrar un interesante tutorial con los primeros pasos a seguir en este mismo portal, tenemos que tener en cuenta que podemos, en la instalación del módulo, incluir un fichero de instalación que establezca los primeros pasos para la implantación del módulo y entre ellos el de la creación de nuestras tablas en bases de datos.

Pasos previos a la creación del módulo

Recordemos que los ficheros de nuestro módulo tiene que estar en una carpeta del mismo nombre dentro de la carpeta custom de la carpeta modules.

/var/www/html/midrupal/web/modules/custom/misdatos

En dicha carpeta tenemos creado el fichero misdatos.info.yml, en el cual introducimos los damos básicos que Drupal necesita para saber qué características tiene el módulo como el nombre, el tipo, una descripción, etc. A continuación vemos los datos que yo he introducido.

name: Mis datos
type: module
description: 'Modulo de base de datos'
package: Mis modulos
core_version_requirement: ^9

Excepto package que no lo es pero permite tener organizado nuestro módulo en grupos, el resto son datos obligatorios.

Ahora entre todos los módulos podemos encontrar el nuestro en un grupo llamado “Mis módulos”.

Sería la información mínima, pero podemos ampliarlo poniendo la versión del módulo.

version: 1.0

Ocultar el módulo a miradas indiscretas con el parámetro hidden, de modo que no aparecerá en el listado de módulos.

hidden: TRUE

También podemos indicar una ruta de la página de configuración del módulo, para lo cual tendríamos que poner el nombre de sistema de la ruta de dicha página.

configure: misdatos.admin

Puedes encontrar información completa sobre la configuración del fichero info en el enlace https://www.drupal.org/node/2000204

El módulo en ese estado, podemos activarlo pero no va a hacer nada aún. Realmente, Drupal sabe que existe pero nada más.

Durante la instalación del módulo

Para que módulo haga algo en la instalación tenemos que incluir un fichero llamado misdatos.install. Dicho fichero es un script de php que contiene una función hook_install()

Para los que no lo sepan, un hook o gancho es una función que llama a una función preestablecida que busca Drupal en su ejecución, y si existe, ejecuta sus instrucción. Veamos cómo funciona.

Para hacer funcionar el hook_install(), tenemos que cambiarle el nombre y  sustituir hook por el nombre de nuestro módulo de modo que la función se llamaría misdatos_install().

Lo primero que tener ya escrito en nuestro fichero es:

<?php

function misdatos_install(){

}

Es conveniente al programar en Drupal acostumbrarse a seguir las buenas prácticas establecidas por la comunidad, y una cosa que se ha establecido, ha sido la de documentar correctamente lo que se programa. De modo que en este caso tenemos que introducir un comentario en la parte superior del fichero con la siguiente estructura.

/**
*@file
*Descripción de la función del script en inglés
*/

@file, es una directiva que describe la función del fichero y que afecta a la documentación automática de Drupal. Bueno, es un tema para hablar mucho pero no es que no trae aquí de momento.

Nuestro fichero tiene ahora este aspecto.

<?php

/**
*@file
*Descripción de la función del script en inglés
*/

function misdatos_install(){

}

El siguiente paso es llamar del mismo modo a la función gancho, o hook que permite la creación de tablas y este se llama hook_schema(). Igual que antes, modificamos el nombre por misdatos_schema().

Tenemos que tener en cuenta que para que el hook_install pueda trabajar correctamente con la tabla que creemos, esta tiene que estar generada antes de que se ejecute la instalación, por ello tenemos que poner la función que crea las tablas antes de todo.
 

<?php

/**
*@file
*Descripción de la función del script en inglés
*/

function misdatos_schema(){

}

function misdatos_install(){

}

Encima de cada función ponemos la misma estructura de comentario pero sin la directiva @file.

<?php

/**
 *@file
 *Descripción de la función del script en inglés
 */

/**
 *  Descripción de la función en inglés
 */
function misdatos_schema(){

}

/**
 *  Descripción de la función en inglés
 */
function misdatos_install(){

}

En la función esquema podemos crear las tablas que necesitemos. Lo que tenemos que crear dentro de la función misdatos_schema() es un array $schema[]. Cada campo del array tiene el nombre de la tabla que creemos $schema[‘tabla_uno’]. Dentro de cada campo introducimos una array que contiene las características de cada campo de la tabla. Veamos un ejemplo:

$schema[‘tabla_uno’] = [
  ‘description’ => ‘Cadena de texto que describe la tabla’,
  ‘fields’ => [ // Estructura de campos que define una tabla
  ],
  'primary key' => [ // Indica los campos que son clave primaria de la tabla ],
  ‘indexes’ => [ // array que contiene los indices de la tabla ],
];

Es conveniente tener algo de idea respecto al funcionamiento de las bases de datos.

El campo fields, almacena un array con la estructura de campos de la tabla. Podemos poner un ejemplo del módulo book.
 

$schema['book'] = [
 'description' => 'Stores book outline information. Uniquely defines the location of each node in the book outline',
   'fields' => [
     'nid' => [
       'type' => 'int',
       'unsigned' => TRUE,
       'not null' => TRUE,
       'default' => 0,
       'description' => "The book page's {node}.nid.",
     ],
 
… //
 
   'primary key' => ['fid', 'type', 'id', 'module'],
   'indexes' => [
     'type_id' => ['type', 'id'],
     'fid_count' => ['fid', 'count'],
     'fid_module' => ['fid', 'module'],
   ],
]; // Cerramos el array
return $schema;
}

El primer campo es el campo nid, de tipo (type) int, unsigned, no null, con valor por defecto (default) cero y una cadena de descrición (description).

En el módulo file podemos encontrar en su fichero de instalación el campo ‘type’, que guarda una cadena ascii (varchar_ascii) con una longitud máxima de 64,...
 

'type' => [
       'description' => 'The name of the object type in which the file is used.',
       'type' => 'varchar_ascii',
       'length' => 64,
       'not null' => TRUE,
       'default' => '',
     ],

Puedes encontrar más información sobre la estructura de $schema en la url https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Database!database.api.php/group/schemaapi/9.1.x

Finalmente, dentro de la función sacamos el resultado con un return $schema, que lo devuelve.

Nosotros seguimos con nuestro ejemplo y vamos a crear nuestro primer campo en nuestra primera tabla y el fichero queda así.

<?php

/**
 *@file My first bbdd module
 */

/**
 *Implements hook_schema
 */
function misdatos_schema(){

  $schema['tabla_uno'] = [
    'description' => 'Mi primera tabla',
    'fields' => [ 
      'campo_primero' => [
        'description' => 'Descripción de mi campo',
        'type' => 'int',
        ],
     ],
  ];
return $schema;
}

Guardamos el fichero e instalamos el módulo. En la interfaz no veremos nada pero si entramos en MySQL y consultamos las tablas de la base de datos de Drupal, entre ellas encontraremos la nuestra. Vacía pero será nuestra primera tabla en la base de datos.

Image
módulo en drupal
Image
navegador de entidades
Drupal Navegador de Entidades: Como hacer que muestre lo preseleccionado.

Vamos a ver: Drupal Navegador de Entidades: Como hacer que muestre lo preseleccionado. 

Con el módulo Entity Browser podemos seleccionar una taxonomía, medio o nodo con un método más visual y cómodo que una autocomplete o una lista, ya que nos abre una ventana modal o iframe que contiene una vista que podemos customizar de la manera que queramos

Pero, además de que no es un modulo sencillo por si mismo, de manera natural tiene una funcionabilidad que no es la apropiada cuando vas a seleccionar una entidad, pues cada vez que quieras seleccionar una nueva entidad te la suma, no modifica.

Para que su comportamiento sea el de remplazo de tu preselección, te ponemos los pasos que has de seguir:

Lo primero del todo es en la entidad nueva de  “entity browser” , desplegar la última opción de “selection display” y seleccionar  “multi step selection display” e indicarle que tipo de entidad estas usando en el campo que vas a mostrar con este display.

Drupal entity browser

Lo siguiente ( que ya te lo pide el modulo) es crear una vista del tipo “navegador de entidades”  que muestre las entidades tal como quieres que se vean , que hagas los filtros que necesites y sobre todo, muy importante, que como filtro contextual  añadas la ID de la entidad que estas mostrando.

Drupal navegador de entidades

En mi caso, como estoy mostrando una taxonomia es TID ( Taxonomy ID) desde el filtro contextual , marcando “entity browser Context”

drupal entity browser Context

Por último, en el formulario del campo que quieres que se muestre con “entity browser” , le das a la tuerquecita de la derecha y en selection mode marcas “edit selection”

Drupal entity edit selection

Un consejo: aplícale unos pocos estilos custom al modal que se te abre o será ilegible o incomodo de usar.

Esto ha sido: Drupal Navegador de Entidades: Como hacer que muestre lo preseleccionado. 

Esperamos haberos ayudado, dejad comentarios si necesitáis mas detalles o no os funciona

Image
Restablecer la contraseña de admin de Drupal 8
Restablecer la contraseña de admin de Drupal 8

Seguro que conocéis los scripts incluidos en el core de Drupal 8 para restablecer la contraseña del admin, pero no todos los servicios de alojamiento permiten el acceso SSH necesario para ejecutarlos, lo que hace que sea imposible recuperar la contraseña de la cuenta de administrador de Drupal 8 a través de la línea de comandos.
Este método solo debe emplearse como última opción cuando todo lo demás falla.
Esta forma de restablecer la contraseña, usa un script PHP que debe cargarse en el servidor web, por lo que debemos poseer la capacidad de cargar dicho PHP en el servidor donde está alojado el sitio web.
En esencia, el script PHP ejecuta un bootstrap completo de Drupal para obtener acceso a las funciones necesarias que generan la contraseña administrativa y luego actualiza la base de datos con la nueva contraseña que especificamos desde de la URL cuando ejecutamos el script mediante el navegador web.


OJO: dejar este script en el servidor después de restablecer la contraseña constituye un agujero de seguridad muy grave que permite a cualquier persona restablecer la contraseña de administrador. Úsalo con cuidado y elimínalo siempre que hayas terminado de usarlo.

Empecemos:

1.    Primero, crea un archivo con un nombre cualquiera (auladrupal.php por ejemplo).
2.    Copia y pega el siguiente código de Drupal en el archivo y guárdalo.

<?php
use Drupal\Core\DrupalKernel;
use Symfony\Component\HttpFoundation\Request;

if (pathinfo(__FILE__, PATHINFO_FILENAME) == 'admin-pass-reset') {
  die('Please change your file name to a random string to continue');
}

// Boot Drupal.
$autoloader = require __DIR__ . '/autoload.php';

$request = Request::createFromGlobals();
$kernel = DrupalKernel::createFromRequest($request, $autoloader, 'prod', FALSE);
$kernel->boot();

// Get password hasher service.
$password_hasher = $kernel->getContainer()->get('password');

// Hash password.
if (isset($_GET['pass']) && !empty($_GET['pass'])) {
 $newhash =  $password_hasher->hash($_GET['pass']);
}
else {
  die('Retry with ?pass=PASSWORD set in the URL');
}

// Update user password.
$updatepass = Drupal::database()->update('users_field_data')
  ->fields(array(
    'pass' => $newhash,
//  'name' => 'admin',
//    'mail' => 'yourmail@example.com'
  ))
  ->condition('uid', '1', '=')
  ->execute();

// Clean user 1 cache.
Drupal::cache('entity')->delete('values:user:1');

print "Listo. Por favor, borra este archivo lo antes posible";

 

3.    Sube el archivo a la raíz del directorio de instalación de Drupal (es decir, donde existen index.php, update.php, robots.txt y otros archivos y directorios).
4.    Ejecuta el script, solicitando el archivo en un navegador web utilizando el siguiente patrón de URL:

http://auladrupal.com/auladrupal.php?pass=mypassword

5.    En la URL anterior:

  • cambia auladrupal.com con tu nombre de dominio real.
  • cambia auladrupal.php con el nombre de archivo real que especificó en el paso uno anterior,
  • cambia mypassword con la nueva contraseña deseada.


6.    Nota: Te recomiendo que elijas una contraseña que contenga letras y números en mayúsculas y minúsculas, y que tenga al menos 12 caracteres.
7.    Si la secuencia de comandos se ejecuta correctamente, verás el texto "Listo" en tu navegador web. La contraseña de la cuenta administrativa creada al instalar Drupal (es decir, usuario / 1) se cambiará a "mypassword" (o cualquier valor que especifiques).
8.    Finalmente, elimina el archivo del directorio raíz de instalación de Drupal.

Cambiar el nombre de usuario de la cuenta de administrador

Si no recuerdas (o simplemente no sabes) el nombre de usuario de la cuenta de administrador, en el script anterior, descomenta la linea // 'name' => 'admin', a 'name' => 'admin', y el nombre de usuario también se cambiará a "admin".
También puedes restablecer la dirección de correo electrónico del administrador de la misma manera, descomentando (elimina las //) la línea de la dirección de correo electrónico en el script anterior.

Por último, no olvides eliminar el archivo tan pronto como hayas cambiado la contraseña.

Y este es el método para restablecer la contraseña del admin en Drupal 8

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.