Image
Esquivando jQuery
Mostrar y ocultar un elemento con CSS esquivando jQuery

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
Mostrar y ocultar un elemento con CSS esquivando jQuery

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
Mostrar y ocultar un elemento con CSS esquivando jQuery

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.

 

 

Image
Herramientas para desarrollar
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal
Image
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal

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.

Image
Como ajustar y centrar una imagen en un videoframe
Como ajustar y centrar una imagen en un videoframe

Como ajustar y centrar una imagen en un videoframe. En este tutorial vamos a ver como ajustar y centrar una imagen subida por nosotros como poster al frame de un video.

Soluciones hay diversas, y cada maestrillo tiene su librillo, pero aquí voy a explicar la que me ha servido para hacer el ajuste.

Nos encontramos con la situación de que si el video es un video subido por nosotros, por defecto lo encontraremos como “display: none” hasta que se ejecute el play, y de ser un video de Youtube o Vimeo embebido en un iframe encontraremos que el iframe también está en “display: none” y además posicionado en absoluto. En ambos casos, si nos basamos en estos dos elementos como base, veremos que el contendor no tiene ni altura ni anchura, ya que ningún hijo se la está dando.

Image
Como ajustar y centrar una imagen en un videoframe

Para empezar con la solución lo primero es ir a modules/contrib/layoutcomponent/modules/lc_simple_video/templates donde encontraremos un twig con el siguiente código:

