Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Alex Van Holtz

October 23, 2017
Tweet

Other Decks in Technology

Transcript

  1. Handy Craft Tips & Tricks
    by Alex Van Holtz

    View full-size slide

  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

    View full-size slide

  3. Some of my work using Craft

    View full-size slide

  4. http://www.rideicon.com/
    Icon Motosports

    View full-size slide

  5. https://www.onxmaps.com/
    onXmaps

    View full-size slide

  6. https://www.weareparliament.com/shop/
    Parliament Store

    View full-size slide

  7. What are we going to talk about?

    View full-size slide

  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

    View full-size slide

  9. 1. Content builders

    View full-size slide

  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

    View full-size slide

  11. Simple content builder CP
    Content builders

    View full-size slide

  12. Simple content builder example code
    Content builders

    View full-size slide

  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

    View full-size slide

  14. includes/blocks/_copy-block.html
    Content builders

    View full-size slide

  15. includes/blocks/_copy-block.html
    Content builders

    View full-size slide

  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

    View full-size slide

  17. Image Copy Block in the CP
    Content builders

    View full-size slide

  18. includes/blocks/_image-copy-block.html
    Content builders

    View full-size slide

  19. Themes
    Content builders

    View full-size slide

  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

    View full-size slide

  21. 2. Custom Redactor formatting

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  28. 3. Adding fields to image assets

    View full-size slide

  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?

    View full-size slide

  30. Base Image w/ SVG overlay
    Adding fields to image assets

    View full-size slide

  31. Listing Image
    Adding fields to image assets

    View full-size slide

  32. Square Image
    Adding fields to image assets

    View full-size slide

  33. Adding fields to image assets
    Some examples of fields to add

    View full-size slide

  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

    View full-size slide

  35. 4. Router page template

    View full-size slide

  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?

    View full-size slide

  37. Simple router code
    Router page template

    View full-size slide

  38. Complicated router code
    Router page template

    View full-size slide

  39. 5. The best of Twig

    View full-size slide

  40. If statements in for loops
    The best of Twig

    View full-size slide

  41. Default filter
    The best of Twig

    View full-size slide

  42. Ignore missing
    The best of Twig

    View full-size slide

  43. Dynamic object keys
    The best of Twig

    View full-size slide

  44. Preventing white space
    The best of Twig

    View full-size slide

  45. Handy filters part 1
    The best of Twig

    View full-size slide

  46. Handy filters part 2
    Title Text

    View full-size slide

  47. Filter a section of code
    Title Text

    View full-size slide

  48. 6. Handy General settings

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  54. Handy General settings
    • Whether the ‘X-Powered-
    By: Craft CMS’ header
    should be sent along with
    each request
    Powered by header

    View full-size slide

  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

    View full-size slide

  56. 7. Add custom table attributes to
    element listings

    View full-size slide

  57. Add extra meta data
    Add custom table attributes

    View full-size slide

  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?

    View full-size slide

  59. Define the table attributes
    Add custom table attributes

    View full-size slide

  60. Define the table attributes to add
    Add custom table attributes

    View full-size slide

  61. Enable it your new table attribute
    Add custom table attributes

    View full-size slide

  62. Add links to URL attributes
    Add custom table attributes

    View full-size slide

  63. Define the table attributes to modify
    Add custom table attributes

    View full-size slide

  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

    View full-size slide

  65. 8. Add custom sources to
    element listings

    View full-size slide

  66. Sources for temporary images and different sizes
    Add custom sources

    View full-size slide

  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?

    View full-size slide

  68. Modify the asset sources
    Add custom sources

    View full-size slide

  69. Modify entry sources
    Add custom sources

    View full-size slide

  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

    View full-size slide

  71. 9. Move Home into a structure

    View full-size slide

  72. Home Single
    Move Home into a structure

    View full-size slide

  73. Home in the Pages structure
    Move Home into a structure

    View full-size slide

  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

    View full-size slide

  75. Home in the Pages structure
    Move Home into a structure

    View full-size slide

  76. 10. Field organization

    View full-size slide

  77. Field organization gone terribly wrong
    Field organization

    View full-size slide

  78. Ahhh, much better! PS, thanks Eric.
    Field organization

    View full-size slide

  79. 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

    View full-size slide

  80. Thanks!
    http://alexvanholtz.com

    View full-size slide