Instalar un nuevo tema en Drupal

Antes de empezar este post, simplemente deciros que este tiempo ausente ha sido básicamente porque ha hecho buen tiempo y se está mejor al sol que frikeando y además cada vez que me ponía con esto tenía un problema con el inicio de sesión como administrador en el sitio que he solucionado siguiendo esto: http://drupal.org/node/1023440 (mas sobre el inicio de sesión en http://drupal.org/node/201871).

Después de este inciso y para acabar la primera versión de la web sólo nos falta darle el aspecto que queremos así que vamos instalar un nuevo tema en Drupal. Primero, tengo que decir que a mí, lo que viene siendo el diseño web se me da entre mal y peor (inciso 2 J) así que para poder seguir voy a descargar un tema gratuito para Drupal desde http://drupal.org/project/themes.

Una vez descargado el tema, (yo he cogido el tema zen, que es un tema vacío de estilos que luego puedes personalizar) vamos a instalarlo en nuestra aplicación Drupal. Descomprimimos y para hacerlo bien y, al contrario de lo que suelo hacer, voy a leer el fichero README-FIRST.txt. Se supone que hay que mover la carpeta resultado de la descompresión a: /drupal_home/sites/all/themes. Genial, lo hago y la web deja de funcionar L. La web en sí no, lo que ocurre exactamente es que no carga el contenido de los overlays. Vamos a probar otra cosa…

Eliminamos la carpeta del tema (los overlays vuelven a funcionar) y miramos las opciones sobre apariencia que nos da el gestor de Drupal. Clickamos en “Apariencia” y lo primero que nos aparece es un enlace para “Instalar nuevo tema”.

Hacemos click en instalar nuevo tema y vemos que tenemos dos opciones: instalarlo desde una url o seleccionar un archivo. Como ya lo hemos descargado, seleccionamos la segunda opción. Le decimos dónde está el archivo comprimido y le damos a instalar, de nuevo otro error, se ha reseteado la conexión (eso dice pero es mentira).

Pues bien, vamos a probar a instalarlo desde la url, ya que me da la impresión de que lo que está mal es el archivo que he descargado (pese a que no da ningún error al descomprimir y la estructura de carpetas y archivos es correcta para un tema de Drupal). Volvemos a Apariencia -> Instalar nuevo tema y ponemos la url del tema (http://ftp.drupal.org/files/projects/zen-7.x-3.1.zip) y le volvemos a dar a instalar mientras cruzamos los dedos. Et voilà, el nuevo tema está instalado J

Conclusión de todo esto: La próxima vez leerá el readme-first quién yo te diré.

Siguiente paso, activamos el tema. Volvemos a “Apariencia” (ahora los overlays sí funcionan. Por curiosidad, miro las carpetas dónde se supone debíamos poner la carpeta del tema, y ahí está, en fin…) y aparece, en temas desactivados el tema que acabamos de instalar. Lo activamos pulsando “activar” y aparece un mensaje de que el tema ha sido activado. 

Vamos a ver qué opciones nos da. Las opciones básicamente son respecto a los elementos que se mostrarán cuando se utilice ese tema. Así qué vamos a utilizarlo. Dado que la web es una web para una empresa cuyo back office sólo voy a ver yo, el resultado que quiero es que el tema zen sólo se muestre para los usuarios no logueados, es decir para todos menos para mí. Pero esto no está las opciones. Para ello, clickamos en “Establecer cómo predeterminado” para que se muestre ese tema. El resultado es un cambio de aspecto de la web a un tema vacío y qué no dice nada, ya que se supone que este tema es para desarrollar a partir de él algo personalizado. Dado que el diseño web no es mi fuerte, voy a buscar otro tema ahora qué ya sé cómo instalarlo J.

Poniendo una galería de fotos con yoxview

Bueno, después de este largo descanso volvemos con el tema de la web :) la última parte del contenido que no es texto es la galería de imágenes usando el módulo YoxView. Así que lo primero que hago es buscar en Google "Galería de imágenes Drupal 7" y encuentro este enlace: http://jmolivas.com/c-mo-crear-una-galer-de-im-genes-en-drupal-7-con-el-m-dulo-yoxview que justo explica esto. Siguiendo los pasos que pone en el blog,  podemos instalar YoxView (http://www.yoxigen.com/yoxview/) sin problemas así que os recomiendo que le echéis un vistazo. Sin embargo, al intentar seguirlo sin saber nada más me ha costado un poco así que voy a explicar en 4 pasos cómo conseguí que funcionara.

