Cómo mostrar un extracto de tres líneas de cada entrada en el feed de tu blog de Webflow sin añadir un campo de resumen al CMS, con un fragmento de CSS y una clase combo.
Hace poco tuvimos que migrar una cantidad enorme de entradas de blog de un cliente de WordPress a Webflow, y nos topamos con un problema. El contenido en WordPress solo tenía un título, la entrada y una imagen. Lo habitual, si se hace al estilo Webflow, sería tener un campo para el resumen de la entrada, pero ni nosotros ni el cliente íbamos a escribir resúmenes para más de 500 entradas solo para mostrar un extracto de tres líneas en la página del blog antes de que alguien haga clic para leer la entrada. Así que pensamos: ¿por qué no mostrar simplemente tres líneas de texto del campo de texto enriquecido como resumen? A diferencia de la multitud de plugins de WordPress que generan un resumen, Webflow no tiene ninguna función para mostrar X caracteres de tu campo de texto enriquecido en una lista de colección. La solución: añadir un elemento de texto enriquecido para el resumen, conectarlo al texto completo de la entrada y mostrar solo unas pocas líneas de texto con puntos suspensivos al final. Se consigue con algo de código personalizado y una clase combo.
Resulta que es sorprendentemente sencillo, así que allá vamos. Sigue los pasos y simplemente copia y pega:
Paso 1: añade el CSS personalizado al encabezado de tu sitio
Ve a Site settings, Custom code, y pega el estilo en la sección Head code:
<style>
/* Auto Post Summary Character Limit */
.textlimit {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>También puedes ver el código como un pen en CodePen: Create a Blog Summary or Excerpt in Webflow, de Jakes van Eeden.
Hay varias formas de hacerlo, pero limitar por caracteres es algo complicado. La forma más fácil sería medir el ancho de los caracteres y fijar un límite, pero eso cambia según la tipografía y otros factores, lo que lo vuelve difícil de controlar, así que en este ejemplo hemos optado por tres líneas. Si prefieres otro número de líneas, cambia el 3 en -webkit-line-clamp.
Lo que sucede es que, cuando conectas el campo de texto enriquecido de tu lista de colección al elemento en el Designer, se muestra todo el texto de ese campo. Después aplicas la clase combo de límite de texto y en el Designer se verá igual, pero una vez que publiques, limitará el texto mostrado en el sitio publicado a tres líneas. Los prefijos -webkit- parecen anticuados, pero siguen siendo la forma de hacerlo: MDN indica que la combinación de las tres propiedades está totalmente especificada y seguirá siendo compatible, mientras que la propiedad nueva sin prefijo line-clamp todavía no funciona en todos los navegadores más utilizados. Así que, siguiente paso:
Paso 2: aplica la clase combo
Damos por hecho que ya has creado el elemento para este paso, pero si no, añade una lista de colección CMS, coloca un elemento de texto enriquecido dentro del elemento de la lista de colección y vincúlalo al campo de texto enriquecido de tu elemento de colección que contiene la entrada del blog. Dale estilo en el Designer, añade la clase combo textlimit y publica:
Como dijimos antes, en el Designer verás todoooo el texto de ese campo, así que no se verá muy bien, pero no te preocupes: se verá genial una vez que publiques.
Así se ve el sitio en vivo después de publicar:
Y ya está. Fíjate en el n.º 1: tres líneas de texto, luego puntos suspensivos, y nada más. Solo recuerda darle el estilo adecuado al elemento de texto enriquecido en el Designer. Si miras los n.º 2, 3 y 4, verás que todavía no lo he hecho. Básicamente, conviene dar a los encabezados, y a casi cualquier otro elemento de ese campo de texto enriquecido, el mismo estilo que el párrafo por defecto que quieres mostrar.
Reconocemos que no es perfecto y que no siempre queda al 100 % correcto, basta con mirar el n.º 3 sin estilo, pero cuando tienes 500 entradas de blog antiguas, sirve.
¿Cómo se resuelve el problema de cara al futuro?
Una breve nota sobre cómo resolver el problema de ahora en adelante. Para este cliente sí creamos un campo de resumen y lo hicimos obligatorio, de modo que a partir de ahora tienen que rellenarlo. Después añadimos visibilidad condicional y colocamos el párrafo del resumen debajo del elemento de texto enriquecido del resumen. La visibilidad condicional del párrafo vinculado al campo de resumen en la lista de colección CMS se configuró para mostrarse si el resumen estaba definido, y la del elemento de texto enriquecido para mostrarse si el resumen no estaba definido. Así, el resumen de texto enriquecido solo se muestra en las entradas antiguas que no tienen resumen, y se oculta para mostrar el resumen real en las entradas nuevas que sí lo tienen.
¿Afectará al rendimiento o al SEO?
Jef S planteó en el foro de Webflow un punto interesante: que se sufrirá un impacto en rendimiento y SEO, algo que no expliqué antes. Para reducirlo en lo posible, configuramos los elementos para que no carguen imágenes, solo paginamos 6 elementos (usamos paginación fluida para eso) y, en cuanto al SEO, usé una metaetiqueta en el sitio: <!-- fs-richtext-ignore --><META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW"> que, según nuestra experiencia, permite que Google rastree los enlaces de la página e ignore el contenido. Así, para Google la página es prácticamente invisible, pero le permite seguir los enlaces y rastrear las entradas reales del blog. A nosotros nos funcionó en su momento. Desde entonces Google ha dicho que una página que permanece mucho tiempo en noindex acaba tratándose también como nofollow, así que comprueba tus propios resultados en lugar de tomar esto como una garantía.
Preguntas frecuentes
¿Cómo se muestra un extracto de blog en Webflow sin un campo de resumen?
Vincula un elemento de texto enriquecido de tu lista de colección al cuerpo completo de la entrada, añade una clase combo con -webkit-line-clamp configurado con el número de líneas que quieras y publica. El límite solo se aplica en el sitio publicado, así que el Designer sigue mostrando todo el texto.
¿Se puede limitar un campo de texto enriquecido de Webflow a un número de caracteres?
No de forma nativa. Webflow no tiene ningún ajuste para ello, y un límite de caracteres es difícil de controlar con CSS porque el ancho de cada carácter cambia según la tipografía. Limitar por líneas, como hacemos aquí, es la opción fiable más sencilla.
¿Por qué el extracto se ve distinto en el Designer?
El Designer muestra todo el texto del campo de texto enriquecido vinculado, por lo que se ve largo y sin estilo. Una vez que publicas, la clase combo lo limita al número de líneas que elegiste. Da al elemento de texto enriquecido el estilo de un párrafo normal para que el extracto encaje con el resto de tu diseño.
¿Conviene añadir igualmente un campo de resumen propio?
Sí, para el contenido nuevo. Usa este truco para las entradas antiguas, y después añade un campo de resumen obligatorio y usa la visibilidad condicional para mostrarlo en lugar del extracto automático, como se describe más arriba.
Deja un comentario abajo si tienes alguna pregunta, y no olvides echar un vistazo a nuestros otros tutoriales de Webflow y analítica aquí. Si estás creando diseños basados en el CMS, quizá también te interesen nuestras entradas sobre cómo dar estilo a los spans de texto en texto CMS dinámico, cómo romper la cuadrícula del CMS y cómo añadir modos de fusión con clases combo, o echa un vistazo a nuestros Webflow cloneables.
