Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal Views and ImageCache

3,745 views

Published on

The Views module is currently one of the most powerful and widely used modules outside of Drupal Core. It's a "must have" module for any Drupal developer.

Simply put, the Views module provides a friendly interface allowing developers to query the content of their site, and return themeable results. Allowing developers to display things like news/events listings, lists of users, image galleries, etc. ... the possibilities are endless.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Drupal Views and ImageCache

  1. 1. Views & ImageCache <ul><li>Making your website do cool stuff. </li></ul><ul><li>Trevor Flexhaug </li></ul><ul><li>Drupal Camp Alberta 2010 </li></ul>
  2. 2. Who am I? <ul><li>By Day: Drupal Themer/Developer for the University of Lethbridge. </li></ul><ul><li>By Night: Drupal Themer/Developer for the Redwall. </li></ul><ul><li>= I have no life. </li></ul>
  3. 3. However, I do like... Photo Courtesy of www.tanyaplonka.com
  4. 4. “Views” <ul><li>a contributed module in Drupal 6 </li></ul><ul><li>friendly interface allowing developers to query the content of their site </li></ul><ul><li>output query results as pages or blocks </li></ul><ul><li>“themeable” </li></ul>
  5. 5. “ImageCache” <ul><li>also a contributed module </li></ul><ul><li>server-side custom manipulation of images “on-the-fly” </li></ul><ul><li>resize, crop, overlay, underlay, greyscale, sharpen, rotate, rounded corners, etc. </li></ul><ul><li>...well, sometimes clients just don’t get it. </li></ul>
  6. 6. What are we going to do? Create a themed image gallery for my AWESOME collection of EXTREME POGO photographs.
  7. 7. How are we going to do it? <ul><li>Basic Drupal Install </li></ul><ul><li>New content type (CCK) </li></ul><ul><li>Create View </li></ul><ul><li>Create ImageCache preset(s) </li></ul><ul><li>Theme View </li></ul><ul><li>Add Taxonomy </li></ul>
  8. 8. Some other stuff <ul><li>Filefield </li></ul><ul><li>Imagefield </li></ul><ul><li>Image API </li></ul><ul><li>LightBox 2 </li></ul>
  9. 9. Let’s do this! Demo time
  10. 10. Views Defaults Filter results to published nodes only and Gallery Image content type Sort our results by the most recent uploaded photos Define which fields from our content we’d like to display Create an Argument that will allow us to display the photos of specific users
  11. 11. Views Basic Settings
  12. 12. Query Builder? SELECT node.nid AS nid, node_data_field_upload_photo.field_upload_photo_fid AS node_data_field_upload_photo_field_upload_photo_fid, node_data_field_upload_photo.field_upload_photo_list AS node_data_field_upload_photo_field_upload_photo_list, node_data_field_upload_photo.field_upload_photo_data AS node_data_field_upload_photo_field_upload_photo_data, node.type AS node_type, node.vid AS node_vid, node.title AS node_title, users.name AS users_name, node.created AS node_created FROM node node LEFT JOIN content_type_pogo_image node_data_field_upload_photo ON node.vid = node_data_field_upload_photo.vid INNER JOIN users users ON node.uid = users.uid WHERE (node.type in ('pogo_image')) AND (node.status <> 0) ORDER BY node_created DESC Our Selected Fields Our Arguments Our Filters Our Sort Criteria
  13. 13. Breaking it down Display Style Row Fields Views Theming Hierarchy
  14. 14. The Code <div class=&quot;view view-photo-gallery view-id-photo_gallery view-display-id-page_1 view-dom-id-1&quot;> <div class=&quot;view-content&quot;> </div></div> “ Display” “ Style” “ Row” “ Fields”
  15. 15. The Code <div class=&quot;view view-photo-gallery view-id-photo_gallery view-display-id-page_1 view-dom-id-1&quot;> <div class=&quot;view-content&quot;> <div class=&quot;views-row views-row-1 views-row-odd views-row-first&quot;> </div> </div></div> “ Display” “ Style” “ Row” “ Fields”
  16. 16. The Code <div class=&quot;view view-photo-gallery view-id-photo_gallery view-display-id-page_1 view-dom-id-1&quot;> <div class=&quot;view-content&quot;> <div class=&quot;views-row views-row-1 views-row-odd views-row-first&quot;> <div class=&quot;views-field-field-upload-photo-fid&quot;> </div> </div> </div></div> “ Display” “ Style” “ Row” “ Fields”
  17. 17. The Code <div class=&quot;view view-photo-gallery view-id-photo_gallery view-display-id-page_1 view-dom-id-1&quot;> <div class=&quot;view-content&quot;> <div class=&quot;views-row views-row-1 views-row-odd views-row-first&quot;> <div class=&quot;views-field-field-upload-photo-fid&quot;> <p>Your View Content Here...</p> </div> </div> </div></div> “ Display” “ Style” “ Row” “ Fields”
  18. 18. Display Style Row Fields
  19. 20. Photo Courtesy of http://wmltech.wordpress.com
  20. 21. Thanks <ul><li>[email_address] </li></ul><ul><li>[email_address] </li></ul><ul><li>@flexman </li></ul>

×