Paso 1: Instalar el módulo desde http://ftp.drupal.org/files/projects/yoxview-7.x-1.1.zip (para windows, para linux el enlace es igual pero en lugar de .zip .tar.gz. Para ello vamos a “Modules à install new module” y en el campo url ponemos la dirección del ftp desde el que descargar el módulo y le damos a install. A continuación, lo habilitamos para ello desde “Modules” marcamos la casilla enabled y hacemos click en el enlace “update script” que aparece al inicio de la página de módulos.

Paso 2: Crear el tipo de contenido para yoxview: En el menú superior vamos a Structure à Content Types à Add content type. 

Indicamos el nombre, la descripción y el campo que hará de label, en este caso dejamos ‘title’. En ‘Display Settings’ desmarcamos la opción de mostrar Author and Date information y en ‘Comment Settings’ indicamos que los comentarios están cerrados. Ahora pulsamos Save. Volvemos al menú de Content Types y, ahí aparece el campo que acabamos de crear.

Paso 3: Crear un tipo Gallery: Seguimos en Content Types, vamos a Manage Fields y creamos el tipo Gallery, indicamos que el “field” y el “widget” son de tipo Image.

Luego le damos a “edit” ahí aparecen algunas opciones para personalizar la imagen, pero lo más importante es poner en “Number of Values” un valor distinto de 1 ya que sino únicamente podremos poner una imagen en la galería. En concreto yo tengo el valor “unlimited”.

Paso 4: Enlazar el tipo Gallery para que sea manejado por yoxview: Vamos a la pestaña “Manage Display” y para Gallery indicamos que su formato YoxView y el de image Hidden. Después de guardar los cambios nos situamos encima de la fila Gallery y en la parte derecha de la pantalla aparece un engranaje, lo pulsamos ponemos el estilo de la imagen como “thumbnail”.

Ahora ya está todo preparado para poder poner una galería de imágenes. Vamos a Content à add Content à YoxGallery indicamos un título ponemos el body si queremos y añadimos las fotos que queramos del tipo Gallery. 

El problema es que la galería se muestra como una columna de imágenes. Esto es porque los divs que contienen cada una de las imágenes ocupan el 100% del ancho de la página y por lo tanto no caben. Con esto de momento no vamos a hacer nada ya que en breve, lo que haré será personalizar el tema para que muestre los colores, el logo, etc. de la empresa en cuestión así que nos preocuparemos de esto más adelante.

Para acabar quería decir que, dado que hemos añadido un nuevo contenido de tipo Gallery, tenemos que eliminar la Galería de imágenes creada cuando hicimos la estructura básica de la web.

Personalizar módulo de contacto

En este post vamos a explicar cómo personalizar mínimamente el formulario de contacto. La versión 7 de Drupal viene con un montón de módulos por defecto que podemos utilizar. Uno de ellos es el módulo Contact que activamos accediendo al menú Modules. 

Pulso sobre el enlace de Contact form a ver qué aparece. Este es el resultado:

Si pulsamos sobre Configure nos muestra la siguiente información:

• Add one or more categories on this page to set up your site-wide contact form.
• A Contact menu item (disabled by default) is added to the Navigation menu, which you can modify on the Menus administration page.
• If you would like additional text to appear on the site-wide contact page, use a block. You can create and edit blocks on the Blocks administration page.

