La buena presentación de un plato de cocina es muy importante para que a los comensales les entre la comida por los ojos.
Este capítulo dedicado a explicar cómo nos gusta vestir y presentar la mesa a nuestros comensales: que si los manteles, las copas, la vajilla, cómo presentar los platos...
En drupal necesitaremos saber trabajar con las temas y sus plantilas (themes, templates) sus css. Muchos platos pueden estar presentables con poco es cuestión de detalles que intentaremos explicar en este apartado.
La versión en inglés de este artículo: HOWTO: build your frontpage with regions
Esta manera de construir la Home de un sitio web con Drupal se realiza a través del tema que estemos utilizando. Para ello, utilizaremos tres archivos del tema:
- template.php
- page.tpl.php
- styles.css
Paso 1. En primer lugar deberemos crear las regiones de la home en el template.php. Por defecto, Drupal crea varias regiones y nosotros añadiremos varias más (para más información sobre cómo crear regiones puedes visitar la página oficiar de Drupal). Así que abrimos el archivo template.php y añadimos las regiones que necesitamos para la home. Utilizaremos como ejemplo la home de la web www.economiasolidaria.org (todavía sin publicar):
function nombredeltema_regions() {
return array(
'centro' => t('centro'),
'right' => t('right sidebar'),
'content' => t('content'),
'footer' => t('footer'),
'frontpage_top_izq' => t('Home-arriba-izq'),
'frontpage_top_der' => t('Home-arriba-der'),
'frontpage_bottom_izq' => t('Home-abajo-izq'),
'frontpage_bottom_der' => t('Home-abajo-der'),
'frontpage_bottom_cent'=> t('Home-abajo-cent'),
);
}
?>
En este ejemplo hemos creado cinco zonas diferentes para la home, pero podríamos crear cuantas quisiéramos según el diseño con el que estemos trabajando. Una vez hemos creado las regiones en el template.php guardamos y comprobamos que drupal lo está reconociendo. Para ello, en la administración de drupal iremos a
Administración > Construcción del sitio > Bloques
Y comprobaremos que las nuevas regiones existen, tal y como lo podemos observar en la imagen
(Insertar imagen)
Paso 2. A continuación abriremos el fichero page.tpl.php. y creamos el código. Tal y como se puede observar en el siguiente ejemplo, en primer lugar creamos la condición de frontpage, es decir, que sólo se pintará si nos encontramos en la página principal de la web. Y a continuación crearemos los contenedores que necesitemos según nuestro diseño. En este caso deseamos una primera fila con dos regiones (en nuestro caso está pensado para que cada espacio sea para un bloque) y una segunda fila con tres espacios (o bloques).
Este código lo colocaremos en el lugar que deseemos en el page.tpl.php. En el ejemplo que estamos siguiendo deseamos que la home mantenga toda la estructura de menús de la web y que el espacio central del contenido sea el que se diferencie en la home. Por esta razón, las regiones de la frontpage las colocamos en el mismo contenedor donde pintamos $content.
Paso 3. Abrimos el style.css y creamos los estilos para los contenedores y clases generadas en el page.tpl.php. En el CSS señalamos dónde y como se pintarán cada una de las regiones. Este sería el ejemplo de los estilos con los que venimos trabajando:
#top{
height:200px;
width:750px;
background-color:#3A541C;
margin:0px;
padding:0px;
}
#f_top_izq{
width:64%;
float:right;
margin:0px;
padding:0px;
}
#f_top_der{
width:35%;
height:200px;
background-color:#3A541C;
color:#fff;
font:bold 12px/150% sans-serif, Tahoma, Arial;
margin:0px;
padding:0px;
}
Paso 4. Por último sólo nos queda crear los bloques y activarlos en Bloques. En función de los contenidos que deseemos mostrar en la home activaremos alguno de los bloques disponibles o con las vistas crearemos aquellos que precisemos.
Vamos a ir recopilando enlaces sobre CSS, imprescindibles conocimientos para crear las plantillas de Drupal:
- Guía de Referencia Rápida CSS 2.1
- CSS - Propiedad : List-style-type
- CSS Pseudo-classes
- CSS - Tablas
- Creando botones vidriosos con CSS
- El Servicio de Validación de CSS del W3C
Buenas, llevo varios días pegándome con las imágenes, porque el módulo de tiMYNCE-IMCE agrega vspace y hspace, los cuales por lo que he leído no están del todo reconocidos por por firefox, y de hecho a mi no me los reconoce en firefox 2.0 con corriendo en gnu/linux, de hecho ni ffx, ni flock, ni epiphany ni opera.
Por lo que me he tenido que meter a trastear con css para ver como solucionarlo.
Lo cierto es que la solución no termina de gustarme porque toco el archivo css del tema para que se presente bien. pero no he conseguido otra forma de hacerlo.
Por otro lado, para poder usar este parche en tiMYNCE tengo que usar el botón de estilos (style) de tiMYNCE.
Bueno, a lo que voy, el código.
.node img {
padding:0.5px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:5px;
}
Para usarlo:
Y ya tenemos un pequeño aperitivo para hacer más bonitas las webs.
Lo ideal sería poder incorporar el estilo css de forma alternativa a tiMYNCE, se que se puede hacer, estoy trabajando en ello.
Un saludo
Oskar
Ojo, este código lo he sacado de drupal.org, y le he añadido únicamente el contar la cantidad de veces que aparecen las etiquetas utilizadas. Pasarlo a una lista ordenada hacia abajo tambíen sería sencillo, únicamente sacar las estiquetas span del foreach, y crear una lista con elementos li en el comando foreach.
<?php
class tag
{
var $name = "";
var $count = 0;
var $tid = 0;
function getCount()
{
return $this->count;
}
function getName()
{
return $this->name;
}
function setCount($var)
{
$this->count = $var;
}
function setName($var)
{
$this->name = $var;
}
function setTID($var)
{
$this->tid = $var;
}
function getTID()
{
return $this->tid;
}
}
$count = 0; // Overall count of used tags
$threshold = 1; // How many tags are needed to get displayed
$font_size = 0.8;
$query = "SELECT d.name,d.tid FROM {term_data} d, {term_node} dn WHERE dn.tid=d.tid;";
$result = db_query($query);
$tags['Test'] = 0;
while($node = db_fetch_array($result))
{
if ($tags[$node['name']] == NULL)
{
$tags[$node['name']] = new tag();
$tags[$node['name']]->setName($node['name']);
$tags[$node['name']]->setCount(1);
$tags[$node['name']]->setTID($node['tid']);
$count = $count + 1;
}
else
{
$tags[$node['name']]->setCount(
$tags[$node['name']]->getCount() + 1
);
$count = $count + 1;
}
}
foreach($tags as $tag)
{
$mycount = $tag->count;
if($mycount > $threshold)
{
$fraction = ((int)(($mycount / $count) * 60)) / 10;
if($fraction < $font_size)
{
$fraction = $font_size;
}
echo '<span style="font-size: ' . $fraction . 'em;">' . l($tag->name,'taxonomy/term/' . $tag->tid,array('title="' . $tag->count . ' Nodes"')).'[' .$tag->count .']</span> ';
}
}
?>Se puede ver como queda en: http://www.documentados.com/blog/oskar
Lo que no he conseguido hacer es que me coja un único vocabulario.
Un saludo
Óskar
A petición de un comensal en drupal.org.es huy vamos a preparar un plato un tanto especial, tenemos que tener algo de habilidad en el emplatado con el engine phptemplate.
El engine de phptemplate permite trabajar con template .php. En este archivo puedes crear tanto funciones que sobreescribe los themes de los módulos o puedes crearte tus propias historias, para eso el engine dispone de varias funciones que permite trabajar con los tlp.php:
Imaginemos que tenemos un modulo con una función que realizar una llamada a la bbdd para sacar el nid de los nodos que aparecen en la portada algo así.
Modulo bbddportada.module
function nids($tipo){
$uri_resquest_id = $_SERVER['REQUEST_URI'];
if ($uri_resquest_id == '/'){
$sql = "SELECT nid FROM {node} WHERE status = 1 AND type = '$tipo' order BY 'created'";
$result = db_query($sql);
while ($data = db_fetch_object($result)){
$nids = $data->nid;
}
return $nids;
}
}
?>
Sencillo con esta condicion if ($uri_resquest_id == '/') digo que no lo haga más que en la portada. y el resto devuelve los datos según el tipo mandado como argumento.
Después en el archivo template.php añado esta función
function _phptemplate_variables($hook, $vars = array()){
switch ($hook) {
case 'node':
$vars['nid_noticia'] = nids('noticia');
$vars['nid_acti'] = nids('actividad');
break;
}
return $vars;
}
?>
Cada vez que pasa por un hook, por ejemplo un nodo (pero podría ser un comment o un page) realizara lo que este dentro del "case". esto devuelve en el return y puede ser usado en la plantilla a la que haga referencia el hook
También se podría añadir este esquema para entender mejor este plato.
Theme('node') -->
phptemplate_node()
_phptemplate_callback('node',$variables)
_phptemplate_variables('node',$variables)
$nid_noticia = $vars['nid_noticia']
$nid_acti = $vars['nid_acti']
node.tpl.php
Por lo tanto de este esquema de funcionamiento se traduce en que una vez pasa por cada uno de estos paso de la renderización de nuestros nodos podremos añadir a la plantilla node.tpl.php las variables $nid_noticias y $nid_acti
node.tpl.php
?>
Y despues el resto de la plantilla de node con su $content y sus cosicas
Resumen si necestimas crear nuestras propias variables para trabajar con ellas en las plantillas necesitamos _phptemplate_variables
Buen provecho