Image
Drupal Modular net4gym
Drupal modular: AulaDrupal lanza su primera APP de Drupal

En AulaDrupal estamos de celebración, ya que acabamos de lanzar de manera oficial, nuestra primera aplicación web de Drupal modular, para centros deportivos y gimnasios .

Esta aplicación web es un software de gestión de cuotas de gimnasio,  actividades, bonos de entrenamiento y productos de tienda, así como control de entradas, inscripciones en eventos, tareas, remesas bancarias, auto-renovación de cuotas, control de stock, inventario, QR.... y muchísimos más módulos que hacen más ameno y ágil el día a día en un centro deportivo.

Con esta aplicación los clientes podrán autogestionarse, no necesitarán contactar para contratar o gestionar ningún servicio ya que podrán dar de alta y baja cada uno de los módulos que tenemos en función de sus necesidades. 

 

Todo lo que se necesita en un software, presentado de la manera más sencilla.

 

Un software completo, no tiene porque ser difícil de manejar.

Net4Gym busca el mayor rendimiento oculto tras el más sencillo sistema.

A mayor sencillez mayor usabilidad.

Es un programa ágil, completo y con intuitivas opciones que harán que tu día a día sea más ameno. Reduciendo al completo todas las horas de gestión, contabilidad y control de los empleados, productos, local,...

 

Image
Drupal modular NetforGym

 

Visita la web de la aplicación para conocer más nuestra primera aplicación de Drupal modular. 

Puedes visitar la web del software en https://www.netforgym.com. 

100% Drupal, 100% modular y autogestionable.

 

 

 

 

 

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
Configuración básica de una tienda con Drupal
Configuración básica de una tienda con Drupal

Hablemos de la configuración básica de una tienda con Drupal. Para configurar las opciones básicas de nuestra tienda Drupal, navegamos a través del menú Administración--Comercio--Configuración, dónde nos mostrará las opciones para hacerlo

Image
Configuración básica de una tienda general

Vemos que tenemos las opciones de configuración, vamos a explicarlas brevemente:

  • Correos electrónicos en la que podemos definir distintos mensajes de correo, que enviará la tienda al cliente, cuando este complete determinadas acciones (a nuestra elección).
  • Monedas, dónde podremos especificar con qué moneda o monedas (caso de aceptar varias) operará nuestra tienda.
  • Tiendas, para administrar nuestras tiendas.
  • Tipos de tiendas, nos permite añadir campos, formularios y cambiar las opciones de visualización de nuestra tienda, así como rellenar los datos de identificación, además de añadir todas las tiendas que necesitemos o queramos (para un multi-site por ejemplo).
  • Tipos de impuestos, para definir los impuestos que se sumaran al precio del producto y cómo lo mostrarán (sumado al producto o por separado). Esta opción la hemos explicado con anterioridad en el blog, podeis repasarla desde aqui.

Veamos las opciones con más detalle, empezando con Correos electrónicos

Image
Configuración básica de una tienda correo

Pulsando sobre "Añadir correo" crearemos un mensaje de correo que se enviará al destinatario cuando se cumplan unos requisitos que nosotros definiremos, en este caso, hemos creado un mensaje de correo que informa de que se ha finalizado la compra porque el pedido está pagado

Image
Configuración básica de una tienda editar mail

En la imagen superior vemos que tenemos que cubrir una serie de campos (marcados con *) para hacer que la tienda envie un correo cada vez que un cliente pague un pedido. Los campos Desde y Para deben rellenarse con un comodín de ente los disponibles, y el cuerpo del mensaje que enviaremos tiene que estar en HTML. Cuando hayamos terminado pulsaremos guardar y esta parte estará configurada.

Lo siguiente que debemos configurar en nuestra tienda es la moneda que utilizaremos en la misma

Image
Configuración básica de una tienda monedas

Mediante el botón "Añadir divisa", seleccionaremos la moneda o monedas que nos interese. Con el botón "Agregar moneda personalizada" añadiremos una moneda que no se encuentre en el listado de divisas.

Desde la opción tienda configuraremos todos los datos que aparecerán en las confirmaciones de compra e identificación de la tienda.

Image
configurar tienda

Como siempre, los campos marcados con * son obligatorios, debiendolos rellenar todos para que nos permita guardar los cambios.

Y esto ha sido configuración básica de una tienda con Drupal Commerce, 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
Cupones de descuento con Drupal Commerce, ¿Cómo se hace?
Cupones de descuento con Drupal Commerce, ¿Cómo se hace?

Para crear cupones de descuento con Commerce deberías haber seguido los pasos del artículo para crear descuentos en nuestra tienda , y tener ahora una idea general de como funcionan, podremos entonces crear cupones, que son otra forma de bonificar a nuestros clientes y un metodo para conseguir que compren más en nuestra tienda.

