Truco: Simulación de carátulas en carroussel de novedades

Orex Digital propone una desarrollo para mejorar la presentación de los registros bibliográficos que no disponen de imagen de carátula en los carruseles de libros.
Ahora, en lugar de mostrar una imagen genérica, el sistema genera automáticamente una carátula visual con el título del libro, manteniendo los enlaces y la navegación intacta.

Cómo funciona

• Detecta automáticamente los registros que no tienen imagen de portada.
• Obtiene el título del registro.
• Genera dinámicamente una carátula visual con estilo de libro (lomo y frente).
• Mantiene los enlaces existentes para que los usuarios puedan seguir accediendo al detalle del registro.

Beneficios

• Evita la repetición de imágenes genéricas.
• Da uniformidad estética al catálogo.
• Resalta el título del libro cuando no hay portada.
• Mejora la experiencia visual y de navegación del usuario.
• Mantiene los enlaces originales de cada registro.

Instrucciones para su implementación

Para añadir esta mejora, los clientes deben seguir estos pasos:

1. Asegurarse de que el sitio utiliza jQuery y jQuery Flipster.
2. Añadir el archivo opacuser.css al tema de WordPress o mediante CSS adicional en Apariencia → Personalizar.
3. Añadir el archivo opacuser.js al tema de WordPress o mediante un plugin que permita insertar código JavaScript personalizado.
4. No es necesario modificar el HTML del carrusel; la función se ejecuta automáticamente y preserva los enlaces existentes.

Código de ejemplo

JavaScript (opacuser.js):

function replaceNoImageCovers() {
  $('.flipster__item__content').each(function () {
    const $content = $(this);

    // Evitar procesar dos veces
    if ($content.data('processed')) return;

    const $img = $content.find('img');
    if (!$img.length) return;

    const src = $img.attr('src');
    if (!src || !src.includes('NoImage.png')) return;

    const title = $content.find('p').text().trim();
    if (!title) return;

    const cover = `
      <div class="book-cover">
        <div class="book-spine"></div>
        <div class="book-front">
          <h3>${title}</h3>
        </div>
      </div>
    `;

    // Reemplaza solo la imagen, mantiene el enlace
    $img.replaceWith(cover);

    $content.data('processed', true);
  });
}

// Observador del DOM
const observer = new MutationObserver(() => {
  replaceNoImageCovers();
});

// Esperar a que exista Flipster
const waitForFlipster = setInterval(() => {
  const flipster = document.querySelector('.flipster');
  if (!flipster) return;

  observer.observe(flipster, {
    childList: true,
    subtree: true
  });

  replaceNoImageCovers();
  clearInterval(waitForFlipster);
}, 200);

CSS (opacuser.css):

.koha-coverflow {
  width: 100%;
}

#horari img {
  width: 100%;
}

.no-image {
  display: none;
}

.book-cover {
  position: relative;
  width: 160px;
  height: 250px;
  margin: auto;
  perspective: 800px;
}

.book-front {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3a3a3a, #111);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,.5);
  transform: rotateY(-12deg);
}

.book-front h3 {
  font-family: serif;
  font-size: 18px;
  line-height: 1.3;
}

.book-spine {
  position: absolute;
  left: -18px;
  top: 0;
  width: 18px;
  height: 100%;
  background: #222;
  transform: rotateY(-12deg);
}

Con estos pasos, los clientes podrán implementar la propuesta de Orex Digital,
mejorando la presentación de los registros sin carátula y preservando los enlaces originales.