<div class="videoimage">
    {{ content.field_sv_image }}
    {#      {{ content|without('field_sv_video_type', 'field_sv_upload_video', 'field_sv_video') }}#}
    {% if content.field_sv_video_type['#items'][0].value == 'video_url' %}
        {{ content.field_sv_video }}
    {% else %}
        {{ content.field_sv_upload_video }}
    {% endif %}
</div>
Image
Como ajustar y centrar una imagen en un videoframe

 

Copiamos el archivo del twig y lo ponemos en la parte custom de nuestro tema. Así que iremos a themes/custom/nombre_del_proyecto/templates y lo pegamos ahí.

Como se dan dos situaciones de video, un video embebido de una url y un video subido por nosotros, lo vamos a separar en dos bloques diferentes ayudándonos de la variable que nos proporciona el twig, dejando un código de la siguiente manera:

<div class="videoimage">
    {#      {{ content|without('field_sv_video_type', 'field_sv_upload_video', 'field_sv_video') }}#}
    {% if content.field_sv_video_type['#items'][0].value == 'video_url' %}
    <div class="videoimage-url">
        {{ content.field_sv_image }}
      <div class="videoimage__video">
        {{ content.field_sv_video }}
      </div>
    </div>
    {% else %}
      <div class="videoimage-upload">
          {{ content.field_sv_image }}
          <div class="videoimage__video">
            {{ content.field_sv_upload_video }}
          </div>
      </div>
    {% endif %}
</div>
Image
Como ajustar y centrar una imagen en un videoframe

 

Con esto tenemos listo el twig, ahora vamos a hacer la magia en el CSS, bueno, en nuestro caso SCSS.

Para ello hay que tener clara una cosa, ya que la imagen va a ser posicionada y como  tanto el video como el iframe en ambos casos están a “display: none” o posicionados, ninguno de ellos genera altura en el contendor, por lo que la imagen no se verá.

En el caso de un video subido por nosotros, pondremos el video a “display: block”, esto generará la altura y anchura que debe de tener la caja. Ahora basta con posicionar la imagen y por encima, para ello nos aseguramos que todos los padres de la imagen tengan la altura y la anchura del contendor, que todo lo que sobresalga de ellos no se visualice y que cuando tengan la clase “hidden” desaparezcan.

Ahora, con la imagen subida, hacemos que la imagen tenga una anchura y altura adaptable pero que como mínimo siempre sea la del contendor y su máximo sea la que deba por defecto, con esto hecho la posicionamos en el medio.

En el caso de un video embebido de Youtube o Vimeo, como necesitamos que el contendor tenga una altura y que esta altura sea variable para que la maquetación sea líquida y que el responsive nos venga ya dado, no declararemos un height en el contendor, si no que usaremos un paddíng en porcentaje sabiendo el ratio entre el alto y el ancho de nuestro video. En nuestro caso el ratio en porcentaje de nuestro video es de 56.25%.

Una vez añadido este padding, nuestra caja ya tiene una altura, por lo que posicionar la imagen será igual que como con el vídeo subido, hacemos que los padres tengan un tamaño igual al contenedor, que se oculten si tienen la clase “hidden” y posicionamos la imagen de la misma manera.

El código SCSS resultante de todo esto quedaría así:

.videoimage{
  position: relative;
  &-upload{
    .field--name-field-sv-image{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      overflow: hidden;
      margin:0;
      .contextual-region,
      .field--name-field-media-image,
      .field__item{
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        &.hidden{
          display: none;
        }
      }
      img{
        position: absolute;
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: initial!important;
      }
    }
    .videoimage__video{
      video{
        display: block!important;
      }
    }
  }
  &-url{
    .field--name-field-sv-image {
      margin: 0;
      padding-top: 56.25%;
      overflow: hidden;
      .contextual-region,
      .field--name-field-media-image,
      .field__item{
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        &.hidden{
          display: none;
        }
      }
      .contextual-region{
        position: absolute;
        top: 0;
        left: 0;
      }
      img{
        position: absolute;
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: initial!important;
      }
    }
  }
}
Image
Como ajustar y centrar una imagen en un videoframe
Image
Como ajustar y centrar una imagen en un videoframe

 En caso de trabajar directamente en CSS el código sería:

.videoimage {
  position: relative;
}
.videoimage-upload .field--name-field-sv-image {
  position: absolute;
top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  margin: 0;
}
.videoimage-upload .field--name-field-sv-image .contextual-region,
.videoimage-upload .field--name-field-sv-image .field--name-field-media-image,
.videoimage-upload .field--name-field-sv-image .field__item {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.videoimage-upload .field--name-field-sv-image .contextual-region.hidden,
.videoimage-upload .field--name-field-sv-image .field--name-field-media-image.hidden,
.videoimage-upload .field--name-field-sv-image .field__item.hidden {
  display: none;
}
.videoimage-upload .field--name-field-sv-image img {
  position: absolute;
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: initial !important;
}
.videoimage-upload .videoimage__video video {
  display: block !important;
}
.videoimage-url .field--name-field-sv-image {
  margin: 0;
  padding-top: 56.25%;
  overflow: hidden;
}
.videoimage-url .field--name-field-sv-image .contextual-region,
.videoimage-url .field--name-field-sv-image .field--name-field-media-image,
.videoimage-url .field--name-field-sv-image .field__item {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.videoimage-url .field--name-field-sv-image .contextual-region.hidden,
.videoimage-url .field--name-field-sv-image .field--name-field-media-image.hidden,
.videoimage-url .field--name-field-sv-image .field__item.hidden {
  display: none;
}
.videoimage-url .field--name-field-sv-image .contextual-region {
  position: absolute;
  top: 0;
  left: 0;
}
.videoimage-url .field--name-field-sv-image img {
  position: absolute;
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: initial !important;
}

Y esto ha sido como ajustar y centrar una imagen a un frame de video, 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.

 

Esto ha sido:  Como ajustar y centrar una imagen en un videoframe.

Image
Compilar SASS o SCSS con PHPstorm
Compilar SASS o SCSS con PHPstorm : File Watcher

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. 

Compilar SASS o SCSS con PHPstormDentro 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:Como configurar una FTP en 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.

Compilar SASS o SCSS con PHPstorm  Compilar SASS o SCSS con PHPstorm  Compilar SASS o SCSS con PHPstorm

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/

Como configurar una FTP en PHPStorm

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

Image
target blank en drupal field: ¿como añadirlo a los field docs?
target blank en drupal field: ¿como añadirlo a los field docs?

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

target blank en drupal