Teniendo el manual antes mencionado como referencia, crearemos un nuevo descuento, cubriendo o marcando todos los campos marcados con *. Finalmente, haremos clic sobre "guardar y agregar cupones".

 

Image
Cupones de descuento con drupal commerce 1

 

Eso nos llevará a esta pantalla, donde cliquearemos en "+agregar cupon", para generar un código personalizado en el cupón que utilizarán nuestros clientes.

Image
Cupones de descuento con drupal commerce 2

En este formulario cubriremos los datos, es importante el código del cupón, pues es lo que deberá introducir el cliente, durante el checkout, para que se le aplique el descuento. Es recomendable que contenga, por ejemplo, el nombre de la tienda, además del beneficio obtenido, (MITIENDA -9€). Fijaremos tambien las condiciones de uso, si está o no activado, cuantas veces puede ser usado y/o cuantas veces puede usarlo un mismo cliente.

 

Image
Cupones de descuento con drupal commerce 3

Finalmente, guardaremos los cambios y listo, Solo nos queda compartir el cupón para que empiecen a usarlo. Y esto ha sido crear cupones de descuento con Drupal Commerce, 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
Crear una tabla de bbdd en la instalación de un módulo en Drupal
Crear una tabla de bbdd en la instalación de un módulo en Drupal

En el desarrollo de un módulo en Drupal, una de las cosas que más nos puede interesar es, que en la instalación de nuestro módulo, se pueda generar una tabla donde nuestra aplicación pueda tratar datos.

Sobre la relación de Drupal y las bases de datos

Drupal utiliza un sistema que permite llevar a cabo dicha operación independientemente del motor de base de datos con el que esté trabajando llamado Database Abstraction Layer que traduce el lenguaje de Drupal para el tratamiento de las bases de datos al lenguaje del motor de base de datos. De modo que cualquier operación que desarrollemos con base de datos en Drupal, podrá funcionar en cualquier motor de base de datos en el que instalemos Drupal.

Entendamos motor de base de datos como sistema que tengamos instalado en el servidor, como MariaDB, MySQL, PotgreSQL, etc.

Suponiendo que tenemos creado un primer módulo, en caso contrario podéis encontrar un interesante tutorial con los primeros pasos a seguir en este mismo portal, tenemos que tener en cuenta que podemos, en la instalación del módulo, incluir un fichero de instalación que establezca los primeros pasos para la implantación del módulo y entre ellos el de la creación de nuestras tablas en bases de datos.

Pasos previos a la creación del módulo

Recordemos que los ficheros de nuestro módulo tiene que estar en una carpeta del mismo nombre dentro de la carpeta custom de la carpeta modules.

/var/www/html/midrupal/web/modules/custom/misdatos

En dicha carpeta tenemos creado el fichero misdatos.info.yml, en el cual introducimos los damos básicos que Drupal necesita para saber qué características tiene el módulo como el nombre, el tipo, una descripción, etc. A continuación vemos los datos que yo he introducido.

name: Mis datos
type: module
description: 'Modulo de base de datos'
package: Mis modulos
core_version_requirement: ^9

Excepto package que no lo es pero permite tener organizado nuestro módulo en grupos, el resto son datos obligatorios.

Ahora entre todos los módulos podemos encontrar el nuestro en un grupo llamado “Mis módulos”.

Sería la información mínima, pero podemos ampliarlo poniendo la versión del módulo.

version: 1.0

Ocultar el módulo a miradas indiscretas con el parámetro hidden, de modo que no aparecerá en el listado de módulos.

hidden: TRUE

También podemos indicar una ruta de la página de configuración del módulo, para lo cual tendríamos que poner el nombre de sistema de la ruta de dicha página.

configure: misdatos.admin

Puedes encontrar información completa sobre la configuración del fichero info en el enlace https://www.drupal.org/node/2000204

El módulo en ese estado, podemos activarlo pero no va a hacer nada aún. Realmente, Drupal sabe que existe pero nada más.

Durante la instalación del módulo

Para que módulo haga algo en la instalación tenemos que incluir un fichero llamado misdatos.install. Dicho fichero es un script de php que contiene una función hook_install()

Para los que no lo sepan, un hook o gancho es una función que llama a una función preestablecida que busca Drupal en su ejecución, y si existe, ejecuta sus instrucción. Veamos cómo funciona.

Para hacer funcionar el hook_install(), tenemos que cambiarle el nombre y  sustituir hook por el nombre de nuestro módulo de modo que la función se llamaría misdatos_install().

Lo primero que tener ya escrito en nuestro fichero es:

