Creating Imageslider with bootstrap and Views Module

Public

Hey ho everybody and thank you for viewing my code Snipp.

Requierments:
The full Bootstrap Project (JS and CSS).
http://getbootstrap.com/2.3.2/
Step 1 : Creating a Node

Fields:
Lable | Machine name | Field type
* Image | field_image | Image
* Body | body | Long text and summary
* Link | field_link | Text

Step 2 : Creating a View
Just import it with the code below.

Get raw version
php
  1. /*
  2.  * View import
  3.  */
  4.  
  5. $view = new view();
  6. $view->name = 'slider';
  7. $view->description = '';
  8. $view->tag = 'Bootstrap Content';
  9. $view->base_table = 'node';
  10. $view->human_name = 'Image Slider';
  11. $view->core = 7;
  12. $view->api_version = '3.0';
  13. $view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
  14.  
  15. /* Display: Master */
  16. $handler = $view->new_display('default', 'Master', 'default');
  17. $handler->display->display_options['title'] = 'Slider';
  18. $handler->display->display_options['use_more_always'] = FALSE;
  19. $handler->display->display_options['access']['type'] = 'perm';
  20. $handler->display->display_options['cache']['type'] = 'none';
  21. $handler->display->display_options['query']['type'] = 'views_query';
  22. $handler->display->display_options['exposed_form']['type'] = 'basic';
  23. $handler->display->display_options['pager']['type'] = 'some';
  24. $handler->display->display_options['pager']['options']['items_per_page'] = '5';
  25. $handler->display->display_options['style_plugin'] = 'default';
  26. $handler->display->display_options['style_options']['default_row_class'] = FALSE;
  27. $handler->display->display_options['style_options']['row_class_special'] = FALSE;
  28. $handler->display->display_options['row_plugin'] = 'fields';
  29. $handler->display->display_options['row_options']['default_field_elements'] = FALSE;
  30. /* Field: Field: Image */
  31. $handler->display->display_options['fields']['field_image']['id'] = 'field_image';
  32. $handler->display->display_options['fields']['field_image']['table'] = 'field_data_field_image';
  33. $handler->display->display_options['fields']['field_image']['field'] = 'field_image';
  34. $handler->display->display_options['fields']['field_image']['label'] = '';
  35. $handler->display->display_options['fields']['field_image']['element_label_colon'] = FALSE;
  36. $handler->display->display_options['fields']['field_image']['click_sort_column'] = 'fid';
  37. $handler->display->display_options['fields']['field_image']['settings'] = array(
  38. 'image_style' => 'slider_image',
  39. 'image_link' => '',
  40. );
  41. /* Field: Content: Body */
  42. $handler->display->display_options['fields']['body']['id'] = 'body';
  43. $handler->display->display_options['fields']['body']['table'] = 'field_data_body';
  44. $handler->display->display_options['fields']['body']['field'] = 'body';
  45. $handler->display->display_options['fields']['body']['label'] = '';
  46. $handler->display->display_options['fields']['body']['element_label_colon'] = FALSE;
  47. /* Field: Field: Link */
  48. $handler->display->display_options['fields']['field_link']['id'] = 'field_link';
  49. $handler->display->display_options['fields']['field_link']['table'] = 'field_data_field_link';
  50. $handler->display->display_options['fields']['field_link']['field'] = 'field_link';
  51. $handler->display->display_options['fields']['field_link']['label'] = '';
  52. $handler->display->display_options['fields']['field_link']['element_label_colon'] = FALSE;
  53. /* Sort criterion: Content: Post date */
  54. $handler->display->display_options['sorts']['created']['id'] = 'created';
  55. $handler->display->display_options['sorts']['created']['table'] = 'node';
  56. $handler->display->display_options['sorts']['created']['field'] = 'created';
  57. $handler->display->display_options['sorts']['created']['order'] = 'DESC';
  58. /* Filter criterion: Content: Published */
  59. $handler->display->display_options['filters']['status']['id'] = 'status';
  60. $handler->display->display_options['filters']['status']['table'] = 'node';
  61. $handler->display->display_options['filters']['status']['field'] = 'status';
  62. $handler->display->display_options['filters']['status']['value'] = 1;
  63. $handler->display->display_options['filters']['status']['group'] = 1;
  64. $handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
  65. /* Filter criterion: Content: Type */
  66. $handler->display->display_options['filters']['type']['id'] = 'type';
  67. $handler->display->display_options['filters']['type']['table'] = 'node';
  68. $handler->display->display_options['filters']['type']['field'] = 'type';
  69. $handler->display->display_options['filters']['type']['value'] = array(
  70. 'slider_content' => 'slider_content',
  71. );
  72.  
  73. /* Display: Bootstrap Slider */
  74. $handler = $view->new_display('block', 'Bootstrap Slider', 'bootstrap');
  75. $handler->display->display_options['defaults']['hide_admin_links'] = FALSE;
  76. $handler->display->display_options['block_description'] = 'Bootstrap Slider';

Now we create our tpl files.
Row :
views-view-fields--slider--bootstrap.tpl

Get raw version
php
  1. <?php print $fields['field_image']->content ?>
  2. <div class="carousel-caption">
  3. <?php print $fields['body']->content ?>
  4. </div>

Style :
views-view-unformatted--bootstrap.tpl

Get raw version
php
  1. <?php
  2. /**
  3.  * @file
  4.  * Default simple view template to display a list of rows.
  5.  *
  6.  * @ingroup views_templates
  7.  */
  8. ?>
  9. <?php if (!empty($title)): ?>
  10. <h3><?php print $title; ?></h3>
  11. <?php endif; ?>
  12.  
  13. <div id="bootstrap_slider" class="carousel slide">
  14. <div class="carousel-inner">
  15. <?php $first = TRUE; ?>
  16. <?php foreach ($rows as $id => $row): ?>
  17. <div class="item <?php if($first) print 'active'; $first = FALSE ?>">
  18. <?php print $row; ?>
  19. </div>
  20. <?php endforeach; ?>
  21. </div>
  22. <!-- Carousel nav -->
  23. <a class="carousel-control left" href="#bootstrap_slider" data-slide="prev">&lsaquo;</a>
  24. <a class="carousel-control right" href="#bootstrap_slider" data-slide="next">&rsaquo;</a>
  25. </div>
  26.  
  27.  

After that you add bootstrap_slider.js to your theme

Get raw version
javascript
  1. (function ($) {
  2. Drupal.behaviors.theme = {
  3. attach: function (context, settings) {
  4.  
  5. $(document).ready(function(){
  6.  
  7. $('#bootstrap_slider').carousel({
  8. interval: 5000,
  9. pause: 'hover'
  10. });
  11.  
  12. });
  13. }
  14. }
  15. })(jQuery);