Además de esto, en la capa de edición del módulo Contact muestra un listado de categorías (sólo hay una por defecto) que podemos editar y borrar. La categoría por defecto es Website feedback si pulsamos en edit podemos editar campos como: a quién se envía un mail con el formulario, podemos escribir un mail de auto-respuesta, el peso de la categoría y el campo selected que indica si la categoría está seleccionada por defecto o no.

Ahora vamos a probar a enviar el form de contacto, pero nos da fallo de envío por culpa del puerto 25 (es el que está por defecto). En concreto, dice:

•  Warning: mail() [function.mail]: Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in DefaultMailSystem->mail() (line 77 of C:\wamp\www\drupal-7.0\modules\system\system.mail.inc).
•  Unable to send e-mail. Contact the site administrator if the problem persists.
• Notice: Array to string conversion in DefaultMailSystem->format() (line 24 of C:\wamp\www\drupal-7.0\modules\system\system.mail.inc).
•  Warning: mail() [function.mail]: Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in DefaultMailSystem->mail() (line 77 of C:\wamp\www\drupal-7.0\modules\system\system.mail.inc).
•  Unable to send e-mail. Contact the site administrator if the problem persists.

Después de varios intentos, y visitas a foros aquí http://www.desarrolloweb.com/faq/336.php me dicen que pruebe a convertir localhost en un servidor de correo utilizando Post Cast Server. Lo descargo, instalo, ejecuto y configuro, y volvemos a probar. Ahora los mensajes que envío utilizando el formulario de contacto, aparecen en la bandeja de salida de Post Cast Server así que independientemente de que los envíe o no sabemos que funciona. Lo único que en el asunto aparece el nombre de la categoría Website feedback así que vamos a Structure -> Contact Form, edit y cambiamos el nombre de la categoría por lo que creamos conveniente.

Cómo queremos que cuando alguien envíe un mail, le envíen un mail de vuelta agradeciendo su interés, vamos a rellenar el campo auto-reply. Además, vamos a personalizarlo utilizando el nombre que la persona ha proporcionado en el campo Name. Cómo esto no he encontrado por internet cómo hacerlo a través de las interfaces de Drupal, vamos a trastear el código fuente para ver qué podemos hacer. Antes de todo, en el campo Auto-reply, empezamos con “Estimado __SENDER__,”. __SENDER__ es lo que vamos a sustituir desde el código del módulo Contact por el nombre que hayan indicado en el form. Vamos a “directorio_Drupal\modules\contact” y abrimos el fichero contact_forms.module. Buscamos la cadena autoreply y encontramos lo siguiente:

case 'page_autoreply':

      $message['subject'] .= t('[!category] !subject', $variables, array('langcode' => $language->language));

      $message['body'][] = $params['category']['reply'];

      break;

Para cambiar el __SENDER__ por el nombre en cuestión, utilizamos la función str_replace y cambiamos la línea:

$message['body'][] = $params['category']['reply']; 

por

$message['body'][] = str_replace ( '__SENDER__' , format_username($params['sender']) , $params['category']['reply']);

Con esto lo que le decimos es que en el body, busque la cadena ‘__SENDER__’ y la sustituya por el nombre de usuario definido en format_username($params['sender']).

Por otro lado, si añadimos una nueva categoría lo que hacemos es crear cómo una clasificación de formularios de contacto a través de categorías, por ejemplo uno para contactos de clientes, otro para dudas, etc. Dado que nosotros no necesitamos ningún formulario más no añadimos otra categoría.

