JS Galerías automáticas
JS Imágenes dinámicas en NichoClean v2.0 — Galerías automáticas desde tu feed
En la plantilla NichoClean v2.0 hemos integrado un poderoso sistema automático para mostrar imágenes y entradas relacionadas desde el propio feed de Blogger. Este módulo JavaScript te permite generar galerías dinámicas en distintos estilos: cluster, carrusel, tarjetas, lista, masonry, lightbox, horizontal y tooltip, todo de forma completamente automática y optimizada para SEO.
Gracias a este script, tus imágenes y publicaciones se cargan directamente desde el feed de etiquetas sin necesidad de plugins externos ni librerías adicionales. El resultado: un blog más rápido, visualmente atractivo y con mejor rendimiento en los Core Web Vitals.
✨ ¿Qué hace el script de imágenes?
Este módulo busca las entradas de una etiqueta específica en tu blog, obtiene su imagen destacada, título, autor y metadatos, y las presenta en el formato que elijas. Además, incluye automáticamente marcado JSON-LD de tipo Article para las variantes más relevantes (como card, lista o tooltip), lo que mejora la indexación de tus contenidos en Google.
- Carga dinámica de imágenes por etiqueta.
- Varias variantes visuales adaptadas a tu diseño minimalista.
- Compatible con el modo claro y oscuro.
- SEO optimizado (usa datos estructurados JSON-LD).
- Totalmente responsive y ligero.
🧠 Variantes disponibles
El script reconoce automáticamente el tipo de presentación que quieres mostrar según la clase aplicada al contenedor:
| Variante | Descripción |
|---|---|
| Cluster | Bloques de imagen con título superpuesto. Ideal para galerías rápidas. |
| Card | Tarjetas con imagen, descripción y botón “Leer más”. |
| Slider | Carrusel de imágenes tipo presentación. |
| Lista | Miniaturas verticales con título, ideal para barras laterales. |
| Masonry | Diseño tipo muro (Pinterest). Se ajusta al alto de cada imagen. |
| Lightbox | Galería con efecto lightbox. Abre imágenes en pantalla completa. |
| Horizontal | Diseño horizontal con texto a un lado. Perfecto para sliders de posts. |
| Tooltip | Muestra miniaturas con tooltip al pasar el cursor (ideal para SEO visual). |
⚙️ Cómo implementarlo en tu blog
1. Inserta el script en tu plantilla
Ve a tu plantilla de Blogger → Editar HTML y busca antes del cierre de </body>. Luego pega el siguiente código:
<!-- 5. Js imagenes (cluster, carrusel, tarjetas, entradas relacionadas, etc.) -->
<script>
//<![CDATA[
const blogURL = location.origin;
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.galeria-feed').forEach(contenedor => {
const etiqueta = contenedor.dataset.etiqueta;
const cantidad = contenedor.dataset.cantidad || 6;
let variantes = ['cluster', 'card', 'slider', 'lista', 'masonry', 'lightbox', 'horizontal', 'tooltip'];
let variante = variantes.find(v => contenedor.classList.contains(v)) || 'cluster';
const url = `${blogURL}/feeds/posts/default/-/${etiqueta}?alt=json&max-results=${cantidad}`;
fetchWithCacheManager(url) // usa la duración del gadget #config-cache
.then(data => {
let entradas = data.feed.entry || [];
entradas = entradas.sort(() => Math.random() - 0.5);
let html = '';
let jsonLD = {
"@context": "https://schema.org",
"@graph": []
};
// Variantes que queremos indexar para SEO
const variantesIndexables = ['tooltip', 'card', 'lista'];
entradas.forEach(entry => {
const titulo = entry.title.$t;
const link = entry.link.find(l => l.rel === 'alternate').href;
const media = entry.media$thumbnail ? entry.media$thumbnail.url.replace('s72-c', 's400') : 'https://placehold.co/400x250?text=Sin+Imagen';
const autor = entry.author && entry.author[0] ? entry.author[0].name.$t : 'Autor desconocido';
const autorUrl = entry.author && entry.author[0] && entry.author[0].uri ? entry.author[0].uri.$t : blogURL;
const fechaPublicacion = entry.published ? entry.published.$t : '';
const fechaModificacion = entry.updated ? entry.updated.$t : '';
const metaDatos = `
<div itemprop="author" itemscope itemtype="https://schema.org/Person">
<meta itemprop="name" content="${autor}"/>
<meta itemprop="url" content="${autorUrl}"/>
</div>
<meta itemprop="datePublished" content="${fechaPublicacion}"/>
<meta itemprop="dateModified" content="${fechaModificacion}"/>
<meta itemprop="mainEntityOfPage" content="${link}"/>
`;
// HTML según variante
switch(variante) {
case 'card':
let contenido = entry.summary ? entry.summary.$t : (entry.content ? entry.content.$t : '');
const descripcion = contenido.replace(/<[^>]*>?/gm, '').substring(0, 100) + '...';
html += `
<article class='item-card' itemscope itemtype='https://schema.org/Article'>
<a href='${link}' itemprop='url'>
<img alt='Imagen del artículo: ${titulo}' itemprop='image' src='${media}'/>
</a>
<div class="item-card-content">
<h3 itemprop='headline'>${titulo}</h3>
<p itemprop="description">${descripcion}</p>
${metaDatos}
<a href='${link}' class='button'>Leer más</a>
</div>
</article>
`;
break;
case 'slider':
html += `
<article class='item-slider' itemscope itemtype='https://schema.org/Article'>
<a href='${link}' itemprop='url'>
<img alt='Imagen del artículo: ${titulo}' itemprop='image' src='${media}'/>
<h3 itemprop='headline'>${titulo}</h3>
</a>
${metaDatos}
</article>
`;
break;
case 'lista':
html += `
<li class='item-lista' itemscope itemtype='https://schema.org/Article'>
<a href='${link}' itemprop='url'>
<img alt='Imagen del artículo: ${titulo}' height='48' itemprop='image' src='${media}' width='48'/>
<span itemprop='headline'>${titulo}</span>
</a>
${metaDatos}
</li>
`;
break;
case 'masonry':
html += `
<article class='item-masonry' itemscope itemtype='https://schema.org/Article'>
<a href='${link}' itemprop='url'>
<img alt='Imagen del artículo: ${titulo}' itemprop='image' src='${media}'/>
<h3 itemprop='headline'>${titulo}</h3>
</a>
${metaDatos}
</article>
`;
break;
case 'lightbox':
html += `
<article class='item-lightbox' itemscope itemtype='https://schema.org/Article'>
<a data-lightbox='gallery' href='${media}' itemprop='url' target="_blank" rel="noopener noreferrer">
<img alt='Imagen del artículo: ${titulo}' itemprop='image' src='${media}'/>
</a>
<h3 itemprop='headline'>${titulo}</h3>
${metaDatos}
</article>
`;
break;
case 'horizontal':
html += `
<article class='item-horizontal' itemscope itemtype='https://schema.org/Article'>
<a href='${link}' itemprop='url'>
<img alt='Imagen del artículo: ${titulo}' itemprop='image' src='${media}'/>
<div>
<h3 itemprop='headline'>${titulo}</h3>
</div>
</a>
${metaDatos}
</article>
`;
break;
case 'tooltip':
html += `
<article class='item-tooltip' itemscope itemtype='https://schema.org/Article' title='${titulo}'>
<a href='${link}' itemprop='url' title='${titulo}'>
<img alt='Imagen del artículo: ${titulo}' itemprop='image' src='${media}'/>
</a>
<meta itemprop='headline' content='${titulo}'/>
${metaDatos}
</article>
`;
break;
default:
html += `
<article class='item-cluster' itemscope itemtype='https://schema.org/Article'>
<a href='${link}' itemprop='url'>
<img alt='Imagen del artículo: ${titulo}' itemprop='image' src='${media}'/>
<h3 itemprop='headline'>${titulo}</h3>
</a>
${metaDatos}
</article>
`;
}
// Generar JSON-LD solo para variantes indexables
if(variantesIndexables.includes(variante)) {
jsonLD["@graph"].push({
"@type": "Article",
"headline": titulo,
"image": media,
"author": {
"@type": "Person",
"name": autor,
"url": autorUrl
},
"datePublished": fechaPublicacion,
"dateModified": fechaModificacion,
"mainEntityOfPage": link
});
}
});
// Insertar HTML en contenedor
if (variante === 'lista') {
contenedor.innerHTML = `<ul class='galeria-lista'>${html}</ul>`;
} else {
contenedor.innerHTML = `<div class='galeria-${variante}'>${html}</div>`;
}
// Insertar JSON-LD al final del contenedor
if(jsonLD["@graph"].length > 0){
const scriptLD = document.createElement('script');
scriptLD.type = 'application/ld+json';
scriptLD.textContent = JSON.stringify(jsonLD, null, 2);
contenedor.appendChild(scriptLD);
}
})
.catch(err => {
contenedor.innerHTML = `<p>No se pudo cargar la galería para la etiqueta <strong>${etiqueta}</strong>.</p>`;
console.error(err);
});
});
});
//]]>
</script>2. Crea el contenedor donde quieras mostrar la galería
Puedes insertar el siguiente bloque HTML en cualquier parte de una entrada, página o widget HTML/JavaScript:
<!-- 1️⃣ Galería tipo CARD -->
<div class="galeria-feed card" data-etiqueta="Diseño" data-cantidad="6"></div>
<!-- 2️⃣ Galería tipo CLUSTER -->
<div class="galeria-feed cluster" data-etiqueta="Diseño" data-cantidad="6"></div>
<!-- 3️⃣ Galería tipo SLIDER -->
<div class="galeria-feed slider" data-etiqueta="Diseño" data-cantidad="6"></div>
<!-- 4️⃣ Galería tipo LISTA -->
<div class="galeria-feed lista" data-etiqueta="Diseño" data-cantidad="6"></div>
<!-- 5️⃣ Galería tipo MASONRY -->
<div class="galeria-feed masonry" data-etiqueta="Diseño" data-cantidad="6"></div>
<!-- 6️⃣ Galería tipo LIGHTBOX -->
<div class="galeria-feed lightbox" data-etiqueta="Diseño" data-cantidad="6"></div>
<!-- 7️⃣ Galería tipo HORIZONTAL -->
<div class="galeria-feed horizontal" data-etiqueta="Diseño" data-cantidad="6"></div>
<!-- 8️⃣ Galería tipo TOOLTIP -->
<div class="galeria-feed tooltip" data-etiqueta="Diseño" data-cantidad="6"></div>
👉 En el ejemplo anterior, se mostrarán 6 entradas con la etiqueta “Diseño” en formato card.
Solo cambia la clase y la etiqueta según la variante y tema que necesites mostrar.
💡 Recomendaciones y buenas prácticas
- Usa etiquetas específicas para controlar el contenido de cada galería (por ejemplo, “Fotografía”, “Recetas”, “Tutoriales”).
- No mezcles muchas variantes en una misma página para evitar sobrecargar el renderizado.
- Si usas
lightbox, asegúrate de tener el script y CSS de lightbox cargados en tu plantilla. - Para mantener la velocidad, activa el Critical Manager y el Cache Manager incluidos en NichoClean.
🚀 Beneficios para tu blog
Con este sistema, cada galería se adapta automáticamente al diseño minimalista de NichoClean v2.0, ofreciendo una apariencia profesional sin usar código complejo. Además, al estar conectado al feed de Blogger, tus nuevas publicaciones aparecerán en las galerías sin tener que editarlas manualmente.
Este módulo convierte tu blog en una plataforma dinámica, rápida y visualmente atractiva, ideal para nichos de contenido visual, tutoriales o portafolios.
🎯 Conclusión
El script “JS Imágenes” de NichoClean v2.0 es una herramienta poderosa para transformar cómo presentas tus contenidos visuales. Ya sea una galería tipo grid, un slider con animación o una lista de entradas relacionadas, todo se genera automáticamente con un diseño limpio y optimizado para SEO.
Experimenta con las variantes, ajusta tus etiquetas y disfruta de una experiencia visual profesional sin perder la esencia minimalista de NichoClean.
📌 Consejo final: para garantizar que las galerías funcionen correctamente, asegúrate de mantener activo el sistema Critical Manager incluido en la plantilla. Este módulo verifica que todos los gadgets esenciales estén presentes antes de cargar los scripts dinámicos.
Aún no hay comentarios, sé el primero en comentar.
Publicar un comentario