Mejorando las plantillas de categorías

Algunos consejos para mejorar la plantilla de categorías de un sitio Web utilizando BauDocWriter



Hasta ahora hemos modificado nuestra plantilla principal y de página pero nos falta ver cómo mejorar nuestras plantillas de categorías.

Recordemos que las categorías o páginas de índice internas utilizan dos plantillas: la plantilla cabecera categorías y la plantilla de elementos de categoría , vamos a seguir el orden lógico y comenzaremos con la cabecera.

Para ello abrimos la plantilla Category.tpt que creamos en nuestro paso de definición de plantilla de categorías y vamos a cambiar el contenido por:

	
%article { class = "panel bg-clr-article brd-rounded-shadow"}
	%header { class="panel-header bg-clr-article-gradient brd-bottom-dotted ts-white" }
		%h1 $Title
	%div { class = "GridRow" }
		<% if $UrlThumbnail != "" || $UrlImage != "" %>
			%div { class = "GridCell25 fl thumb-small" }
				<%if $UrlThumbnail != "" %>
					%img { src = $UrlThumbnail alt=$Title}
				<%else%>
					< %if $UrlImage != "" % >
						%img { src = $UrlImage alt=$Title}
			%div { class = "GridCell75 fr" }
					$Content
		<% else %>
			%NoTag
				$Content
	

Si compilamos nuestro sitio, nos aparecerá una imagen similar a la que aparece en la parte superior de este artículo. Como podemos ver, se ha modificado la cabecera por algo más interesante pero aún lo podemos mejorar un poco más, simplemente vamos a añadirle una imagen a la categoría. Para ello abrimos la página Manual y pegamos una imagen. Ahora podemos volver a compilar para ver cómo afecta a nuestro sitio:

Primera compilación de la página Manual

Ahora ya tenemos una imagen asociada a la cabecera. Si leemos nuestra plantilla vemos que aparece una nueva variable llamada $UrlThumbnail que precisamente contiene la dirección del archivo de thumbnail que BauDocWriter crea automáticamente para las imágenes.

Si observamos la plantilla vemos que la primera instrucción < %if define dos rutas diferentes: si no hemos asociado ninguna imagen a la cabecera de categoría el contenido ocupará todo el ancho posible (como ocurre en la primera imagen de este artículo), pero si hemos definido una imagen, ésta se coloca a la izquierda del contenido como en la imagen anterior.

La etiqueta %NoTag que aparece al final de la plantilla es una etiqueta especial de BauDocWriter que simplemente indica al compilador que no se debe insertar ninguna etiqueta HTML. En este caso, el contenido irá directamente dentro del div con la clase GridRow .

Plantilla de los elementos de categoría

Ahora que hemos modificado la plantilla de la cabecera de categorías, vamos a ver la plantilla de elementos de categoría para hacerla más atractiva y aplicar los estilos correspondientes.

Para ésto, vamos a cambiar el contenido de la plantilla CategoryItems.tpt por el siguiente:

	
<% for $intIndex = 1 to 100 %>
	<% if $Url[$intIndex] != "null" %>
		%article { class = "cb panel bg-clr-summary brd-rounded-shadow" }
			%header { class = "panel-header bg-clr-summary-gradient"}
					%h2 #a { href = $Url[$intIndex] } $Title[$intIndex] #
			%div { class = "GridCell25 thumb-small fl" }
				<%if $UrlThumbnail[$intIndex] != "" %>
					%a {href= $Url[$intIndex] } #img {src = $UrlThumbnail[$intIndex] alt=$Title[$intIndex]} #
				<%else%>
					<%if $UrlImage[$intIndex] != "" %>
						%a {href = $Url[$intIndex] } #img {src = $UrlImage[$intIndex] alt=$Title[$intIndex]} #
					<%else%>
						%a {href = $Url[$intIndex] } #img {src=" Images\ NoImage.jpg" alt=$Title[$intIndex]} #
			%div { class = "GridCell75 fr" }
				$Content[$intIndex]
				%a { class = "btn btn-sm btn-success fr" href= $Url[$intIndex] } Leer más ...
			%footer { class = "panel-footer"}
				%div { class = "GridCell25 fr" }			
					%p #b #i { class = "fa fa-calendar" } # # $Date[$intIndex]
	

Esta plantilla nos debe resultar ya familiar, la única variable nueva es $Date que contiene la fecha completa de creación del artículo y que se verá en el pie del índice. La otra particularidad de esta plantilla es que si no se encuentra ninguna imagen principal para la página (es decir, si tanto $Url como $UrlThumbnail están vacías), se muestra la imagen NoImage.jpg 3 del directorio Images . Para este sitio he escogido la imagen de un gato sobre un monitor.

Al compilar el sitio veremos una página como ésta:

Compilación de la categoría Manual con las plantillas completas

con la que damos por finalizada nuestro estudio sobre plantillas, artículos y categorías antes de pasar a la definición de secciones de nuestro sitio Web.



Páginas relacionadas