<?php

function misdatos_install(){

}

Es conveniente al programar en Drupal acostumbrarse a seguir las buenas prácticas establecidas por la comunidad, y una cosa que se ha establecido, ha sido la de documentar correctamente lo que se programa. De modo que en este caso tenemos que introducir un comentario en la parte superior del fichero con la siguiente estructura.

/**
*@file
*Descripción de la función del script en inglés
*/

@file, es una directiva que describe la función del fichero y que afecta a la documentación automática de Drupal. Bueno, es un tema para hablar mucho pero no es que no trae aquí de momento.

Nuestro fichero tiene ahora este aspecto.

<?php

/**
*@file
*Descripción de la función del script en inglés
*/

function misdatos_install(){

}

El siguiente paso es llamar del mismo modo a la función gancho, o hook que permite la creación de tablas y este se llama hook_schema(). Igual que antes, modificamos el nombre por misdatos_schema().

Tenemos que tener en cuenta que para que el hook_install pueda trabajar correctamente con la tabla que creemos, esta tiene que estar generada antes de que se ejecute la instalación, por ello tenemos que poner la función que crea las tablas antes de todo.
 

<?php

/**
*@file
*Descripción de la función del script en inglés
*/

function misdatos_schema(){

}

function misdatos_install(){

}

Encima de cada función ponemos la misma estructura de comentario pero sin la directiva @file.

<?php

/**
 *@file
 *Descripción de la función del script en inglés
 */

/**
 *  Descripción de la función en inglés
 */
function misdatos_schema(){

}

/**
 *  Descripción de la función en inglés
 */
function misdatos_install(){

}

En la función esquema podemos crear las tablas que necesitemos. Lo que tenemos que crear dentro de la función misdatos_schema() es un array $schema[]. Cada campo del array tiene el nombre de la tabla que creemos $schema[‘tabla_uno’]. Dentro de cada campo introducimos una array que contiene las características de cada campo de la tabla. Veamos un ejemplo:

$schema[‘tabla_uno’] = [
  ‘description’ => ‘Cadena de texto que describe la tabla’,
  ‘fields’ => [ // Estructura de campos que define una tabla
  ],
  'primary key' => [ // Indica los campos que son clave primaria de la tabla ],
  ‘indexes’ => [ // array que contiene los indices de la tabla ],
];

Es conveniente tener algo de idea respecto al funcionamiento de las bases de datos.

El campo fields, almacena un array con la estructura de campos de la tabla. Podemos poner un ejemplo del módulo book.
 

$schema['book'] = [
 'description' => 'Stores book outline information. Uniquely defines the location of each node in the book outline',
   'fields' => [
     'nid' => [
       'type' => 'int',
       'unsigned' => TRUE,
       'not null' => TRUE,
       'default' => 0,
       'description' => "The book page's {node}.nid.",
     ],
 
… //
 
   'primary key' => ['fid', 'type', 'id', 'module'],
   'indexes' => [
     'type_id' => ['type', 'id'],
     'fid_count' => ['fid', 'count'],
     'fid_module' => ['fid', 'module'],
   ],
]; // Cerramos el array
return $schema;
}

El primer campo es el campo nid, de tipo (type) int, unsigned, no null, con valor por defecto (default) cero y una cadena de descrición (description).

En el módulo file podemos encontrar en su fichero de instalación el campo ‘type’, que guarda una cadena ascii (varchar_ascii) con una longitud máxima de 64,...
 

'type' => [
       'description' => 'The name of the object type in which the file is used.',
       'type' => 'varchar_ascii',
       'length' => 64,
       'not null' => TRUE,
       'default' => '',
     ],

Puedes encontrar más información sobre la estructura de $schema en la url https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Database!database.api.php/group/schemaapi/9.1.x

Finalmente, dentro de la función sacamos el resultado con un return $schema, que lo devuelve.

Nosotros seguimos con nuestro ejemplo y vamos a crear nuestro primer campo en nuestra primera tabla y el fichero queda así.

<?php

/**
 *@file My first bbdd module
 */

/**
 *Implements hook_schema
 */
function misdatos_schema(){

  $schema['tabla_uno'] = [
    'description' => 'Mi primera tabla',
    'fields' => [ 
      'campo_primero' => [
        'description' => 'Descripción de mi campo',
        'type' => 'int',
        ],
     ],
  ];
return $schema;
}

Guardamos el fichero e instalamos el módulo. En la interfaz no veremos nada pero si entramos en MySQL y consultamos las tablas de la base de datos de Drupal, entre ellas encontraremos la nuestra. Vacía pero será nuestra primera tabla en la base de datos.

Image
módulo en drupal