Save 37% off PRO during our Black Friday Sale! »

Handy Craft Tips & Tricks

Handy Craft Tips & Tricks

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

C6027787ed63b4373dc4785de72db0d7?s=128

Alex Van Holtz

October 23, 2017
Tweet

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