Tutorial: Cortar texto introductorio donde quieras (SSI)

[metacortex]

Desde hace como 8 meses [nofollow] que varios andábamos intrigados con esto y al fin salió el asunto. Consiste en darle al SSI.php la capacidad de cortar el texto donde se desee, en lugar de darle un número fijo de caracteres. De esta manera podemos confeccionar los textos introductorio de una forma más productiva y libre.

Tanto revisar y comparar archivos de scripts que usaban SMF como plataforma (TP y MKP específicamente) y al final la solución estaba en el mismo SSI. Lo primero que se hizo fue despejar lo concerniente a la variable $lenght, la cual obstaculizaba a $cutoff, que era la función buscada.

Las modificaciones se hicieron sobre SMF 1.1.2.

Abrir SSI.php

Buscar (Aprox. en la Línea 1300)

Code Select Expand

// If we want to limit the length of the post.
if (!empty($length) && $func['strlen']($row['body']) > $length)
{
$row['body'] = $func['substr']($row['body'], 0, $length);

// The first space or line break. (<br />, etc.)
$cutoff = max(strrpos($row['body'], ' '), strrpos($row['body'], '<'));

if ($cutoff !== false)
$row['body'] = $func['substr']($row['body'], 0, $cutoff);
$row['body'] .= '...';
}

Reemplazar por:

Code Select Expand

// If we want to limit the length of the post.
{
$cutoff = strrpos($row['body'], '[hr]');
$row['body'] = $func['substr']($row['body'], 0, $cutoff);
$row['body'] .= '';
}

Obviamente si existía una orden que asignaba una longitud específica al texto de introducción, "arropaba" la contraorden del límite flexibilizado a voluntad.

Ahora veamos cómo se puede personalizar ese último fragmento:

Si nos fijamos en la siguiente línea

Code Select Expand

$cutoff = strrpos($row['body'], '[hr]');

veremos "[ hr ]" (sin espacios), el cual es el equivalente BBCode de SMF para "<hr />". Esto quiere decir que cuando se coloque "[ hr ]", SMF cortará el texto que se encuentre en el sitio web (no en el foro), mientras que en el foro veremos un separador horizontal. De esta manera no nos limitamos a un simple límite fijo de caracteres, sino que podemos darle la extensión que deseemos a nuestro texto de introducción. Coloqué ese "[ hr ]" porque me pareció estético y funcional, pero también es posible colocar otros caracteres; por ejemplo, si colocas un punto el corte se hará justo en el primero que encuentre, bien sea seguido o aparte.

No obstante, lo importante es asignar caracteres válidos o su contraparte HTML. Por ejemplo, si lo que deseas es poner esto: ">>", debes escribir "&gt;&gt". De todas formas el asunto es probando hasta que encontremos algo que nos guste. Sospecho que la función (para fortuna) no reconoce etiquetas del HTML ya interpretado, sino lo que le coloquemos ahí.

Una idea que se me ocurre en este momento (no la he probado aún) es hacerse un pequeño GIF y subirlo como smiley en el foro. Ese smiley no sería una carita como tal, sino un pequeño cuadrado o círculo que le dé un toque de estética al final de la introducción. A ese GIF le colocamos una clave especial, por ejemplo "mhjgk", y mientras asignamos "mhjgk" a la línea SSI, SMF mostrará la pequeña imagen como término del texto introductorio, al tiempo de que en el sitio web no se mostrará nada, pues se trata del cortado del artículo.

Por supuesto, la función $lenght queda desactivada con la eliminación de esas líneas. Pero con esta nueva capacidad quién la necesita? :-)

Ahora bien, existe esta otra línea

Code Select Expand

$row['body'] .= '';

Entre esos apóstrofes se podría colocar, por ejemplo, tres puntos suspensivos con su espacio ' ...', pues será lo que saldrá al final del corte en el texto del sitio web. En este caso lo dejé vacío porque no me gustan esos tres puntos. Pero ciertamente se puede personalizar a gusto. Cuestión de probar si allí se puede colocar un enlace de "seguir leyendo" o algo así (seguramente se puede). Y aún mejor: un enlace entre etiquetas HTML con su clase para luego hacer un bonito botón CSS. Las posibilidades abundan.

Un aspecto importante es que si se va a usar esta modificación es obligatorio colocar el corte, aunque sea al final del artículo. De lo contrario sólo se verá el título (lo cual si se mira de manera productiva también puede desembocar en otra ventaja).

Arreglando el HTML

Este punto es uno de los más esenciales de las modificaciones, ya que aquí jugaremos un poco con el PHP para asegurarnos de que la maquetación de nuestra web no se vea afectada por el formato del foro. Recordemos que estamos tratando sólo la función ssi_boardNews del archivo SSI.php de SMF:

Busca (Aprox. en la Línea 1350)

Code Select Expand

foreach ($return as $news)
{
echo '
<div>
<a href="', $news['href'], '">', $news['icon'], '</a> <b>', $news['subject'], '</b>
<div class="smaller">', $news['time'], ' ', $txt[525], ' ', $news['poster']['link'], '</div>

<div class="post" style="padding: 2ex 0;">', $news['body'], '</div>

', $news['link'], $news['locked'] ? '' : ' | ' . $news['comment_link'], '
</div>';

if (!$news['is_last'])
echo '
<hr style="margin: 2ex 0;" width="100%" />';
}
}

Reemplaza por:

Code Select Expand