Bien ya tenemos el formulario de contacto definido y funcionando como queremos. Ahora vamos a intentar que aparezca en la pestaña de contacto. En la estructura básica ya pusimos una página de contacto, es ahí dónde queremos que aparezca el formulario de contacto. Para conseguir esto hacemos lo siguiente. Vamos Stucture -> Menus, en Main Menu clickamos en list links y después en la fila de Página de Contacto, clickamos en edit.  Lo primero que hacemos es cambiar “Página de contacto” por algo un poco más amigable y que invite al usuario a ponerse en contacto con nosotros como “Contacte con nosotros” (vale muy original igual no es, pero de momento servirá) y rellenamos el contenido. En el path escribimos “contact” que es nombre del nodo de contacto designado por Drupal. Guardamos los cambios, vamos a la página de contacto y el resultado es correcto.

Aunque el resultado es correcto, no es lo que yo quería. Exactamente yo quiero que por un lado aparezca el formulario (eso ya está) pero que además aparezca la información de dónde está la empresa. Además, quiero que aparezca un aviso de que en ningún caso se va a almacenar ningún dato relativo al usuario. De nuevo esto no es posible desde el módulo en sí, así que volvemos a trastera el código de Drupal. La verdad es que no ha sido nada fácil hacer esto, respecto a lo que hemos ido haciendo hasta ahora, he visitado muchas webs y no todas han sido útiles pero entre todas me han dado la idea de qué hacer. Aquí os dejo los enlaces de algunas de ellas:

http://www.documentados.com/blog/oskar/incrustar-contenido-estatico-de-html-en-drupal-crear-un-nuevo-subtema-ix

http://thingsilearn.wordpress.com/2009/05/28/drupal-creating-custom-node-templates/

http://adaptivethemes.com/using-multiple-templates

http://api.drupal.org/api/drupal/developer--topics--forms_api_reference.html/6

