Drupal Español - Blog

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

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

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

Image

Image

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

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.

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.

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