Drupal Español - Blog

Para iniciar este tutorial de filtrado de idioma en vistas de Drupal, antes de comenzar a traducir un sitio web en Drupal tendríamos que añadir el idioma en admin/config/regional/language/add , en esta ocasión hemos agregado idioma inglés.

Image

Image

Con el idioma ya añadido, se pueden activar los campos del tipo de contenido que se necesite traducir como traducibles desde /admin/config/regional/content-language

Se activarán como traducibles los campos “título” y “body” del tipo de contenido “Artículo”:

Image

Image

Una vez tenemos traducidos los contenidos, como en este caso dos contenidos de tipo Artículo traducidos a inglés:

Image

Seguidamente procedemos a crear una vista para ver la aplicación del filtrado por idioma en Drupal. Con este tipo de filtrado en vistas principalmente lo que logramos es que no se muestren los contenidos duplicados en la visualización de la vista, detectando el sitio web que idioma mostrar en cada caso según el idioma seleccionado en la interfaz.

De manera que creamos la vista a la que posteriormente añadiremos el filtro de idioma desde la siguiente ruta /admin/structure/views/add , se agregará un nombre requerido a la vista y más abajo se puede añadir el nombre interno de sistema para la vista que se está creando:

Image

Como opciones de la vista se puede seleccionar mostrar Contenido de tipo Artículo ordenado por los más recientes primero:

Image

Para la visualización de la vista, se ha creado una página con ruta /articles-list donde se mostrará el listado de artículos en forma de tabla:

Image

Con la vista ya creada si accedemos directamente a la ruta para su visualización <nombre-proyecto>/articles-list se puede observar que muestra los contenidos en ambos idiomas, independientemente del idioma seleccionado para la interfaz de la web.

Image

Así, primero en la opción “Idioma de visualización” se añadirá Idioma Texto de la interfaz seleccionado para la página:

Image

Image

Si se vuelve a visualizar la vista con el cambio <nombre-proyecto>/articles-list observamos que ya no se muestran contenidos en los dos idiomas, sólo en el seleccionado, en este caso español. Sin embargo, los contenidos aparecen repetidos:

Image

Para evitar la repetición de los contenidos bastaría con añadir un criterio de filtrado por idioma para la vista:

Image

Image

Image

Con el criterio de filtrado ya aplicado si vamos a la visualización de la vista <nombre-proyecto>/articles-list ya no se muestran los artículos duplicados.

Image

Y esta es el modo de hacer un filtrado de idioma en vistas de 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.

Commerce pasarela de pago en Drupal. Si queremos vender en nuestra tienda online, debemos proporcionar a nuestros clientes una forma de pago que les genere confianza por un lado, y que nos de seguridad a nosotros por el otro, para ello, una de las pasarelas más utilzadas (en Europa) es PayPal, con la particularidad que nos permite, aceptar tanto los pagos mediante cuentas de la plataforma, como pagos con tarjeta de crédito/débito, lo cual es muy cómodo porque con una única plataforma aceptamos varias formas de pago.

Vamos a ver como añadirla a nuestra página. Lo primero será, como siempre, ir a la página del proyecto y usar composer para instalar la extensión mediante el comando $ composer require 'drupal/commerce_paypal:^1.0@RC'

Image

Esto descargará el módulo y sus dependencias. Ahora debemos activarlo en el sitio, vamos a Ampliar y en la búsqueda escribimos "payp", cuando nuestre el módulo, lo activamos

Image

Una vez activado, vamos a Comercio -- Configuración -- Pago -- Pasarelas de pago

Image

Pulsamos sobre "+Añadir pasarela de pago"

Image

Cubrimos los campos con las opciones mostradas, marcando el "Modo: prueba" para tener un entorno de pruebas con pagos simulados, cuando hayamos finalizado la fase de desarrollo, volveremos aquí y marcaremos "producción". Las claves de la API las obtendremos desde el sitio de PayPal Develop creandonos una cuenta ( no es necesario tener cuenta live ).

Image

Dejando estas opciones marcadas, aceptaremos pagos tanto con cuenta PayPal por defecto como con tarjeta de crédito o débito, guardamos las opciones.

Image

Y esto ha sido commerce pasarela de pago, 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.

Webform adjuntar archivos al formulario de contacto. Tras haber instalado el módulo webform (aquí lo teneis explicado) ahora vamos a ver como añadir un campo que permita adjuntar archivos a nuestro formulario para, por ejemplo, que nos manden un CV junto al formulario.

