Code executeren in een block

Uit DeVliegendeWiki

Het is goed denkbaar dat je situaties tegenkomt waarin je een dynamisch object op een pagina wilt plaatsen, bijvoorbeeld in een custom block. Voorbeelden van dynamische objecten:

• De roulerende aankondigingen op tweakers.net
• Een menu waarbij animatie plaatsvindt bij MouseOver

Indien zulke dynamische objecten met JavaScript en CSS geimplementeerd worden, is de vraag hoe je dat in Drupal kunt integreren.

Meest eenvoudige oplossing: Plaats de libraries in een directory onder modules (want dat is de enige locatie voor custom-code zonder een conflict te krijgen met standaard-Drupal-code), en copieer alle html-code vrijwel letterlijk maar met aangepaste absolute paden naar block body van het betreffende block. Voorbeeld:

 <link type="text/css" rel="stylesheet" href="http://www.dvb.nl/prm/sites/default/modules/vierluik/imagemenu.css"/>
 <script type="text/javascript" src="http://www.dvb.nl/prm/sites/default/modules/vierluik/mootools-1.2-core.js"></script>
 <script type="text/javascript" src="http://www.dvb.nl/prm/sites/default/modules/vierluik/mootools-1.2-more.js"></script>
 <script type="text/javascript" src="http://www.dvb.nl/prm/sites/default/modules/vierluik/prm.js"></script>
 <script type="text/javascript" src="http://www.dvb.nl/prm/sites/default/modules/vierluik/imageMenu.js"></script>
 
 <div id="imageMenu">
  <ul>
   <li class="image1">Mogelijkheid 1</li>
   <li class="image2">Mogelijkheid 2</li>
   <li class="image3">Mogelijkheid 3</li>
   <li class="image4">Mogelijkheid 4</li>
  </ul>
 </div>

De eerste verbetering zou zijn om geen absolute paden te gebruiken, maar dynamische paden: Dan kun je de site migreren zonder handmatig paden te hoeven aanpassen. Hiervoor heb je de php-functie base_path(). Deze functie kun je makkelijk testen door in een block de volgende code toe te voegen:

 <?php
  print base_path();
 ?>

Een resultaat kan zijn:

/project/

waarbij project de naam van de directory is waarin de Drupal-installatie staat. Hierdoor wordt de volledige code:

 <?php
  $pad=base_path()."sites/default/modules/vierluik";
  $pad1=$pad."/imagemenu.css";
  $pad2=$pad."/mootools-1.2-core.js";
  $pad3=$pad."/mootools-1.2-more.js";
  $pad4=$pad."/prm.js";
  $pad5=$pad."/imageMenu.js";
 ?>
 
 <link type="text/css" rel="stylesheet" href="<?php print $pad1; ?>" />
 <script type="text/javascript" src="<?php print $pad2; ?>"></script>
 <script type="text/javascript" src="<?php print $pad3; ?>"></script>
 <script type="text/javascript" src="<?php print $pad4; ?>"></script>
 <script type="text/javascript" src="<?php print $pad5; ?>"></script>
 
 <div id="imageMenu">
  <ul>
   <li class="image1">Mogelijkheid 1</li>
   <li class="image2">Mogelijkheid 2</li>
   <li class="image3">Mogelijkheid 3</li>
   <li class="image4">Mogelijkheid 4</li> 	
  </ul>
 </div>			

Bij nader inzien is er waarschijnlijk een betere locatie voor deze afbeeldingen dan onder modules, namelijk in de directory files!

Er schijnen nog betere methodes te bestaan:

• Gebruik van een node preprocess function
• hook_nodeapi
• Functies drupal_add_css en drupal_add_js
• Gebruik een custom theme voor dit block, en roep vandaar de betreffende JavaScript- en CSS-code aan

Bronnen:

• http://stackoverflow.com/questions/61735/include-css-or-javascript-file-for-specific-node-in-drupal-6