Drupal Español - Blog

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:

• Slick: https://www.drupal.org/project/slick

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

• Slick View: https://www.drupal.org/project/slick_views

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

Image

Ahora hay que crear un conjunto de opciones de Slick

Image

A modo de ejemplo se va a llamar: Store_Slick

Image

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

Image

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

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

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.

Herramientas para desarrollar Front Drupal. Esta es una lista de herramientas que todo desarrollador web necesita, tanto si desarrolla con Drupal como si lo hace con otras tecnologías.

Es muy probable que vayamos a requerir imágenes de prueba para nuestro proyecto, que utilizaremos hasta que el cliente nos entregue las definitivas (y esto es algo que algunas veces se puede demorar bastante).

Image

Para ello podemos hacer uso de herramientas como https://www.pexels.com que pone a nuestra disposición una enorme cantidad de imágenes que podemos filtrar por texto o categoría y así encontrar la que más se ajuste a nuestras necesidades. En caso de no querer imágenes con una temática concreta podemos optar por https://dummyimage.com que nos permite generar imágenes con tamaño, texto, color de fondo y color de texto a elegir.

Image

Además de imágenes también podríamos necesitar texto de ejemplo, puesto que es casi seguro que no tendremos los definitivos hasta que tengamos muy avanzado nuestro proyecto, para esto tenemos https://www.lipsum.com , un generador automático de texto en latín que nos creará párrafos y párrafos de texto a necesidad.

Image

Otras herramientas que también nos pueden ser útiles, al menos si somos de front, son aquellas que nos permiten generar y hacer pruebas con sombras, bordes y otros elementos, tales como https://www.cssmatic.com, con la que podemos generar CSS de borders, box-shadows y demás elementos acelerándonos y facilitándonos el trabajo al poder modificar pixelajes, anchos, altos y demás sin tener que teclear nada, simplemente arrastrando botones en el editor.

Image

Image

O como http://apps.eky.hk/css-triangle-generator que nos ayuda a crear triángulos de todo tipo y tamaño que podemos colocar en elementos before o after, utilizar de fondo, etc., modificando su ancho, alto, orientación y en general dándonos una amplia variedad de posibilidades.

Image

En último lugar estaría https://cssgradient.io , otra herramienta que nos permite crear gradientes en css (al igual que la herramienta cssmatic arriba mencionada), pudiendo seleccionar los colores a mezclar, además del punto de fusión del gradiente. Nos permite también subir imágenes, cogiendo los colores de las mismas y así ayudarnos a encontrar el color que más se adapte a nuestro proyecto. La razón de incluirla en esta lista es que la interfaz es más bonita. amigable e intuitiva que la anterior.

Image

Y esto ha sido herramientas que todo desarrollador Front (drupal o no) necesita, 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.

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". 

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:

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

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

Drupal 7 renderiza los campos "adjuntos" (File Field)  como simples enlaces sin atributos tales como target, title o alt. Por lo tanto, si queremos personalizar el enlace con un target blank en drupal 7,  nos encontramos que haciendo un print drupal $content['field_adjuntos']; nos renderizaria el campo con un simple <a href="">

Para evitar esto, nos vamos al archivo node.tpl o node---[node_type].tpl de nuestro theme y buscamos la linea donde se impime el contenido. Ahi ocultamos el campo para decidir luego donde y como imprimirlo.

hide($content['field_adjuntos']);
print render($content);

Donde queramos imprimir el adjunto, hacemos la siguiente comprobación:

Si el campo "field_adjuntos" no está vacio, lo guardamos en una variable llamada $adjuntos concatenando esta con todas las clases que queramos ponerle.

Si el campo es "ilimitado" recorremos los elementos con un Foreach.

Por ultimo imprimimos el campo como queremos (custom). En este caso con un target blank.

if (!empty($node->field_adjuntos)){
    $adjuntos = '<div class="field-name-field-adjuntos">';
    $label = $content['field_adjuntos']['#title'];
    $adjuntos .= '<div class="field-label">'.$label.'</div>';
    $adj = $content['field_adjuntos']['#object']->field_adjuntos['und'];
    foreach ($adj as $adjs){
        $adjdesq = $adjs['description'];
        $adjuri= $adjs['uri'];
        $file_path = file_create_url($adjuri);
        $adjuntos .= '<div class="field-item"><a href="'.$file_path.'" target="_blank">'.$adjdesq.'</a></div>';
    }
    $adjuntos .= '</div>';
    print $adjuntos;
}

En el ejemplo, yo le pongo varias clases propias de drupal para que me lo estilice como el theme que ya tengo definido. le indico tambien que el titulo será la descripcion del campo y formateo la propiedad "URI" que es de donde sacamos la urtl Absoluta.

Recordad que si no nos imprime nada , o nos imprime mal lo que queremos imprimir, con estas 3 lineas podemos ver que nos trae el campo y como se llaman sus propiedades:

print "<pre>";
print_r ($content['field_adjuntos']);
print "</pre>";

Por varios motivos podemos querer modificar el propio renderizado de drupal. Para meter clases personalizadas, para personalizar los title y alt, etc...

Si necesitas obtener mas valiables en tpl ve a dupal.org

En este articulo hemos visto como añadir target blank en Drupal 7 con los tpl para los field adjuntos

Este articulo tambien te será util si tu busqueda ha sido:

Drupal render file field
Drupal target blank in file field
Drupal field_file custom
Drupal custom link file
Drupal custom PDF