foreach ($return as $news)
{
$news['body'] = preg_replace('~<+span style+="+(.)+">~', '', $news['body']);
$news['body'] = preg_replace('~</span>|<b>|</b>|<i>|</i>|<del>|</del>|<u>|</u>~', '', $news['body']);
echo '
<div class="articulo">
<h3><a href="', $news['href'], '" title="', $news['subject'], '"> ', $news['subject'], '</a></h3>
<div class="fecha">', $news['time'], ' ', $txt[525], ' ', $news['poster']['link'], '</div>
<div class="texto">', $news['body'], '</div>
<div class="comentarios">', $news['link'], $news['locked'] ? '' : ' | ' . $news['comment_link'], '</div>
</div>';
}
}

Analicemos estos cambios. En primera instancia se le agregó el siguiente fragmento PHP

Code Select Expand

$news['body'] = preg_replace('~<+span style+="+(.)+">~', '', $news['body']);
$news['body'] = preg_replace('~</span>|<b>|</b>|<i>|</i>|<del>|</del>|<u>|</u>~', '', $news['body']);

El objetivo del mismo es limpiar todas las etiquetas que tenga el texto de introducción cuando se muestre en tu sitio web (en el foro queda igual) ¿Cuál es la razón de esto?. Supón que a ese mismo texto de introducción quieres darle un formato distinto para diferenciarlo del contenido -como otra fuente, tamaño, color, etc.- por medio del BBCode del foro. De forma predeterminada, SMF procesa esos datos y los convierte en etiquetas <span style="bla bla">, las cuales también se reflejarían en tu web. Con esto el problema se arregla.

Entramos ahora con la maquetación. La idea es hacer nuestro contenido más accesible, más sujeto a los estilos de nuestra web y que al mismo tiempo nos ofrezca libertad para diseñar.

El título del artículo
De forma predeterminada el enlace al artículo (post) se encuentra en el ícono. Puede eliminarse ese ícono o dejarlo. Yo lo eliminé porque no quiero íconos del foro en el portal y así lo coloqué:

Code Select Expand

<h3><a href="', $news['href'], '"> ', $news['subject'], '</a></h3>

Ahora tenemos un H3 como título enlazando al artículo, en lugar de un ícono.

El contenido del artículo
Si vemos el código que reemplazó al anterior, nos daremos cuenta de que todo lo que representaba un obstáculo para nuestro diseño fue eliminado, con el objeto de que los estilos del SSI no entorpezcan el diseño de nuestra web. Las clases y la estructura pueden cambiar según tu parecer y se regirán por la hoja de estilos CSS de tu web, no de tu foro. Esto es lo que hace al SSI muy funcional.

Listo. Con eso el problema se resuelve. Sólo imaginemos las posibilidades que tenemos con la implementación de estas modificaciones.


¡Importante!
SMF ofrece (a diferencia de otros sistemas de foros) la posibilidad de crear estructura HTML usando sólo BBCode, pues el mismo está configurado nativamente de forma extendida para lograrlo. Con ello podemos dar un aspecto visualmente más dinámico a nuestros posts sin la necesidad de arriesgarnos a activar el HTML en el contenido.

Aclarado esto viene la advertencia: Si se va a hacer un texto introductorio con estructura (por ejemplo, una fotografía flotando a la izquierda) hay que asegurarse de cerrar todas las etiquetas de ese trozo, o de lo contrario la función de corte se traducirá en una ruptura de los estándares a nivel del sitio web que mostrará el resultado, pues con el corte del artículo también viene el corte de etiquetas.

Eso es todo. Espero que este texto en algún momento les resulte una buena solución, tal como me está resultando a mí ahora.

Saludos.

[Pedi que me borren]

Muy bueno, Metacortex...Gracis por el aporte..!

[H@free]

Lo intentare... haber que me da....

[indos]

no entiendo para que sirve

[HotJoint]

Esto es aplicable al TP para que se corte el texto y salga un link como "leer mas"?

[metacortex]

Esto es aplicable al TP para que se corte el texto y salga un link como "leer mas"?

HotJoint, aplicando esta técnica con creatividad, sencillamente no necesitarás TinyPortal ni querrás saber de él jamás .

no entiendo para que sirve

Este método sirve para -por ejemplo- construir un portal completo e interactivo funcionando con el motor de SMF (nada más y nada menos ). Los foros tienen funciones que no poseen los portales (y vaya que hacen falta muchas veces) tales como una completa gestión de usuarios, un sistema de seguridad más robusto, etc.. El problema de los foros es que tienen esa apariencia de "foros" poco atractiva. Este método permite personalizar el index de un portal al máximo, trabajando -como se mencionó- sólo con SMF.

Adicionalmente, un foro como SMF incluye de manera nativa componentes que en el caso de los portales deberían ser instalados aparte: encuestas, manejo de archivos (y encriptación de archivos subidos) son parte de las ventajas que este sistema trae por defecto.

Por eso escribí: "Sólo imaginemos las posibilidades que tenemos con la implementación de estas modificaciones." Sin embargo, este mini-tuto es sólo el principio de un conjunto de modificaciones que se le pueden hacer a SMF para convertirlo en un portal.

En cuanto a la apariencia de lo que serían las páginas internas, todo es cuestión de modificar HTML, CSS y conocer algo de programación básica orientada a SMF. La creatividad hace el resto.

Recordemos que SMF no es software libre, por lo cual debemos respetar las limitaciones de la licencia, en especial la conservación del crédito al pie de las páginas internas.

Muy bueno, Metacortex...Gracis por el aporte..!

Todavía estoy esperando mi birra  .

En serio, disculpen por la tardanza en la respuesta. Estaré más pendiente del tópico.

[chaky!]

Alguien sabe si es funcional en 1.1.7?


Grax