Para ello, vamos a estructura -- webform -- formularios y seleccionamos "Build" en nuestro formulario. Una vez en él, seleccionamos "+Add element" y escribimos en el cuadro de búsqueda "file". Como nuestra instalacion está de base, no tenemos esa opción habilitada y no nos da opciones.

Image

Tenemos que crear, mediante código, el elemento de subida de archivos. Cerramos esta busqueda y vamos al botón marcado.

Image

En origen veremos todos los elementos que tenemos añadidos en el webform, y podemos añadir más. en este caso, al ser un elemento de subida de archivos lo colocaremos después del campo body, pero podemos ponerlo donde queramos.

Image

Como veis, es muy sencillo, esto no deja de ser un editor, nos posicionamos en donde nos interese y escribimos. En este caso he limitado el campo "multiple" para que solo permita un elemento a subir, si quisieramos que se pudieran añadir varios elementos en una misma subida, cambiaramos la opción a "true". Guardamos los cambios para continuar.

Image

Ya tenemos el elemento creado, pero antes de poder utilizarlo en nuestros formularios, debemos crear la carpeta donde se almacenarán los envíos, así que procederemos a crearla donde queramos en nuestro servidor, en este caso, la he creado en "files". Una vez creada la carpeta en la ubicación que deseemos, tenemos que habilitar en el settings la ruta a la misma, y en caso de ser necesario, asegurarnos de otorgarle los permisos de escritura necesarios, porque si no obtendremos un error al añadir el elemento.

Image

Importante, una vez hecho este paso hay que limpiar caches, de otra forma Drupal no verá los cambios. Una vez vaciada la cache, desde "+add element" escribimos "file" en el cuadro

Image

Ahora si tenemos opciones para insertar elementos, seleccionamos lo que nos interese y seguimos.

Image

Damos los nombres deseados al campo y a la clave, recordad, los nombres de clave, igual que los nombres de sistema, SIEMPRE en inglés.

Image

Definimos el tamaño máximo de subida y las extensiones permitidas para el documento, y guardamos los cambios.

Image

Y esto ha sido webform adjuntar archivos al formulario, 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.

File Watcher es un procesador para compilar SASS o SCSS con PHPstorm, nuestra herramienta favorita de desarrollo con Drupal. :)

Vamos a mostrar como configurarla, paso a paso:

Lo primero que tenemos que hacer es tener nuestros archivos bien ordenados dentro de nuestro theme. 

Dentro del theme, en la raíz del mismo,  tendremos una carpeta llamada CSS con los archivos que compilará  File Watcher. Y en la misma ruta otra carpeta con los SASS o SCSS que necesitamos compilar, ejemplo:

En mi theme, mi estructura es la siguiente: todo el css se compila en el archivo Style.css, pero dentro de la carpeta sass, tengo toda una estructura de componentes que se cargan en mi Style.scss con un @import.

De esta manera todos mis estilos están ordenados y los proceso según el orden que me beneficie.

Previo a todos los pasos debemos tener instalado, Sass en nuestro sistema, aqui os dejo el comando de ubuntu: 

npm install -g sass

Ahora vamos a configurar la herramienta del PhpStorm:

Vamos a Inicio - Settings  y dentro en  tools - File Watcher . Pulsamos el botón + para añadir un nuevo compilador. Elegimos el  tipo de hoja de estilo que vamos a usar de la lista (SASS y SCSS usan el mismo motor), y una vez dentro,  abrimos  el desplegable

Working Directory and Environment Variables.

Dentro hay 3 imputs (marcadas en rojo en la imagen) que tenemos que reescribir con nuestras rutas:

Arguments: $FileName$:$ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css

Output paths to refresh: $ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css.map

Working directory: $ProjectFileDir$/web/themes/custom/auladrupal/sass/

una vez tengamos todo configurado, solo tenemos que probar a realizar algún cambio en nuestro código Front para ver si se compila. Este proceso es muy rápido por tanto seguramente no veáis que lo ha hecho. Para comprobarlo, id a la carpeta CSS y verificar que ese cambio esta en el style.css  

Hemos aprendido a Compilar SASS o SCSS con PHPstorm usando File Watcher

Si necesitas mas ayuda de PHPstorm ve al blog desde aqui 

Enlace para descargar el PHPStorm

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