Handy Craft Tips & Tricks

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