Handy Craft Tips & Tricks

DotAll 2017
For more information, check out the Paper doc https://paper.dropbox.com/doc/Craft-Tips-Tricks-Y1carV2kW1IS9FKXlEzcS

Transcript

1. Handy Craft Tips & Tricks by Alex Van Holtz
2. This presentation is better viewed on Dropbox Paper You can copy & paste code much easier and I provide a 
 bunch of documentation URLs. https://paper.dropbox.com/doc/Craft-Tips-Tricks-Y1carV2kW1IS9FKXlEzcS
3. Some of my work using Craft
4. http://www.rideicon.com/ Icon Motosports
5. https://www.onxmaps.com/ onXmaps
6. https://www.weareparliament.com/shop/ Parliament Store
7. What are we going to talk about?
8. Handy Craft Tips & Tricks 1. Content builders 2. Custom Redactor formatting* 3. Add fields to images 4. Router page template 5. The best of Twig 6. Handy General settings 7. Add custom table attributes to element listings* 8. Add custom sources to element listings* 9. Move home out of a single and into a structure 10. Field organization
9. 1. Content builders
10. Content builders Each matrix block represents a single field. • [Matrix Field] Simple Content Builder • [Matrix Block] Heading • [Plaintext] Heading • [Matrix Block] Sub Heading • [Plaintext] Sub Heading • [Matrix Block] Body • [Richtext] Text • [Matrix Block] Button • [Plaintext] Button Text • [Plaintext] Button Link • [Asset Selector] Button Download Simple example
11. Simple content builder CP Content builders
12. Simple content builder example code Content builders
13. Content builders Each matrix block represents a group of fields. • [Matrix Field] Complex Content Builder [Matrix Block] Copy Block [Plaintext] Heading [Richtext] Body [Entry Selector] CTA [Asset Selector] Background Image [Entry Selector] Themes Complex example - Copy Block
14. includes/blocks/_copy-block.html Content builders
15. includes/blocks/_copy-block.html Content builders
16. Content builders Each matrix block represents a grouping of fields. • [Matrix Field] Complex Content Builder [Matrix Block] Image Copy Block [Richtext] Heading [Richtext] Body [Entry Selector] CTA [Asset Selector] Image [Dropdown] Image alignment [Option] Align Left [Option] Align Right [Entry Selector] Themes Complex example - Image Copy Block
17. Image Copy Block in the CP Content builders
18. includes/blocks/_image-copy-block.html Content builders
19. Themes Content builders
20. Content builders • Documentation structure • Faster development • Randomly creating blocks with all the themes & options with URL params • Custom field types for each content block Advanced ideas
21. 2. Custom Redactor formatting
22. Custom Redactor formatting • To add a new set of config options, add a new JSON file to the Redactor folder within config Create a new config
23. Custom Redactor formatting • Rich Text fields give a Redactor config selector • Check out the redactor docs to see everything you can do
 https://imperavi.com/ redactor/docs/settings/ buttons/ Standard & Simple options
