Los Banners

Llamamos banners a las imágenes que deseamos imprimir en distintos lugares de la maqueta de diseño de nuestro sitio.

La palabra banner en la Web se refiere generalmente a imágenes publicitarias que se colocan en diferentes partes de los sitios Web, pero en nuestro caso el concepto es más amplio. Es decir que no necesariamente deben ser imágenes publicitarias, sino también que simplemente se pueden cargar fotos.

Los banners de nuestro sistema se gestiónan ingresando en adm -> Sitio Web -> banners, y para poder verlos finalmente en el sitio web es necesario que previamente se hayan creado y configurado los "Módulos" para este fin. El módulo que permite imprimir uno o más banners en alguna ubicación se llama "Panel de banners" y su nombre de función es banners.

Datos a completar en un banner

• Publica: determina la aparición del registro en el sitio
• Nombre: define un nombre interno al banner para poder ubicar de cuál se trata. En algunos casos este nombre también puede ser luego impreso junto con la imagen a modo de epígrafe.
• Imagen: Archivo con la imagen a utilizar
• Código (optativo): HTML. También se puede cargar un código HTML para que se imprima en el registro y en vez de la imagen. Esto permite incluir funciones especiales y para algunos casos.
• Enlace (optativo)
  • URL: La URL hacia donde enlazará la imagen
  • Destino: en que ventana abrirá
• Ubicación
  • Panel de banners: El módulo en donde imprimirá este registro
  • Orden: y en que orden
  • Artículos/Páginas/Productos/etc: Y luego, es posible definir con mayor detalle cuando y donde de los diferentes tipos de contenidos se imprimirá la imagen, permitiendo un mayor control sobre la misma.
• Imágen automática: si se completa tanto el ancho como el alto, se pondrá en acción un plugin que permite modificar el tamaño automáticamente de la imagen y sin necesidad de utilizar un programa de diseño. También permite comprimirla para una carga más rápida, definir como se imprimirá, aplicar un filtro, etc.
  • Ancho: el ancho de la imagen que se desea en pixels
  • Alto: el alto de la imagen que se desea en pixels
  • Calidad: el porcentaje a aplicar de compresión sobre la misma. Tené en cuenta que a valores más bajos, la imagen perderá calidad pero será más rápida en su carga.
  • Zoom / Crop: como se aplicará el nuevo tamaño en la imagen original
  • Filtro: si se aplica algún filtro especial sobre la misma
  • Alinear: y desde donde se aplicará el nuevo tamaño

Sistema de plantillas

Es posible al igual que en otros módulos de SISFOX, armar plantillas HTML especiales para cada banner que se imprime en un panel.

Básicamente, se define la estructura HTML de la misma y se reemplaza con un tag especial cada uno de los elementos que luego se leerán dinámicamente desde la base de datos.

Los principales son:

• {url_imagen} se refiere justamente a la imagen
• {codigo} si se completó el campo código se imprimirá el mismo
• {url} si se definió un enlace para el banner
• {target} El destino del enlace.
• {nombre} el nombre que se ha definido internamente para el banner. Igualmente solo se imprimirá si el parametro Muestra nombre está en sí.

Y otros que hacen a algunas funciones especiales de programación

• {activo} agrega la clase "active" al registro. Es especialmente usada por algunos sliders
• {id} del registro de la base de datos. Se utiliza para identificar unequívocamente el registro
• {clase_img} si se ha definido una clase especial para la imagen en los parametros del módulo
• {archivo} el nombre del archivo que se imprimirá en el atributo alt de la imagen
• {ancho} el ancho de la imagen en pixels
• {alto} el alto de la imagen en pixels
• {indice} refiere al nro de banner dentro de la lista

Mecanismo de control de impresión

Estas plantillas varían según el tipo de panel que se haya elegido. A continuación, se brindan las planillas base según cada tipo.

Plantilla base

<div class="item" id="bnn{id}">
    {if url}<a href="{url}" target="{target}">{/if}
        {if url_imagen}<img src="{url_imagen}" class="{clase_img}" border="0" alt="{archivo}" title="{nombre}" width="{ancho}" height="{alto}" />{/if}
        {codigo}
    {if url}</a>{/if}
    {if nombre}<div id="{idatr}_nombre{indice}" class="epigrafe">{nombre}</div>{/if}
</div>

Plantilla carousel bootstrap

https://getbootstrap.com/docs/3.3/javascript/#carousel

<div class="item{activo}" id="bnn{id}">
    {if url}<a href="{url}" target="{target}">{/if}
        {if url_imagen}<img src="{url_imagen}" class="{clase_img}" border="0" alt="{archivo}" title="{nombre}" width="{ancho}" height="{alto}" />{/if}
        {codigo}
        <div class="carousel-caption">{nombre}</div>
    {if url}</a>{/if}
</div>

Plantilla bxslider

https://github.com/stevenwanderski/bxslider-4

<li class="item" id="bnn{id}">
    {if url}<a href="{url}" target="{target}">{/if}
        {if url_imagen}<img src="{url_imagen}" class="{clase_img}" border="0" alt="{archivo}" title="{nombre}" width="{ancho}" height="{alto}" />{/if}
        {codigo}
    {if url}</a>{/if}
      {if nombre}<div id="{idatr}_nombre{indice}" class="nombre">{nombre}</div>{/if}
</li>

Plantilla slicebox

https://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/

<li class="item" id="bnn{id}">
    {if url}<a href="{url}" target="{target}">{/if}
        {if url_imagen}<img src="{url_imagen}" class="{clase_img}" border="0" alt="{archivo}" title="{nombre}" width="{ancho}" height="{alto}" />{/if}
        {codigo}
    {if url}</a>{/if}
      {if nombre}<div id="{idatr}_nombre{indice}" class="sb-description"><h3>{nombre}</h3></div>{/if}
</li>

Plantilla stellar

http://markdalgleish.com/projects/stellar.js/docs/

{if url_imagen}<div class="{clase_img}" data-stellar-background-ratio="0.5" style="background-image: url({url_imagen}); background-position: 0px -51px;"></div>{/if}