![Theme Field in View Create a template file at ~/sites/all/theme/iwebkit directory. Make the file name as views-view-field-- [field-name] .tpl.php The template file overwrites the views-view-field.tpl.php (default template).](https://image.slidesharecdn.com/mobilelibraryondrupal-cil2011-110324103933-phpapp01/85/Mobile-library-on-drupal-cil2011-18-320.jpg)
Mobile library on drupal cil2011
- 1. Mobile Website on Drupal Computer in Library March 23, 2011 Shian Chang Georgetown University
- 2. Agenda History Approaches Mobile Services Drupal Future Plan
- 3. History The library website is built on Drupal 6 since 2009. Started to plan the mobile website on the same Drupal in 2010. The Mobile website was launched on January 2011.
- 4. Approaches Develop a mobile web (not iPhone nor Android app) Build on the same Drupal of the main library website Build a framework for easily adding mobile content Share the data with the main library website
- 5. Mobile Services Library Hours and Locations Library Catalog Ask Us Mobile resources
- 6. Drupal Drupal module and Theme Mobile Page Basic Mobile view Basic Other Mobile Pages
- 7. Drupal Module and Theme Install Mobile Tool module and iWebkit theme. Enable iWebkit theme and configure it. Configure Mobile Tool Configure <library-home>/mobile/* to be mobile pages Switch to iWebkit theme for all path of <library-home>/mobile/* Demo (Mobile Tool Configuration)
- 8. Mobile Page Basic iWebkit Framework Mobile Page Framework Mobile Page Content Mobile Page Path
- 9. iWebkit Framework <ul class=pageitem> <li class=“textbox”>…</li> <li class=“textbox”>…</li> <li class=“menu”>…</li> <li class=“store”>…</li> </ul> <li class="menu"> <a href="index.php"> <img alt="Description" src="thumbs/basics.png" /> <span class="name">Iphone iwebkit Example</span> <span class="arrow"></span> </a> </li> <li class="store"> <a href="index.php"> <span class="image" style="background-image: url('image.jpg')"></span> <span class="name">Iphone Song</span> <span class="comment">iWebKit Comment</span> <img alt="rating" class="stars" src="images/4stars.png" /> <span class="starcomment">13 Reviews<br> </span> <span class="arrow"></span> </a> </li>
- 10. Mobile Page Framework Add <ul class=“pageItem”> in page.tpl.php for iWebkit theme. <ul class="pageitem"> <?php if($content): ?> <?php print $content; ?> <?php endif; ?><!--End of content --> </ul>
- 11. Mobile Page Content Add <li class=“…”> as the content of Mobile Page
- 12. Mobile Page Path Assign the path of the page to be ~/mobile/…., then iWebkit theme applies to the page.
- 13. Mobile View Basic Create a view Customize Fields in the view Theme field in view as need View page path
- 14. Create a View
- 15. Customize Fields in View Because <ul class=“ pageItem ” > has been in page.tpl.php of iWebkit theme, Construct <li> at each field to be displayed Rewrite the output of this field Output this field as a link Link path – URL of the menu item Prefix text - <li …> Suffix text - </li>
- 16. <li class="menu2"> <a href="/mobile/service-point/Circulation%20Desk" title="More on Circulation Desk"> <img src="/sites/default/files/images/Circulation Desk-small.png" /> <span class="name">Circulation Desk</span> <span class="comment">8:30am - Midnight</span> <span class="arrow"></span> </a> </li>
- 17. Path of View Page Assign the path name with ~/mobile/…., then iWebkit theme applies to the page.
- 18. Theme Field in View Create a template file at ~/sites/all/theme/iwebkit directory. Make the file name as views-view-field-- [field-name] .tpl.php The template file overwrites the views-view-field.tpl.php (default template).
- 19. Example of Template File views-view-field-- field-phone-value .tpl.php <?php $phone_output = '<li class="menu"><a href="tel:'.$output.'"><img src="/sites/default/files/images/phone-small.png" /><span class="name">Call ‘; $phone_output = $phone_output.$output.'</span><span class="arrow"></span></a></li>'; print $phone_output; ?>
- 20. Theming Information in View Click on “Information” to see the theme template information
- 21. Theming Information in View Select iWebkit theme Click on “Change theme” to see all template files used by the view
- 22. Theming Information in View The template “views-view-field-- field-phone-value .tpl.php” overwrites “views-view-field.tpl.php” for the field_phone.
- 23. Other Mobile Pages Mobile Home page Library Catalog
- 24. Mobile Home Page Create a content type called Mobile Service icon image Link Create a view called mobile_services Configure display style as grid to display 4 columns for each row Create a theme file to adjust the spaces The new file has the name as view-view-grid- mobile-services .tpl.php. The new file overwrites views-view-grid.tpl.php (default).
- 25. Library Catalog Use Web service Develop PHP code to parse the XML and format the display Consortium Arquabrowser (Library Catalog Discovery Server) Georgetown University Website (Drupal) Submit a search request Response an XML with search result
- 26. Examples of Library Catalog
- 27. Future Plan Add more mobile services such as “My Account”. Add SMS capability and integrate with LibraryH3lp. Improve Library Catalog with access to other libraries in our consortium.
- 28. Question? Georgetown University Mobile site: http://library.georgetown.edu/mobile Georgetown University Website: http://library.georgetown.edu Drupal iWebkit: http://drupal.org/project/iwebkit Drupal Mobile Tool: http://drupal.org/project/mobile_tools Thank You ! Shian Chang (slc72@georgetown.edu)