Drupal Views and ImageCache

  • 3,141 views
Uploaded 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. …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,141
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
21
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • - How many are familiar with “Views”? - How many of you would consider yourselves “advanced” or “Views Experts”? - What have you used views for? - How about ImageCache - how many have used it? - A basic overview of the views system also how to theme a view and the elements within the view - A quick look at ImageCache and the magic that it produces
  • - I got into web development in 1999 - straight out of college. I started the “web unit” at an advertising agency. - After 5 years, I left the agency, and started working free-lance doing more web development. I have done it all -
  • - You can query things like, users, comments, or nodes (any content type) - It’s a GUI interface that creates an SQL query in the background
  • This is ideal for clients or users who are not familiar with products like photoshop and like to upload giant terrible images.
  • - It’s the latest basic Drupal 6 installation - also threw in an existing theme (Singular based on tao). - The new content type holds the information for our photos that we’ll upload... well simply add the ability to upload an image and put in a caption. - we will create multiple imageCache presets - each preset will allow us to do different things with the images that we upload.
  • - These are a few of the other modules that I have installed in order to get everything running properly

Transcript

  • 1. Views & ImageCache
    • Making your website do cool stuff.
    • Trevor Flexhaug
    • Drupal Camp Alberta 2010
  • 2. Who am I?
    • By Day: Drupal Themer/Developer for the University of Lethbridge.
    • By Night: Drupal Themer/Developer for the Redwall.
    • = I have no life.
  • 3. However, I do like... Photo Courtesy of www.tanyaplonka.com
  • 4. “Views”
    • a contributed module in Drupal 6
    • friendly interface allowing developers to query the content of their site
    • output query results as pages or blocks
    • “themeable”
  • 5. “ImageCache”
    • also a contributed module
    • server-side custom manipulation of images “on-the-fly”
    • resize, crop, overlay, underlay, greyscale, sharpen, rotate, rounded corners, etc.
    • ...well, sometimes clients just don’t get it.
  • 6. What are we going to do? Create a themed image gallery for my AWESOME collection of EXTREME POGO photographs.
  • 7. How are we going to do it?
    • Basic Drupal Install
    • New content type (CCK)
    • Create View
    • Create ImageCache preset(s)
    • Theme View
    • Add Taxonomy
  • 8. Some other stuff
    • Filefield
    • Imagefield
    • Image API
    • LightBox 2
  • 9. Let’s do this! Demo time
  • 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. Views Basic Settings
  • 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. Breaking it down Display Style Row Fields Views Theming Hierarchy
  • 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. 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. 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. 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. Display Style Row Fields
  • 19.  
  • 20. Photo Courtesy of http://wmltech.wordpress.com
  • 21. Thanks
    • [email_address]
    • [email_address]
    • @flexman