things! preprocess all the2018.drupalcorn.org/sites/default/files/preprocess all the...
TRANSCRIPT
![Page 1: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/1.jpg)
Preprocess All The Things!
Chris Wright@redbrickoneWorks for: CodeKoalas
Slides and info attaco.ist
![Page 2: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/2.jpg)
Preprocess Functions
- What they do- How to use them- Helpful tools and tips to make your life easier
![Page 3: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/3.jpg)
Privacy Policy
![Page 4: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/4.jpg)
What are preprocess functions?
- Set up variables to be placed in a template- Change how content is rendered- Change what information is served up to the page- Add custom logic before it hits the page
![Page 5: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/5.jpg)
Turn on Debugging
In /sites/default/services.yml, modify under Twig: debug:false to be debug:true
![Page 6: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/6.jpg)
Turn on Debugging
This will now show templating suggestions and theme_hooks in comments throughout the html of your site
Useful Links:https://www.drupal.org/docs/8/theming/twig/locating-template-files-with-debugginghttps://www.drupal.org/docs/8/theming/twig/discovering-and-inspecting-variables-in-twig-templates
![Page 7: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/7.jpg)
Theme Debug
![Page 8: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/8.jpg)
Theme Debug
![Page 9: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/9.jpg)
Theme Debug
![Page 10: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/10.jpg)
Template.php?
D8: themename.theme file rather than a template.php file as in D7
Try to keep logic in .theme file and out of your templates
![Page 11: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/11.jpg)
Preprocess Function format
function themename_preprocess_HOOK(&$variables) {}
HOOK is the element you wish to preprocess
Preprocess basic things like nodes, pages, etc or get more in depth and preprocess fields, exposed filters or even forms
Use debugging to find the specific theme_hook to use
![Page 12: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/12.jpg)
Preprocess radio button exposed filter
Find the theme_hook - bef_radios
function themename_preprocess_bef_radios(&$variables) {}
![Page 13: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/13.jpg)
Viewing Variables
- Devel Module- kint()- ksm() (similar to dpm)
- Xdebug
![Page 14: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/14.jpg)
Devel module functions
- kint($variables);- ksm($variables);- Clear the cache- Navigate to the page- Profit
![Page 15: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/15.jpg)
KintKsm
![Page 16: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/16.jpg)
KintKsm
![Page 17: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/17.jpg)
Xdebug
- Add a breakpoint inside your function- Clear cache- Run Xdebug- Navigate to the page- Profit
![Page 18: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/18.jpg)
Setting up Xdebug? Not that crazy
https://joshfabean.com/blog/xdebug/
![Page 19: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/19.jpg)
Add Classes to element or wrapper
Add or modify classes inside $variables[‘classes_array”]
![Page 20: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/20.jpg)
Add Classes to element or wrapper
![Page 21: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/21.jpg)
Add exposed filter titles to wrapper classes
![Page 22: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/22.jpg)
Preprocess a Field
![Page 23: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/23.jpg)
Add Javascript to a Block
![Page 24: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/24.jpg)
Renderable Arrays
- Creating them- Calling / using them in the twig template- Why you would use them
Useful Links:https://www.drupal.org/docs/8/api/render-api/render-arrayshttps://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/group/theme_render/8.2.x
![Page 25: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/25.jpg)
Renderable Array
![Page 26: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/26.jpg)
Renderable Array
![Page 27: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/27.jpg)
![Page 28: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/28.jpg)
Renderable Array - Twig
![Page 29: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/29.jpg)
Theming Template Suggestions
- Allows you to add a specific template naming suggestion format - Can be used globally or for specific use cases- hook_theme_suggestions_HOOK_alter
Useful Links:https://www.drupal.org/docs/8/theming/twig/working-with-twig-templateshttps://www.drupal.org/docs/8/theming/twig/twig-template-naming-conventionshttps://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme_suggestions_alter/8
![Page 30: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/30.jpg)
![Page 31: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/31.jpg)
Theming Template Suggestions
![Page 32: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/32.jpg)
Twig
- Variables will be called by their associative key “$variables[‘footer’]” will be called “footer” in twig
- If thrown inside content - $variables[‘content’][‘footer’], you will use dot notation i.e. content.footer
- Can use if checks in twig {% if content.footer %}, etc
![Page 33: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/33.jpg)
Modifying Forms
- Add a link to a form- Be careful not to leave new form items vulnerable to XSS attack
![Page 34: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/34.jpg)
![Page 35: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/35.jpg)
Modifying Forms
![Page 36: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/36.jpg)
Preprocess All The Things!
- What they do- How to use them- Helpful tools and tips to make your life easier
![Page 37: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/37.jpg)
Tacos?
- Taco Joint
- Torchys
- Papasito’s
![Page 38: Things! Preprocess All The2018.drupalcorn.org/sites/default/files/Preprocess All The Things_0.pdf · Preprocess All The Things! Chris Wright @redbrickone Works for: CodeKoalas Slides](https://reader033.vdocument.in/reader033/viewer/2022050407/5f9d1760bcd96b3c6c0623b5/html5/thumbnails/38.jpg)