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
instalar y configurar slick carousel
Instalar y configurar slick carousel

Instalar y configurar slick carousel Si alguna vez habeis tenido que desarrollar una web, seguro que os han pedido algun slider con fotos y/o videos. Para mi gusto, la mejor opción para ello es usar slick carousel, puesto que me permite integrarlo con views y configurarlo a mi gusto.

Aunque pudiera parecer complicado, instalarlo y configurarlo es realmente sencillo, veamos como.

1.Instalar y Configurar Slick
Instalar los módulos:

Nota: cuando se instala el módulo Slick, se instala también Slick UI.

Una vez instalados ir a Ampliar > List> Slick UI > configurar

Image
Instalar y configurar slick carousel

Ahora hay que crear un conjunto de opciones de Slick

Image
instalar y configurar slick carousel

A modo de ejemplo se va a llamar: Store_Slick

Image
instalar y configurar slick carousel

En el menú lateral izquierdo ir a la opción Configuración

Image
Instalar y configurar slick carousel

Seleccionar las siguientes opciones y guardar.

  • Accesibility
  • Arrows
  • Dots
  • Infinity
  • Swipe
  • Touch move
  • Use CSS
  • Use CSS Transforms
  • jQuery easing: Linear
  • Wait for animate

 

2.Añadir el nuevo conjunto de opciones a una vista
Dentro de la vista creada ir al apartado FORMATO > Formato.


En esta ventana se selecciona el estilo que va a tener o como se va a ver la información de la vista, y es aquí donde debe aparecer la opción Slick Carousel (si se han instalado correctamente los módulos).

Image
Instalar y configurar slick carousel

Lo siguiente que se tiene que hacer es configurar las opciones de estilo. Para ello:

  • Seleccionar la casilla Vanilla Slick.
  • En Optionset main, justo debajo de la anterior, seleccionar Store_Slick (ó como se haya llamado al conjunto de opciones de Slick anteriormente).
  • En Skin main, a la derecha de la anterior, seleccionar Classic
  • Y por último, elegir el número (X) de elementos que por defecto se van a mostrar en el, independientemente del número total que el carrusel muestre. Para seguir con el ejemplo,  van a ser tres elementos los que se verán por defecto
    • Grid large 3
    • Grid medium 3
    • Grid small 3

El resultado será el siguiente:

Image
Instalar y configurar slick carousel

Y esto ha sido Instalar y configurar slick carousel, 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
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
aula drupal views
Drupal views Contiene cualquier palabra = No filtra bien

Drupal views Contiene cualquier palabra no funciona como cabe esperar, pues busca cualquier palabra que "contenga", no palabras enteras. 

Por su puesto esto es solo una solución temporal para poder filtrar por contiene cualquier palabra. No es un arreglo definitivo, pues lo que vamos a hacer es un filtro nuevo para filtrar los resultados de la vista antes de que estos se impriman. 

Antes de nada, os muestro como hace Drupal actualmente una consulta de "contiene" y otra de "contiene cualquier palabra". 

Drupal views Contiene cualquier palabra

Como veis, envía en ambas ocasiones la consulta de la misma manera "LIKE %Palabra%". 

En este caso hemos buscado "CID" y nos ha devuelto todos los registros cuyo nombre contiene Cid, cuando buscábamos saber solo quienes se apellida o llaman CID.

Comenzamos con nuestro filtro de "contiene cualquier palabra" .

En primer lugar debemos saber el nombre de sistema del filtro expuesto que queremos modificar su comportamiento:

Drupal views Contiene cualquier palabra    

Para ello nos dirigimos al filtro expuesto y copiamos el identificador de filtro.

Drupal views Contiene cualquier palabra    

Con esto podemos crear un pequeño modulo muy sencillo con un hook de las vistas

HOOK_word_views_pre_render(ViewExecutable $view):

Primero obtenemos los resultados de la vista actual en el $view->exposed_data;

Después guardamos el valor de lo que se buscó para volver a filtrarlo más adelante. (Variable $texto) 

En $view->exposed_data;, obtenemos rows con sus keys y cada una de ellas todos los valores de los users. 

Así que vamos a almacenar esas Keys para mas adelante saber que row quiero eliminar.

Hacemos una nueva consulta sobre los users obtenidos con el texto bien filtrado (con espacios al principio, final y ambos) : 

->condition('field_nombre_completo', $texto . ' %', 'LIKE')

->condition('field_nombre_completo', '% ' . $texto . ' %', 'LIKE')

->condition('field_nombre_completo', '% ' . $texto, 'LIKE');

por ultimo comparamos los users de esta ultima consulta con los de la primera y eliminamos del resultado de la vista los rows que contengan a esos usuarios ( sabemos su Key).

use Drupal\views\ViewExecutable;


/**
 * Implements hook_views_pre_render().
 */
function contain_word_views_pre_render(ViewExecutable $view)
{
    $filtroexpuesto = $view->exposed_data;

    if (!empty($filtroexpuesto['field_nombre_completo_value'])) { //Comprobamos si se filtró por este campo
        $textos = $filtroexpuesto['field_nombre_completo_value'];  // Guardamos el valor del filtro que se hizo
        $palabras = explode(" ", $textos); //separamos las palabras por espacios
        $uid = [];

        foreach ($view->result as $key => $item) {  // Recorremos los Rows del resultado
            $user = $item->_entity;
            $uid['uid'][(int)$user->id()] = $key; // Almacenamos su Key
            $uid['values'][] = (int)$user->id();
        }
        if(!empty($uid['values'])){
            foreach ($palabras as $palabra) {  // Recorremos los Rows del resultado
                $texto = $palabra;
                $query = \Drupal::entityQuery('user')
                    ->condition('uid', $uid['values'], 'IN');
                $group = $query->orConditionGroup()
                    ->condition('field_nombre_completo', $texto . ' %', 'LIKE')
                    ->condition('field_nombre_completo', '% ' . $texto . ' %', 'LIKE')
                    ->condition('field_nombre_completo', '% ' . $texto, 'LIKE');
                $uidfilter = $query->condition($group)->execute();  // Hacemos de nuevo el filtro sobre estos usuarios
                // con el texto filtrado por "contiene cualquier palabra"

                $uids_eliminar = array_diff($uid['values'], $uidfilter); // Guardamos las ids a eliminar

                foreach ($uids_eliminar as $item) { // Recorremos de nuevo
                    // y eliinamos los rows que no coinciden con la segunda consulta
                    $key = $uid['uid'][$item];
                    unset ($view->result[$key]);
                }
            }
        }

    }
}

 

Si necesitas más ayuda con cualquier tema, prueba nuestro buscador para encontrar tu solución rápidamente.

Espero que te haya servido.

Esto ha sido Drupal views Contiene cualquier palabra = No filtra bien