Galería de Imágenes

Prontus te permite agregar galerías de imágenes dentro de tus artículos, por un lado con macros para la carga y edición de imágenes en FID y por el otro con marcas Prontus en las plantillas.

Publicado: Martes 25 de septiembre de 2018 por David García
Última modificación: Lunes 26 de agosto de 2019
Implementar galerías de imágenes en FIDs

Para implementar galerías de imágenes desde un FID debes hacer uso de la macro reservada _galeria_prontus.html, por ejemplo dentro de un panel. Esta macro genera una interfaz para la carga masiva de imágenes. Puedes implementarlo de este modo:

%%PANEL(Galería de fotos, body1, _galeria_prontus.html, 1:fotofija_galeria@@_low:65x65|2:fotofija_galeria@@_high:800x600)%%

Ejemplo de FID con galería:

<!DOCTYPE html>
<html lang="es">
  <head>
    %%MACRO(_head.html)%%
  </head>
  %%MACRO(_open_body.html)%%
  %%MENU%%
    %%ITEM(Cabecera, body1)%%%%/ITEM%%
  %%/MENU%%
  <div class="main-fid" id="fid">
    %%MACRO(_titulo_principal.html)%%
    <div class="content">
      %%MACRO(_publicacion_directa.html)%%
      <div class="panel-group">
        %%PANEL(Galería de fotos, body1, _galeria_prontus.html, 1:fotofija_galeria@@_low:65x65|2:fotofija_galeria@@_high:800x600)%%
      </div>
          </div>
        </div>
  %%MACRO(_close_body.html)%%
  </html>

El cuarto parámetro es un string que define los tamaños que se deben generar y la calidad de las imágenes, por ejemplo:

  1. 1:fotofija_galeria@@_low:65x65 El número (1:) indica que es el primer tamaño de foto.
  2. La descripción (fotofija_galeria@@_low:) genera el nombre resultante de las fotografías, donde los signos @@ se transformarán en el número de foto, por ejemplo: fotofija_galeria23_low
  3. El último dato (65x65) indica el tamaño que obtendrá la imagen.

Debes especificar por lo menos 2 tamaños distintos (el thumbnail y la foto desplegada) para que la galería funcione correctamente. Luego de implementar correctamente la macro, verás un panel como el siguiente:

Al hacer click en el botón "Subir un ZIP" se desplegará un popup que te permitirá subir un archivo .zip con las fotos para la galería:

Generar galerías en artículos

Una vez implementada la carga de fotos de galeria en el FID, queda la tarea de mostrar las fotos en la plantilla del artículo. Para ello debes agregar código como el siguiente:

<div id="thumbnails">
%%_LOOP_ARTIC(1,100)%%
%%IF(FOTOFIJA_GALERIA%%i%%_LOW)%%
<div class="thumb">
<img src="%%FOTOFIJA_GALERIA##i##_LOW%%" alt="%%IF(TXT_DESCRIPCION_PORT##i##)%%%%DESCRIPCION_PORT##i##.xml%%%%/IF%% %%NIF(TXT_DESCRIPCION_PORT##i##)%%Imagen ##i## - Galería%%/NIF%%">
</div>
%%/IF%%
%%/_LOOP_ARTIC%%
</div>
<div id="modal-fotos"> %%_LOOP_ARTIC(1,100)%% %%IF(FOTOFIJA_GALERIA%%i%%_HIGH)%% <div class="foto"><img src="%%FOTOFIJA_GALERIA%%i%%_HIGH%%"></div> %%/IF%% %%/_LOOP_ARTIC%% </div>

Dentro del _loop_artic, cada foto recibe un valor distinto para la marca %%i%%, como puedes ver en el artículo sobre la marca _loop_artic.

Artículos Relacionados