Volvemos a la carpeta dónde está el módulo de contact y abrimos el fichero contact.pages.inc que es dónde se definen los campos que contiene el formulario (en la versión que yo tengo a partir de la línea 65, justo después de $form['#attributes']['class'][] = 'contact-form';. En Drupal el formulario es un array de campos que el núcleo de Drupal procesa y genera el html correspondiente. Así que añadimos un tipo de campo más:

  $form['info'] = array(

       '#type' => 'item',

       '#title' => t('¿Todavía tienes dudas? pues no dudes en visitar nuestras instalaciones situadas en XXXXXXXXXXXXXXXXXXXXX o si lo prefieres, ponte en contacto con nosotros a través de la web.'),

  );

Tened en cuenta que si ponéis código html dentro no hay ningún problema porque el navegador lo interpretará y por lo tanto podéis formatear el texto tanto cómo queráis. Finalmente, eliminamos la página de contacto que habíamos creado cuando hicimos la estructura básica ya que de momento no lo vamos a utilizar.

El último problema que tenemos que resolver es que el formulario de contacto sólo se muestra cuando estamos autenticados, para solucionar esto vamos a Home » Administration » People, en el tab Permissions y marcamos la opción de Anonymous user.

Cambiando el aspecto general de la web

El próximo objetivo es quitar el enlace My Account y Logout de la cabecera de la web y que aparezca en el footer. La idea es tener un enlace “Administración del sitio” que vaya al nodo de autenticación y, si estamos autenticados, en lugar de eso, aparezca My Account y que al lado se muestre Logout.

Para ello creamos un nuevo bloque: Structure -> Blocks, add new block. En block body creamos una tabla en html con dos celdas una con un enlace a My Account y otro a Logout. Para que esto funcione bien, hay que poner la opción del body Text Format a Full HTML. El código html de block body es el siguiente:

<table style="with:100%;border:0px;">

<tbody style="border:0px;">

<tr style="border:0px;">

<td style="border:0px;"><a href="?q=user">Mi cuenta</a></td>

<td style="border:0px;"><a href="?q=user/logout">Salir</a></td>

</tr>

</tbody>

</table>

Hay tantos border:0px; porque los estilos los coge del tema que estamos utilizando y esta es la forma de que no muestre ninguno de ellos.

En region settings, indicamos que este bloque debe aparecer en el footer. Finalmente, en Visibility Settings, Roles indicamosque lo muestre sólo para los usuarios autenticados. Finalmente, el bloque Administración del sitio que creamos en el post anterior, cambiamos las opciones de visibilidad para que sólo lo muestre para usuarios anónimos. Después de todo esto el resultado es el esperado. Sólo falta que los enlaces de Mi cuenta y Logout desaparezcan de la cabecera. Vamos a Home -> Administration -> Structure, User Menu, list links. Ahí aparecen ambos enlaces. Los deshabilitamos y listo.

Quitando bloques de la web

Bueno ahora ya tenemos la estructura básica. Sin embargo hay un par de cosas que no me gustan: El bloque de búsqueda de la parte de la izquierda que, siendo una página tan sencilla no tiene sentido, y el menú de navegación. Así que vamos a ver cómo eliminarlos.

Lo primero que hay que decir es que estos dos bloques sólo aparecen si estás autenticado. Pero en esta web (de momento) no vamos a tener autenticación de usuarios (exceptuando el administrador del sitio). Para eliminarlo, situamos el ratón encima del bloque y aparece un icono parecido a un engranaje. Pulsamos sobre Configure Block y nos aparece un conjunto de opciones. En Region Settings le decimos que no debe aparecer en ninguna región (None) y ya no aparece.

Para eliminar el menú navigation vamos a Structure -> Blocks e indicamos que Navigation no debe aparecer en ninguna región (None) con lo que ya tenemos lo que queríamos hemos eliminado los bloques Search y Navigation.

Siguiente paso, el menú de autenticación no quiero que aparezca en la página principal por el momento. Quiero que haya un enlace en el footer de la página de administración del sitio que al pulsarlo se cargue la página para poner el usuario y la contraseña. Además, no quiero que se ofrezca la posibilidad de que se registren nuevos usuarios.
Para quitar la opción de que se registren nuevos usuarios vamos a Home -> Administration -> Configuration -> People. En la parte de Registration and Cancellation seleccionamos la opción que dice que sólo el administrador puede registrar nuevos usuarios. Al comprobar el resultado ya no aparece la opción de crear un nuevo usuario.

A continuación, intentamos poner el enlace para el menú de autenticación en el footer. Para ello vamos a Home -> Administration ->Structure -> Blocks. Desactivamos el de powered by Drupal (este sale por defecto) y el de user login (le decimos que no lo muestre en ninguna región). Después, creamos un nuevo bloque de prueba (add new block). En el contenido ponemos un enlace a google para ver qué hace (no pongáis el title). En Region Settings indicamos que debe aparecer en Footer.

Ahora para hacer que enlace apunte a la autenticación de usuarios ponemos en su contenido:

<a href="?q=user">Administración del sitio</a>

(encontrado en http://drupal.org/node/123165). Guardamos los cambios y probamos el resultado. Cuando estamos autenticados el enlace apunta a nuestro perfil de usuario en la aplicación. Si no lo estamos, muestra la página para el login y el password. Objetivo conseguido :).

Creando el front page de la web

En este post voy a explicar cómo crear la página de bienvenida, el front page, de la web. Tal y como está ahora, en la pestaña Home dice que todavía no se ha creado el front page y justo abajo un enlace para añadir nuevo contenido. Sin embargo, si pulsamos para añadir nuevo contenido crea una nueva página independiente, no el contenido del front page. En la parte de la derecha tenemos un menú de Navegación con el que añadir nuevo contenido, pero el resultado es el mismo que antes. El problema es que este no es el front page exactamente. El front page se configura desde el menú Configuration -> Site information.

Desde aquí podemos configurar la url del front page y las páginas de errores que se mostrarán si no queremos las típicas de error 404 y 403.
Entonces, creamos una nueva página de tipo basic content, y volvemos al menú Site informationpara indicar que este es el front-page. Ahora cuando accedemos a nuestra página aparece por defecto la que hemos marcado como front page.

El nuevo problema que tenemos es que nos aparecen dos pestañas de Home exactamente iguales pero si vamos al menú Content no hay dos homes, sino sólo uno. Si lo eliminas, al recargar la página te da el error 404 page not found. Para solucionar esto simplemente crea de nuevo la página y desde el menú de configuración, indica que es el front page.

Para solucionar esto vamos al menú Structure -> Menus; y en Main Menu pulsamo list links. Ahí aparecen los tabs del menú y Home está dos veces. Eliminamos uno de ellos y guardamos los cambios. Volvemos a la página principal y el resultado es el esperado, volvemos a tener 4 tabs con el contenido correcto.

Creando la estructura de una web sencilla

Una vez instalado y puesto en marcha Drupal, podemos empezar a crear nuestra web por lo tanto hay que definir qué queremos que contenga nuestra web. En este caso, yo estoy haciendo una web para una autoescuela sobre la que, por circunstancias que no vienen al caso, tengo total libertad sobre forma, estructura y contenido. De momento, empezamos con la estructura que, en versión inicial, será la siguiente:

• Página de inicio: será la página principal, donde se explicará la historia de la empresa.
• Página de servicios: Explicación de los servicios que ofrece la empresa.
• Página de contacto: Aquí van los datos de contacto.
• Galería de imágenes: Dónde pondremos las fotos de las instalaciones y la flota de vehículos.

La estructura no es muy compleja y probablemente Drupal es un poco grande para esto, sin embargo se trata también de aprender a utilizar esta herramienta así que mejor empezar por algo, en principio al menos, sencillo.

Así pues comenzamos. Vamos a la web básica que hemos creado siguiendo el post anterior. A la derecha nos sale el panel “Navigation”, pulsamos en el enlace de “Add content” y aparece una capa sobre la que podemos seleccionar dos opciones: “Article” y “Basic Page”. El tipo “Article” es para crear contenidos cuya marca de tiempo sea importante como por ejemplo noticias o posts de blogs. Así que seleccionamos “Basic Page”. Aparece una nueva capa dónde hay que poner el título de la página que hemos creado y su contenido. Hay que tener en cuenta, que esto lo podemos hacer también desde el enlace "Add content" que aparece en lo que de momento es el front page y desde el menú "Structure->Add content".

Si bajamos el scroll de la capa en la que estamos trabajando, vemos que tenemos las siguientes opciones:

• Provide a menu link: Marcamos esta opción para que el contenido que estamos creando esté enlazado desde el menú.
• Menu link title: Por defecto, este campo es igual que el title de la página.
• Description: Ponemos una breve descripción del contenido.
• Parent item: Esto indica quién es el nodo padre, dentro de la estructura de la web, del contenido que acabamos de crear. En este caso, cómo sólo tenemos un nivel en principio lo dejamos en Main Menu.
• Weight: Esto no entiendo muy bien que es. La descripción que pone es la siguiente: “Menu links with smaller weights are displayed before links with larger weights”. Weight es peso o importancia. Así que supongo que es una forma de definir el orden de aparición. Para probarlo, cómo este es el cuarto enlace le voy a dar weight 3.

Guardamos los cambios y nos redirecciona a la página que acabamos de crear. Volvemos a la página principal y creamos el resto de secciones. La página de inicio (o front page) de momento no hace falta crearla ya que la crea por defecto. Los pesos que se han asignado son: 0 para el home, 1 para la galería de imágenes, 2 para servicios y 3 para contacto. Para probar lo que hemos supuesto sobre el weight cambiamos su peso a 19 y efectivamente pasa a estar en la última posición.

Los contenidos que hemos ido creando los podemos gestionar pulsando la opción "Content" de menú de la parte superior de la página. Si pulsamos "Content", nos aparece un panel sobre el que gestionar los contenidos que hemos ido creando.

Aquí tenéis el resultado: