Jerome Jourquin presents how he adapted the main Vanderbilt University website template for use as a drupal theme on the Center for Cancer Systems Biology website - Oct. 28, 2010

1. What is bioinformatics?
Adapting the VU template to
Drupal: the CCSB@V.
Jerome Jourquin, PhD MS
Quaranta Lab
Center for Cancer Systems Biology at Vanderbilt
Department of Cancer Biology
jerome.jourquin@vanderbilt.edu

2. What is bioinformatics?Why Drupal?
2
10/28/2010
2006
2007
2008
2009
2010
http://vicbc.vanderbilt.edu/ccsb
“Collaborative
website”
Center for Cancer
Systems Biology at
Vanderbilt (CCSB@V)
Vanderbilt Integrative Cancer
Biology Center (VICBC)
Quaranta Lab
iTumor
Protein
Expression
User’s Club

3. What is bioinformatics?The task at hands
3
10/28/2010
http://www.vanderbilt.edu/publicaffairs/webcomm/2010/05/vanderbilt-brand-bar/
http://www.vanderbilt.edu/publicaffairs/webcomm/2010/05/simple-template-files-released/

4. What is bioinformatics?Drupal theme engine
4
10/28/2010
http://drupal.org/node/171194

5. What is bioinformatics?
5
10/28/2010

6. What is bioinformatics?
6
10/28/2010

7. What is bioinformatics?
name = CCSB Theme
description = Based on 960.gs, this theme was developed for the Center for Cancer Systems Biology at Vanderbilt
University.
screenshot = screenshot.png
core = 6.x
base theme = ninesixty
stylesheets[all][] = ccsb_theme.css
stylesheets[all][] = featuredcontentglider.css
regions[firstlinks] = First Links
regions[secondlinks] = Second Links
regions[footer] = Footer
regions[left] = Left
regions[right] = Right
regions[content] = Content
regions[account] = Account
regions[links] = Links
regions[pictures] = Pictures
regions[over_text] = Over-Text
regions[develp] = Development
regions[calendar] = Mini Calendar
regions[frontpagelinks] = Frontpage Links
regions[frontcontact] = Frontpage Contact
ccsb_theme.info
7
10/28/2010

8. What is bioinformatics?
8
10/28/2010

9. What is bioinformatics?
9
10/28/2010
menu
calendar
views
menu
site title, slogan, account
page
cck

10. What is bioinformatics?Rendering the front page slideshow
10
10/28/2010
CCK
ImageField
ImageCache
ImageAPI

11. What is bioinformatics?Rendering the front page slideshow
11
10/28/2010
• CCK
• ImageField
• ImageCache
• ImageAPI
<div id="secslides" style="margin-top: -40px;"><div class="vslides"></
<script type="text/javascript" language="javascript">
/* <![CDATA[ */
$('.vslides').wwfvslides([
<?php
$slides = '';
foreach ($images as $key=>$value) { $slides .= "{
'backgroundImage': '".$images[$key]."',
'headline': '".$headlines[$key]."',
'thumbnail': '".$thumbnails[$key]."',
'href': '".$links[$key]."' },"; }
print $slides;
?>
])
/* ]]> */
</script>
</div><!-- /secslides -->
// dimension images: main 650*311, thumbnail: 76*57
$nodes = array();
$result = db_query("SELECT nid FROM {node} WHERE type = '%s'", 'frontpage_image');
while($row = db_fetch_object($result)) { $nodes[] = node_load($row->nid); }
$images = array(); $headlines = array(); $thumbnails = array(); $links = array();
foreach ($nodes as $object) {
$imagepath = $object->field_fpi_image[0]['filepath'];
$image = 'files/ccsb/'.$object->field_fpi_image[0]['filename'].'-image.jpg';
$thumbnail = 'files/ccsb/'.$object->field_fpi_image[0]['filename'].'-thumbnail.jpg';
$imageapi = imageapi_image_open($imagepath);
imageapi_image_scale_and_crop($imageapi, '650', '311');
imageapi_image_close($imageapi, $image);
$width = '0'; $height = '0';
$imageapi = imageapi_image_open($imagepath);
$width = $imageapi->info['width'];
$height = $imageapi->info['height'] * 650 / $imageapi->info['width'];
imageapi_image_scale($imageapi, '650');
imageapi_image_crop($imageapi, '250', ($height/2), '76', '57');
imageapi_image_close($imageapi, $thumbnail);
$images[] = $image; $thumbnails[] = $thumbnail;

12. What is bioinformatics?Drupal theme engine
12
10/28/2010
page-front.tpl.php
page.tpl.php

13. What is bioinformatics?
13
10/28/2010
http://pratul.in/drupal-makes-me-hapi