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
Mostrar datos externos (API) mediante vistas de Drupal
Mostrar datos externos (API) mediante vistas de Drupal

Mostrar datos externos (API) mediante vistas de Drupal, tenemos la necesidad de mostrar datos procedentes de la respuesta de una API en nuestro Drupal. Para ello utilizaremos las vistas de Drupal mostrando estos datos como si pertenecieran al propio Drupal con las ventajas de utilizar vistas. Para ello crearemos una “tabla” ficticia con sus respectivos campos dónde pasaremos los datos procedentes de la respuesta de la API.

El primer paso es crear esta “tabla” ficticia con los campos dónde mostraremos los datos. Mediante el hook views data defininos lo que sería nuestra tabla y posteriormente los campos.

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez definidos estos datos tenemos que crearnos nuestro plugin para mostrar estos datos en la vista. Para ello nos crearemos nuestro query plugin inyectando el contenedor de nuestra clase para consumir los datos de la API.

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez que tengamos definido el Query plugin, podemos pasarle nuestros datos a los campos a través de la función execute. Realizamos la llamada a la API y almacenamos la respuesta. Ahora vamos añadiendo cada fila de datos devuelta por la API a la vista.

 

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez hecho todo esto proceso, cuando vamos a crear una vista mediante la administración. En el selector para seleccionar que queremos mostrar, vemos nuestra “tabla”.

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez en la vista, podemos seleccionar el tipo tabla para visualizar los datos mostrando campos. Al añadir campos, veremos todos los campos definidos previamente.

Image
Mostrar datos externos (API) mediante vistas de Drupal

Y esto ha sido Mostrar datos externos (API) mediante vistas de Drupal, 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 composer
Composer detected issues in your platform

Cuando nos da este error, al subir nuestra web a un servidor nuevo : Composer detected issues in your platform: Your Composer dependencies require a PHP version ">= 7.4.0".

Lo primero que debemos comprobar es la versión real de PHP que tenemos. Pues aunque pensemos que tenemos puesta la correcta, a veces si el servidor soporta multiphp por dominio, al crear un dominio nuevo no asigna bien la versión seleccionada y aplica la "por defecto". 

Para comprobarlo vamos a: vendor/composer/plataform_check.php ( si no tenemos el archivo lo podemos crear) 

y dentro modificamos el archivo para que quede así:

<?php

// platform_check.php @generated by Composer

$issues = array();

if (!(PHP_VERSION_ID >= 70400 && PHP_VERSION_ID < 90000)) {
    $issues[] = 'Your Composer dependencies require a PHP version ">= 7.4.0" and "< 9.0.0". You are running ' . PHP_VERSION  .  '.';
}

$missingExtensions = array();
extension_loaded('pdo') || $missingExtensions[] = 'pdo';

if ($missingExtensions) {
    $issues[] = 'Your Composer dependencies require the following PHP extensions to be installed: ' . implode(', ', $missingExtensions);
}

if ($issues) {
    echo 'Composer detected issues in your platform:' . "\n\n" . implode("\n", $issues);
    exit(104);
}

Al volver a la web, el mensaje habrá cambiado y nos dirá la versión de los archivos:  Composer detected issues in your platform: Your Composer dependencies require a PHP version ">= 7.3.0" and "< 7.4.0". You are running 7.2.5.

Composer detected issues in your platform: Your Composer dependencies require a PHP version ">= 7.4.0".

En mi caso, El Cpanel me indicaba que tenia la 7.3 pero realmente estaba aplicando la 7.2 por tanto acudí al panel y aplique de nuevo la 7.3. 

 

Volví a comprobar en la web y ahora ya me decía: You are running 7.3.23.

Como no puedo poner la versión 7.4, baje la versión al drupal para que tabaje con la 7.3 que es la mínima para Drupal 9

Para ello vamos al composer.json y añadimos las siguientes lineas: 

 "prefer-stable": true,
    "config": {
        "sort-packages": true,
+       "platform-check": false,
+       "platform": {
+           "php": "7.3.0"
+       }
    },

Abrimos el composer.lock y añadimos las siguientes lineas: 

   "platform": [],
   "platform-dev": [],
+  "platform-overrides": {
+       "php": "7.3.0"
+    },
   "plugin-api-version": "2.0.0"

A continuación ejecutamos composer update o install para bajar de nuevo el core y sus contrib con los nuevos requisitos.

Subimos todo de nuevo y comprobamos. La web debería funcionar correctamente.

 

Nota = Si te da error 500 tras todo esto, recuerda configurar el php ( aumentarle memoria) pues cada vez que cambiamos php los valores se restablecen. 

Esto resuelve Composer detected issues in your platform: Your Composer dependencies require a PHP version ">= 7.4.0".

 

Más ayuda en el blog

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