Theming IslandoraMorgan Dawe (discoverygarden)

Rosie Le Faive (UPEI)

https://goo.gl/sj1ogf

In This Workshop

Creating a custom theme● Extend, don’t hack● Override templates● Invoke module hooks● Configure theme settings● hook_theme_suggestions● theme_preprocess functions

In This Workshop (if time!)

Creating an Islandora Solr View ● Islandora solr views● Integrating with Drupal contrib modules

Drupal Themes

https://www.drupal.org/project/project_theme

Theme vs Theme Layer

Drupal Theme● Administered under “Appearance.”● in the sites/all/themes folder.Theme Layer● Themes defined in hook_theme().● Involve calls to the drupal theme() function.● In module code (sites/all/modules).

Extend, Don’t Hack.

$ cd /var/www/drupal/htdocs/sites/all/themes/

$ git clone https://github.com/MorganDawe/islandora_camp.git

● Islandora Camp extends ‘Bartik’ theme● Supports Color module integration

Don’t edit themes directly. Extend them.

Extending a theme● Create theme directory sites/all/themes/islandora_camp● Create .info file

○ copy the .info file from intended base theme as islandora_camp.info○ Add base theme = bartik to islandora_camp.info to extend Bartik○ remove CSS/JS entries in .info (these are inherited from base theme)○ leave region definitions in .info (these are NOT inherited)

● add logo.png, screenshot.png to theme directory● Create template.php file for preprocessing functions● May vary per theme (e.g.: Zen STARTERKIT)

Companion Module$ cd /var/www/drupal/htdocs/sites/all/modules/

$ git clone \

https://github.com/MorganDawe/islandora_camp_sample.git

$ drush en -y islandora_camp_sample -u 1

● Provides sample objects● Demonstrates hook_islandora_required_objects()● Use as theme companion module

Contrib modules you may also wantDevel: https://www.drupal.org/project/devel

Print out template variables easily

Views: https://www.drupal.org/project/views

Very useful

(Optional) jQuery-Update: https://www.drupal.org/project/jquery_update

(Optional) Variable: https://www.drupal.org/project/variable

(Optional) Owl-Carousel: https://www.drupal.org/project/owlcarousel

Library: http://owlgraphic.com/owlcarousel/

Let’s change how collections look

Want to show collection metadata?

1. Get metadata in islandora_camp/template.php:● Add new content to $variables within the preprocess function, e.g.

islandora_camp_preprocess_islandora_basic_collection_wrapper()

○ Use module_load_include() to load required files (e.g. islandora/metadata.inc)○ Retrieve metadata using islandora_retrieve_metadata_markup($islandora_object)

● Include required drupal javascript:○ misc/form.js○ misc/collapse.js

● $variables[‘collection_metadata’] is passed to the collection wrapper template

2. Override the template file to print metadata.

Sample 1: Override a template

Any templatename.tpl.php in your theme’s templates/ folder will override the default(module’s) template.

$ cd islandora_camp/templates$ mv SAMPLE1-islandora-basic-collection-wrapper.tpl.php \islandora-basic-collection-wrapper.tpl.php

About overriding templates

Both Drupal modules (<DRUPAL_ROOT>/modules) and Islandora modules (<DRUPAL_ROOT>/sites/all/modules) contain templates that you may find useful to override.

Template files shouldn’t include decision logic or function calls. Put that in the preprocess function in template.php.

Override module CSS

● Add your CSS files in islandora_camp/css● Load CSS using theme’s .info file

or by using hook_css_alter(). e.g. in islandora_camp.info:stylesheets[all][] = css/islandora_basic_image.theme.css

Override module JS● Use hook_js_alter()

Theme Settings: Creating Variables● Add theme-settings.php to your theme

directory● Implement

hook_form_system_theme_settings_form_alter()

to define a settings form (see Form API). ● Use theme_get_setting(‘my_setting’) as

the #default_value.● e.g. islandora_camp/theme-settings.php

Theme Patterns

If you want this to only apply to one individual object, add --PID to the template name.

$ cd islandora_camp/templates$ mv SAMPLE2-islandora-basic-collection--islandora-sp-basic-\image-collection.tpl.php islandora-basic-collection--\islandora-sp-basic-image-collection.tpl.php

Theme Hook Suggestions

If a theme (such as islandora_basic_collection_wrapper) does not define theme hook suggestions, you can add them in the preprocess function.● see islandora_camp/template.php

Theme Hook Suggestions (cont..)

● Useful for block level templatesblock--module--delta.tpl.phpblock--module.tpl.phpblock--region.tpl.php

$ cd islandora_camp/templates$ mv SAMPLE3-block--islandora_solr--simple.tpl.php \block--islandora_solr--simple.tpl.php

Want to change the content?

- let’s include the simple search block. Or any other block.

- use the block API in the template.php (or companion module)

- edit the tpl.php file to use this new content, or hook_form_alter()

Configuring theme settings

Want to apply this to some but not all pids? want to control this in the UI?

Theme settings!!- Review {theme}_form_system_theme_settings_alter() implementation in theme-settings.php

Summary

● Override template files by putting theme-name.tpl.php in the theme folder.

● Naming conventions mean you can usually use patterns

● Do pre-processing in the template.php file● Theme Settings

Project : Carousel