24. Custom Redactor formatting • Removes everything but formatting options, bold and italic • Limits formatting options to paragraph, quote block and h4 tags Modify default formatting options
25. Custom Redactor formatting • Removes everything but formatting options and HTML view • Adds custom formatting options to wrap the selected text with a span that has a class of orange- text or green-text Add custom formatting options
26. Custom Redactor formatting • Create a simple plugin with just just the base plugin file and a resources directory with a css file • Include the css file in the init function if the request is a CP request and if a user is logged in Add CSS to reflect front-end styles
27. Custom Redactor formatting • You can use an inspector tool to see what the class is on the redactor dropdown item and text edit box, then target it in CSS • Updates to Redactor can break this functionality (sometimes they change class names), so keep an eye out Add CSS to reflect front-end styles
28. 3. Adding fields to image assets
29. Adding fields to image assets • Sometimes you want to use a completely different image for different contexts • Transforms won’t always make your designer happy • It saves you from adding extra fields on your entry that won’t necessarily be used Why do it?
30. Base Image w/ SVG overlay Adding fields to image assets
31. Listing Image Adding fields to image assets
32. Square Image Adding fields to image assets
33. Adding fields to image assets Some examples of fields to add
34. Adding fields to image assets You should always define a base image. I accomplish this by creating 3 image sources. • [Asset Source] Base Images (width x height) • [Plaintext] Alt • [Category] Category • [Asset] Video - uploads into Videos source • [Asset] Overlay SVG - uploads into Images source • [Asset] Square Image - uploads into Images source • [Asset] Listing Image - uploads into Images source • [Asset Source] Images (mixed sizes) • [Asset Source] Videos (width x height) Avoiding image inception
35. 4. Router page template
36. Router page template • Whenever creating a new section, I use the same router template • It’s easier to add, remove and consolidate page templates without modifying the CP • Can create more complex routes What does this mean?
37. Simple router code Router page template
38. Complicated router code Router page template
39. 5. The best of Twig
40. If statements in for loops The best of Twig
41. Default filter The best of Twig
42. Ignore missing The best of Twig
43. Dynamic object keys The best of Twig
44. Preventing white space The best of Twig
45. Handy filters part 1 The best of Twig
46. Handy filters part 2 Title Text
47. Filter a section of code Title Text
48. 6. Handy General settings
49. Handy General settings Open up the following file to take a look at Craft’s default settings and an explanation of what they do /craft/app/etc/config/default/general.php Default config settings
50. Handy General settings • This is, without a doubt, my favorite setting • Enabling fuzzy search will allow you to find images and entries in a search bar by only providing a partial match of the keyword Fuzzy Search
51. Handy General settings • By default, upon logging in, the user is directed to the dashboard • You can provide a different path to be redirected to upon login Post CP Login Redirect
52. Handy General settings • By default, Craft allows the user to manually update the CMS and some plugins • This option allows us to remove the ability to do so, saving us from click-happy clients • It does not remove the badge letting us know there are updates available Disable auto updates
53. Handy General settings • Prevents “Forgot Password” forms from revealing whether a valid email address was entered • If the email was invalid, a “Password reset email sent” message will be displayed Prevent user enumeration
54. Handy General settings • Whether the ‘X-Powered- By: Craft CMS’ header should be sent along with each request Powered by header
55. Handy General settings • The URI segment Craft should look for when determining if the current request should route to the CP rather than the front- end website Change login URI
56. 7. Add custom table attributes to element listings
57. Add extra meta data Add custom table attributes
58. Add custom table attributes We’re going to add a couple of methods to the plugin file we made earlier defineAdditionalEntryTableAttributes() getEntryTableAttributeHtml(EntryModel $entry, $attribute) How do we do this?
59. Define the table attributes Add custom table attributes
60. Define the table attributes to add Add custom table attributes
61. Enable it your new table attribute Add custom table attributes
62. Add links to URL attributes Add custom table attributes
63. Define the table attributes to modify Add custom table attributes
64. Add custom table attributes defineAdditionalEntryTableAttributes() getEntryTableAttributeHtml(EntryModel $entry, $attribute) defineAdditionalAssetTableAttributes() getAssetTableAttributeHtml(AssetFileModel $asset, $attribute) defineAdditionalCategoryTableAttributes() getAssetTableAttributeHtml(CategoryModel $cat, $attribute) defineAdditionalCategoryTableAttributes() getCategoryTableAttributeHtml(UserModel $user, $attribute) You can do this for entries, assets, users and categories
65. 8. Add custom sources to element listings
66. Sources for temporary images and different sizes Add custom sources
67. Add custom sources We’re going to add a method to the plugin file we made earlier 
 modifyAssetSources(&$sources, $context) How do we do this?
68. Modify the asset sources Add custom sources
69. Modify entry sources Add custom sources
70. Add custom sources modifyAssetSources(&$sources, $context) modifyEntrySources(&$sources, $context) modifyCategorySources(&$sources, $context) modifyUserSources(&$sources, $context) You can do this for entries, assets, users and categories
71. 9. Move Home into a structure
72. Home Single Move Home into a structure
73. Home in the Pages structure Move Home into a structure
74. Move Home into a structure • Navigate to Settings > Sections • Delete the Homepage Single • Navigate to Entries and create a Home entry in the desired structure • Change the slug to __home__ • Save the entry and that’s it! Instructions
75. Home in the Pages structure Move Home into a structure
76. 10. Field organization
77. Field organization gone terribly wrong Field organization
78. Ahhh, much better! PS, thanks Eric. Field organization
79. Recap
80. Handy Craft Tips & Tricks 1. Content builders 2. Custom Redactor formatting 3. Add fields to images 4. Router page template 5. The best of Twig 6. Handy General settings 7. Add custom table attributes to element listings 8. Add custom sources to element listings 9. Move home out of a single and into a structure 10. Field organization
81. Thanks! http://alexvanholtz.com