Foros del Web » Creando para Internet » Sistemas de gestión de contenidos »

Tutorial: Cortar texto introductorio donde quieras (SSI.php de SMF)

Estas en el tema de Tutorial: Cortar texto introductorio donde quieras (SSI.php de SMF) en el foro de Sistemas de gestión de contenidos en Foros del Web. Desde hace como 8 meses que varios andábamos intrigados con esto y al fin salió el asunto. Consiste en darle al SSI.php la capacidad de ...
  #1 (permalink)  
Antiguo 16/06/2007, 07:49
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 11 meses
Puntos: 832
Tutorial: Cortar texto introductorio donde quieras (SSI.php de SMF)

Desde hace como 8 meses 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)
Código:
		// 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:
Código:
		// 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
Código:
$cutoff = strrpos($row['body'], '[hr]');
veremos "[hr]", 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
Código:
$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)

Código:
	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:
Código:
	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
Código:
$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é:
Código:
<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. Elbar, me debes una birra =P.

Saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:22.