Drupal

Agregación de Ficheros CSS / JS en nuestros módulos y temas de Drupal 7

En Drupal 7 disponemos de varias maneras de añadir archivos CSS / JS cuando estamos desarrollando nuestro propio módulo / tema. Analicemos esto.

Drauta agencia digitalDrauta

Agregación de Ficheros CSS / JS en nuestros módulos y temas de Drupal 7

¿Cómo añadir archivos CSS/JS en nuestro propio módulo o tema Drupal?

  • Declarar los archivos en el archivo ".info" del tema / módulo: tiene el inconveniente de que estos archivos se agregarán a todas las páginas de Drupal. Por tanto, sólo tenemos que utilizar este método si realmente es necesario que los archivos estén presentes en todas las páginas de la web.
  • Funciones drupal_add_js / drupal_add_css: Permiten agregar archivos y también da la opción de agregar código "en línea". Debemos tener cuidado con esta opción porque depende de donde hacemos las llamadas podríamos estar agregando los archivos en todas las páginas de Drupal (como en el caso anterior).
  • Propiedad #attached: Permite agregar archivos a formularios y bloques de forma que sólo se agregan para el formulario o blog donde la estamos declarando. Es recomendable utilizar este método siempre que sea posible.
  • Módulo Libraries: Se declaran las librerías con el hook_library y después se agregan con la función drupal_add_library o libraries_load. Este método es ideal para agregar librerías de terceros dado que permitiría a otros módulos usar la misma librería de forma fácil.

A continuación, mostramos un módulo que agrega archivos CSS / JS a un bloque y un formulario con la propiedad #attached:

<?php

/**
 * Implements hook_block_info().
 */
function drauta_block_info() {
  $blocks = array();
  $blocks['drauta_block'] = array(
    'info' => t('Drauta block'),
  );
  $blocks['drauta_form'] = array(
    'info' => t('Drauta form'),
  );
  return $blocks;
}

/**
 * Implements hook_block_view().
 */
function drauta_block_view($delta = '') {
  $block = array();

  switch ($delta) {
    case 'drauta_block':
      $block['content']['#markup'] = '<h1 class="drauta">Drauta Team</h1>';
      $block['content']['#attached'] = drauta_get_attached();
      break;

    case 'drauta_form':
      $block['content'] = drupal_get_form('drauta_contact_form');
      break;
  }

  return $block;
}

/**
 * Drauta contact form.
 */
function drauta_contact_form($form, &$form_state) {

  $form = array();
  $form['bcn_cis_title'] = array(
    '#markup' => '<h1 class="drauta">' . t('Example form') . '</h1>',
  );
  $form['#attached'] = drauta_get_attached();

  return $form;
}

/**
 * Attach JS and CSS files.
 */
function drauta_get_attached() {
  $result = array();
  $cur_path = drupal_get_path('module', 'drauta');

  $result['js']['drauta'] = $cur_path . '/includes/drauta.js';
  $result['css']['drauta'] = $cur_path . '/includes/drauta.css';

  return $result;
}

Ejemplo de uso de la propiedad #attached con un bloque y un formulario.

Finalmente, queremos recordar que en los archivos JS debemos utilizar las "behaviors" de Drupal en vez de la función .ready() de jQuery siempre que nos sea posible. De este modo, nos aseguramos de que nuestro código se ejecuta siempre que Drupal hace alguna petición AJAX (paginación de vistas, etc). Veamos un ejemplo:

/**
 * @file
 * drauta.js javascript file.
 * El nombre de la behaviour es "drauta" porque es el nombre del módulo
 */

(function ($) {
  Drupal.behaviors.drauta = {
    attach: function (context, settings) {
      console.log('javascript included');      
    }
  };
})(jQuery);

Ejemplo de behaviour para el módulo "Drauta".

¿Quieres empezar un nuevo proyecto con nosotros?

¿Necesitas servicios para tu web? Descubre como te podemos ayudar y no dudes en contactar con nosotros.