Cuando trabajamos en una plantilla de Blogger, truncar texto es una tarea frecuente y Blogger posee el operador snippet para ello. Sin embargo, podemos llevar el operador snippet un paso más allá y es por eso que he creado esta función.
Situación
El operador snippet de Blogger por si solo ya es muy útil, pero a veces no es solo truncar, sino también condicionar el bloque destinado a mostrarlo. Por ejemplo:
<p class='post-snippet'>
<b:eval expr='data:post.snippets.long snippet { length: 100 }'/>
</p>Cuando el texto no está disponible o esta vacío:
<p class='post-snippet'> </p>Esta claro que esto lo podemos resolver con una condición, pero cuando tenemos que realizar esto en varios lugares, se vuelve repetitivo y tedioso.
Función en Blogger
Esta tarea se puede resolver con una función que encapsule el operador snippet y lo haga más fácil de usar. A continuación te muestro la función que he creado para ello:
<b:includable id='@snippet'>
<b:comment>
Creates a snippet of a string
@author zkreations
@param {string} string - Text to be shortened
@param {string} [tag="p"] - Container HTML tag
@param {string} [class] - Container class
@param {string} [id] - Container id
@param {number} [length=70] - Length of the string
@param {string} [ellipsis="..."] - Ellipsis to be added at the end of the string
</b:comment>
<b:if cond='data:string and (data:string snippet {
links: false,
ellipsis: false,
linebreaks: false
}) != ""'>
<b:with value='data:length ?: 70' var='length'>
<b:with value='(data:length + 0) == data:length ? (data:length * 1) : 70' var='length'>
<b:tag expr:name='data:tag ?: "p"'>
<b:class cond='data:class' expr:name='data:class'/>
<b:attr name='id' expr:value='data:id'/>
<b:eval expr='(data:string snippet {
length: data:length,
links: false,
ellipsis: false,
linebreaks: false
}) + (data:ellipsis ?: "...")'/>
</b:tag>
</b:with>
</b:with>
<b:else/>
<b:comment render='true'>No text to display</b:comment>
</b:if>
</b:includable>Explicación
La función @snippet crea un bloque de texto truncado a partir de una cadena de texto. Además, realiza una verificación para asegurarse de que la cadena no esté vacía antes de mostrar el bloque completo. También puedes configurar el bloque HTML que contiene el texto truncado entre otros ajustes que son comunes y en la mayoria de los casos suficientes.
Además, verifica que el valor ingresado para la longitud sea un número válido. Esto es especialmente útil si tu tema está diseñado para el público en general. Como mencioné en mi artículo sobre la validación de tipos de datos en Blogger, es importante asegurarse de que los valores ingresadps por los usuarios no rompan el tema.
Esta función pertenece a mi proyecto para desarrollar temas de Blogger Hamlet. Si deseas conocer mejor el código puedes verlo en el repositorio de Github.
Modo de uso
Incluye la función dentro de un marcado predeterminado "Common" de tal manera que este disponible globalmente en tu plantilla. Ahora para usarla debes prestar atención a los siguientes parámetros:
Cadena de texto
Este parámetro es obligatorio y es el dato del tipo texto que deseas truncar. Puedes usar cualquier etiqueta de datos de Blogger que devuelva un texto o escribirlo explícitamente.
<b:include data='{ string: data:post.snippets.long }' name='@snippet'/>Etiqueta HTML
Este parámetro te permite elegir la etiqueta HTML que deseas usar como contenedor del texto truncado. Puedes usar cualquier etiqueta HTML válida como div, p, span, etc.
<b:include data='{
string: data:post.snippets.long,
tag: "div"
}' name='@snippet'/><div>Truncated sample text...</div>Clase CSS
Este parámetro te permite agregar una o más clases CSS al contenedor del texto truncado. Puedes usar cualquier clase CSS válida que hayas definido en tu hoja de estilos.
<b:include data='{
string: data:post.snippets.long,
class: "snippet-text"
}' name='@snippet'/><p class='snippet-text'>Truncated sample text...</p>Identificador
Este parámetro te permite agregar un identificador único al contenedor del texto truncado. Los identificadores deben ser únicos en el documento HTML, por lo tanto no se recomienda usar este parámetro a menos que puedas garantizar que el identificador no se repita.
<b:include data='{
string: data:post.snippets.long,
id: "snippet-1"
}' name='@snippet'/><p id='snippet-1'>Truncated sample text...</p>Longitud
Este parámetro te permite especificar que tan largo deseas que sea el texto truncado. El valor ingresado debe ser un número entero positivo y debe estar entre 50 y 1000. Si no se especifica, el valor por defecto es 70.
<b:include data='{
string: data:post.snippets.long,
length: 100
}' name='@snippet'/>Elipsis
Este parámetro te permite especificar el texto que se agregará al final del texto truncado. Por defecto es ... pero puedes cambiarlo a cualquier otro texto que desees.
<b:include data='{
string: data:post.snippets.long,
ellipsis: " [continuar leyendo]"
}' name='@snippet'/><p>Truncated sample text [continuar leyendo]</p>Conclusión
Con esta función puedes crear bloques de texto truncados más fácilmente y reducir algunas tareas repetitivas e te puede ayudar a no repetir código en tu plantilla. Recuerda que puedes personalizar la función según tus necesidades y agregar más parámetros si lo deseas.
Si tienes alguna duda o sugerencia, no dudes en dejar un comentario. Espero que esta función te sea útil y te ayude a mejorar tus plantillas de Blogger. Muchas gracias por leerme.
