Drupal Español - Blog

Tutorial para calcular contenedor de texto segun lineas. Hoy explicaremos cómo calcular el tamaño de un contenedor que contiene texto, y sólo queremos que se visualicen unas líneas determinadas.

Image

En este caso, tenemos varias tarjetas del mismo estilo, y quedaría mal que en cada una aparecieran más o menos líneas, por lo que vamos a hacer lo siguiente:

Inspeccionamos el párrafo, y en el inspector (el de chrome por ejemplo) buscamos qué tamaño de letra tiene, en nuestro caso vemos que tiene un 0.85rem (13.6 píxeles).

Después buscamos en el inspector la propiedad line-height, para los que no lo sepan consiste en establecer la altura de cada línea que forma el contenido de texto de un elemento, por lo que se emplea para controlar el interlineado del texto.

Nuestro párrafo tiene un line-height de 24 píxeles.

Image

Image

Una vez que tenemos el tamaño de letra y el line-height, los multiplicamos entre ellos y así averiguaremos el alto (height) que debe tener nuestro contenedor.

0.85 x 24=20.4 píxeles

Este sería el cálculo para una sola línea, pero en este caso queremos que nos aparezcan dos, por lo tanto multiplicamos por dos nuestro resultado:

20.4 x 2=40.8 píxeles

Hay que tener en cuenta que debemos sumar si el contenedor tuviera algún borde, padding o algo para que el cálculo sea lo más exacto posible, en nuestro caso no tenemos nada así que lo dejaremos así.

Image

Vemos que seguimos visualizando más de dos líneas, por lo que añadiremos a nuestro contenedor la propiedad overflow: hidden, así, lo que sobrepase los píxeles que hemos marcado de alto ya no lo veremos y quedará oculto.

Image

Ya tendríamos nuestro contenedor a la medida necesaria y todas las tarjetas ocuparían lo mismo.

Image

Y esto ha sido el tutorial para calcular el tamaño de un contenedor de texto segun el numero de lineas

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

Tutorial para la Creacion de Menus en Drupal

Nuestro CMS favorito ofrece la posibilidad de crear y configurar menús con diferentes estructuras en nuestro proyecto web, de forma que se pueden situar y visualizar en diferente regiones de la página.
Para ver su funcionalidad, se creará un menú configurando los enlaces más frecuentes de sitio. Para ello, vamos a la zona de administración de creación y edición de menús en /admin/structure/menu
Seleccionamos "Añadir menú". Se asignará el título "Sitios frecuentes".

Image

Con el menú anterior ya creado, se procederá a añadir los diferentes enlaces necesarios para construir el menú. Se creará la siguiente estructura de menú con sus correspondientes enlaces:
Sitios frecuentes
 - Inicio (<front>)
 - Login (/user/login)
 - Contacto (/Contact)
 - Artículos (/articles)
   - Primer artículo (/node/1)

Vemos como se pueden asignar jeraquías a la estructura del menú, de forma que tengamos el enlace principal como raíz, y a partir de ahí los demás enlaces que lo forman.
Así, para añadir enlaces al menú se seleciona "Añadir enlace" dentro del menú creado, elegimos una etiqueta para el título y se indica la ruta a la que llevará el enlace.
Para el elace a Inicio usaremos <front>:

Image

 Login será un enlace al formulario de acceso al sitio web:

Image

Contacto un enlace al formulario de contacto:

Image

El enlace Artículos llevará a un listado con todos los contenidos de tipo Artículo del sitio:

Image

Dentro del enlace Artículos se creará un sub-enlace al contenido "Primer artículo". Se observa que se podría escribir el título del contenido en el input autocompletable, pues al ser un contenido del sitio se detecta automáticamente sin necesidad de indicar su ruta:

Image

 De forma que si la ruta del artículo cambiara el enlace se vería inalterado y continuaría funcionando correctamente.

Image

Con el menú "Sitios frecuentes" y sus enlaces ya creados, se sitiuará en el sitio web, para ello iremos a "Diseño de bloques" en /admin/structure/block
Se situará en en la zona "Barra lateral", pare ello se selecciona "Colocar bloque" y se filtra por el nombre del menú creado "Sitios frecuentes", aceptar y guardar.

Image

Image

Image

Si visualizamos el sitio web se observa como el menú con los enlaces configurados se ha posicionado en la barra lateral:

Image

De esta forma, se pueden configurar menús personalizados en Drupal y situarlos en la zona del proyecto web que sea necesario.

Y esto ha sido el tutorial para la creacion de menus en Drupal

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

Hoy vamos a ver este Tutorial de instalacion del modulo Admin Toolbar en Drupal

Drupal nos proporciona una barra de administración  predeterminada para acceder a sus funcionalidades desde el panel de administración:

Image

Sin embargo, existe la posibilidad de mejorar esta barra de administración por defecto mediante la instalación del módulo llamado “Admin Toolbar”, que dará la opción de trasformar esta barra administrativa en un tipo de menú desplegable. De manera que se ofrece así un acceso más rápido y sencillo a las zonas de administración del sitio web en Drupal.
Para la instalación del módulo “Admin Toolbar”, o de módulos en general, se podría realizar o bien desde la interfaz en la opción de “Ampliar” de la barra de administración, o mediante drush descargando el proyecto admin_toolbar vía composer.

Para su instalación vía composer y drush, iremos al repositorio de Drupal donde se encuentre alojado el proyecto admin_toolbar: https://www.drupal.org/project/admin_toolbar
Una vez localizado, se lanzará el comando, el cual añadirá el módulo al sitio web:

Image

Después, instalaremos el módulo con el siguiente comando:

Image

Finalmente se vacía caché, quedando así el módulo instalado en el sitio web:

Image

Otra opción para la instalación de módulos, en esta ocasión “Admin Toolbar”, podría ser desde la interfaz del panel de administración de nuestro proyecto. Para ello, desde el repositorio de Drupal se descarga el fichero del módulo.

Posteriormente, elegiremos la opción “Ampliar” en /admin/modules y seleccionaremos “Add new module”:

Image

Se observa que se puede añadir el fichero admin_toolbar-3.0.3.tar.gz  / admin_toolbar-3.0.3.zip  o indicar la url del proyecto en Drupal.

Image

En esta ocasión se elegirá la descarga del fichero admin_toolbar-3.0.3.tar.gz

Image

Image

Después, lo añadimos para su instalación desde el panel de administración en /admin/modules

Se seleccionará “Admin Toolbar” y “Admin Toolbar Extra Tools” e instalar.

Image

Cuando finaliza la instalación, si se utiliza la barra de tareas del panel de administración, observamos que ahora aparecen los menú de forma desplegable para una acceso más sencillo y rápido a cada zona de la administración en Drupal.

Image

Y esto ha sido el tutorial de instalacion del modulo Admin Toolbar en Drupal

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

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

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

Image

Image

Image

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

Image

Image

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

Image

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

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

Image

Image

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

Image

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

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

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

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

Image

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.

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

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

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.

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.