Oculta la primera imagen en blogger

JS: Oculta la primera imagen del post (excepto en productos, tienda o precios) — NichoClean v2.0

En este tutorial te enseñaré cómo funciona el script “JS Oculta la primera imagen menos en .ficha-producto, store, $xx.xx”, incluido en la plantilla NichoClean v2.0. Este pequeño pero potente script está diseñado para mejorar el SEO visual y la experiencia de lectura en tu blog, evitando mostrar imágenes repetidas o miniaturas innecesarias dentro del contenido de tus artículos.

¿Para qué sirve este script?

En muchos blogs de Blogger, la primera imagen del post suele ser también la imagen destacada o miniatura que aparece en los listados de entradas. Si esa misma imagen se muestra nuevamente al inicio del artículo, genera duplicación visual y distrae al lector.

Con este script, la plantilla NichoClean v2.0 detecta automáticamente la primera imagen del contenido y la oculta, solo cuando no corresponde a una ficha de producto, publicación de tienda o entrada con precios. De esta manera, los artículos normales se ven más limpios y profesionales, mientras que las fichas de productos o catálogos mantienen sus imágenes visibles.

Ventajas y beneficios

  • Elimina imágenes repetidas en tus artículos, mejorando la estética y legibilidad.
  • Mantiene visibles las imágenes importantes en fichas de producto o tiendas.
  • Mejora el SEO on-page al optimizar el contenido visual mostrado al usuario.
  • Se ejecuta automáticamente, sin que tengas que editar cada entrada.
  • Compatible con el diseño limpio y minimalista de NichoClean v2.0.

Cómo funciona el script

El script analiza cada publicación y aplica una serie de condiciones:

  1. Detecta si estás en una página estática (/p/ en la URL) y se desactiva automáticamente.
  2. Lee las etiquetas del post: si encuentra la palabra store, no oculta la imagen.
  3. Revisa si el contenido contiene un precio en formato $xx o $xx.xx.
  4. Comprueba si existe una clase .ficha-producto dentro del post.
  5. Si ninguna de esas condiciones se cumple, oculta la primera imagen o su contenedor inmediato.

De este modo, las entradas de productos, catálogos o publicaciones comerciales quedan intactas, mientras que los artículos normales eliminan la primera imagen automáticamente.

Cómo instalarlo paso a paso

1. Abre tu plantilla en modo HTML

Entra al editor de tu blog de Blogger, haz clic en “Tema → Editar HTML” y desplázate hasta el final del código.

2. Pega el siguiente script antes de </body>

<!-- 13. Js OCULTA LA PRIMERA IMAGEN MENOS EN .ficha-producto, store, $xx.xx  -->
<script>
//<![CDATA[
// Activador: true = se ejecuta / false = no hace nada
var activarOcultarImagen = true; // Variable para activar o desactivar el script

(function() {
  if (!activarOcultarImagen) return; // Si está desactivado, no hace nada y sale

  // Evita que se ejecute en páginas estáticas, detectando "/p/" en la URL
  if (window.location.pathname.includes('/p/')) return;

  // Busca el elemento que contiene las etiquetas del post
  var etiquetasEl = document.querySelector('.post-labels, .labels, .label-head, .post-footer .labels');
  // Obtiene el texto de las etiquetas en minúsculas, o cadena vacía si no existe
  var etiquetas = etiquetasEl ? etiquetasEl.textContent.toLowerCase() : "";

  // Comprueba si alguna etiqueta incluye la palabra "store"
  var tieneStore = etiquetas.includes("store");

  // Busca el contenido principal del post
  var postBody = document.querySelector('.post-body');
  if (!postBody) return; // Si no encuentra el cuerpo del post, sale

  // Expresión regular para detectar precios con formato $xx o $xx.xx
  var regexPrecio = /\$\s?\d+(\.\d{2})?/;
  // Verifica si el contenido del post contiene un precio según la regex
  var tienePrecio = regexPrecio.test(postBody.textContent);

  // Comprueba si existe un elemento con clase "ficha-producto" dentro del post
  var tieneFichaProducto = postBody.querySelector('.ficha-producto') !== null;

  // Si alguna de las condiciones (store, precio, ficha-producto) se cumple, no oculta nada y sale
  if (tieneStore || tienePrecio || tieneFichaProducto) return;

  // Busca la primera imagen dentro del cuerpo del post
  var primeraImg = postBody.querySelector('img');
  if (primeraImg) {

// Añadir lazy loading solo si no se va a ocultar
  if (!(tieneStore || tienePrecio || tieneFichaProducto)) {
    primeraImg.setAttribute('loading', 'lazy');
  }
    // Busca el contenedor más cercano con clase ".separator" que envuelve la imagen
    var contenedor = primeraImg.closest('.separator');
    // Si existe dicho contenedor y solo contiene esa imagen, lo oculta completamente
    if (contenedor && contenedor.querySelectorAll('img').length === 1) {
      contenedor.style.display = 'none';
    } else {
      // Si no, busca el elemento padre inmediato de la imagen
      var padre = primeraImg.parentElement;
      // Si ese padre es un <p> o <div> que solo contiene la imagen, lo oculta
      if (padre && padre.children.length === 1 && (padre.tagName === 'P' || padre.tagName === 'DIV')) {
        padre.style.display = 'none';
      } else {
        // Si no cumple ninguno de los casos anteriores, oculta solo la imagen
        primeraImg.style.display = 'none';
      }
    }
  }
})();

//]]>
</script>

3. Guarda los cambios

Una vez pegado el código, guarda la plantilla y actualiza tu blog. El script comenzará a ejecutarse automáticamente en las publicaciones que no sean de tipo “store” o “producto”.

Recomendaciones y advertencias

  • ⚙️ Si alguna publicación necesita mostrar la primera imagen, simplemente agrega la etiqueta store o un precio en formato $xx.xx para que el script no la oculte.
  • 🚫 No modifiques las clases internas del post (.post-body, .separator, etc.), ya que el script depende de ellas para funcionar correctamente.
  • 💡 Puedes desactivar el script temporalmente cambiando la línea var activarOcultarImagen = true; a false.

Conclusión

El script “Oculta la primera imagen menos en .ficha-producto, store, $xx.xx” es una de esas funciones inteligentes que marcan la diferencia en una plantilla profesional. Su objetivo es mantener el contenido limpio, atractivo y visualmente equilibrado sin comprometer la presentación de tus productos o entradas promocionales.

Si usas NichoClean v2.0, este ajuste ya está optimizado para integrarse sin conflictos. Aprovéchalo para ofrecer una experiencia de lectura más fluida y moderna, propia de un blog profesional orientado a SEO.

NichoClean v2.0 — Plantilla Blogger minimalista, rápida y optimizada para monetización, SEO y experiencia de usuario.