Preparando plantillas de páginas específicas para clientes, en muchos casos me piden que añada bucles con contenidos dinámicos. Un ejemplo podrían ser artículos o eventos relacionados a un evento específico.
Esto es fácil de gestionar poniendo un bloque contenedor con un titulo (otros eventos, por ejemplo) y luego un bucle de eventos que no incluyan al actual.
Pero, ¿Y si no hay ningún actividad que se ajuste a la búsqueda? En este caso, además, yo tengo filtrado que sólo se muestren actividades cuya fecha todavía no ha pasado. Igual en verano no hay actividad y tenemos dos o tres meses una caja con un título y sin contenido.
¿Cómo soluciono que una capa sólo se muestre si tiene contenido?
Pues es sencillo con un poco de css. Al bloque contenedor le pongo la clase .capaContenidoDinamico y a la Plantilla de entrada, es decir, a cada una de las cajas de resultados del bucle, le pongo la clase .contenidodinamico.
Por último añado este css a la página:
.capaContenidoDinamico {
display: none !important;
}
.capaContenidoDinamico:has(.contenidodinamico) {
display: block !important;
}Por defecto la capa contenedora no se muestra pero si dentro tiene algún contenido con el class .contenidodinamico, es decir, si el bucle ha devuelto algún contenido, pues la capa contenedora se vuelve a mostrar. Sencillo y limpio