Saltar al contenido principal

Galerías de imágenes

Cuando un registro tiene varias imágenes (por ejemplo, una propiedad con 12 fotos, o un producto con vistas 360°), usas el campo tipo Múltiples Imágenes y lo recorres con {{#imagenes}}.

Preparar el campo​

En tu tabla, define una columna:

  • Tipo: Múltiples Imágenes.
  • Alias: galeria (o el que prefieras).
  • Parámetro: opcional, un número máximo de imágenes.

Al cargar registros, sube varias imágenes en ese campo.

Sintaxis básica​

{{#imagenes galeria}}
  <img src="{{url}}" alt="Foto" />
{{/imagenes}}
  • galeria es el nombre del campo.
  • Dentro del bloque, {{url}} te da la URL de cada imagen.

Si el registro tiene 5 imágenes, se generan 5 <img>.

Galería con miniaturas y clic para ampliar​

<div class="galeria d-flex flex-wrap gap-2">
  {{#imagenes fotos}}
    <a href="{{url}}" target="_blank">
      <img src="{{url}}" width="120" class="rounded" />
    </a>
  {{/imagenes}}
</div>

Al hacer clic en una miniatura, la imagen se abre en una pestaña nueva a tamaño completo.

Galería con carrusel (Bootstrap 5)​

Si tu sitio ya usa Bootstrap 5, puedes armar un carrusel con las imágenes:

<div id="carousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    {{#imagenes fotos}}
      <div class="carousel-item">
        <img src="{{url}}" class="d-block w-100" />
      </div>
    {{/imagenes}}
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

:::warning "Active" en el carousel Bootstrap Bootstrap requiere que el primer .carousel-item tenga la clase active. Si generas todas las items desde un bucle, agrega esa clase manualmente al primer render con un poco de JavaScript o duplicando la primera fuera del bucle. :::

Combinar imagen principal + galería​

Muy común en fichas de producto:

<div class="row">
  <div class="col-md-8">
    <img src="{{foto_principal}}" class="img-fluid" />
  </div>
  <div class="col-md-4">
    <div class="d-flex flex-column gap-2">
      {{#imagenes galeria}}
        <img src="{{url}}" class="img-fluid rounded" />
      {{/imagenes}}
    </div>
  </div>
</div>
  • foto_principal es un campo de imagen única.
  • galeria es el campo de múltiples imágenes.

Iterar galerías dentro de un listado​

Puedes combinar {{#cada}} (registros) con {{#imagenes}} (imágenes de cada uno):

{{#cada}}
  <div class="propiedad">
    <h2>{{titulo}}</h2>
    <div class="d-flex gap-2">
      {{#imagenes fotos}}
        <img src="{{url}}" width="150" />
      {{/imagenes}}
    </div>
  </div>
{{/cada}}

Cada registro genera su bloque, con las imágenes de ese registro.

Rendimiento​

Las galerías de muchas imágenes pueden hacer lenta la carga. Recomendaciones:

  • Comprime las imágenes antes de subirlas. El framework lo hace en parte, pero un JPG de 5 MB sigue siendo pesado.

  • Lazy loading: agrega loading="lazy" a los <img> para que se carguen solo cuando el visitante se acerque con el scroll:

    <img src="{{url}}" loading="lazy" />

  • Cantidad razonable: 8-12 fotos por registro suele ser suficiente para catálogos. Más de 20 hace la página lenta.

¿Qué sigue?​