$30 off During Our Annual Pro Sale. View Details »

“Advanced” 
Templating with ExpressionEngine

“Advanced” 
Templating with ExpressionEngine

Learn how to use Stash and creating simple plugins to advance your ExpressionEngine Templates

Trevor Davis

July 28, 2012
Tweet

More Decks by Trevor Davis

Other Decks in Technology

Transcript

  1. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    “ADVANCED”
    TEMPLATING
    by Trevor Davis at DCEERS on July , 

    View Slide

  2. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    @trevor_davis
    HI! I’M
    I work as a Front-End Developer at Viget.
    TREVOR DAVIS

    View Slide

  3. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    I. Stash
    II. Creating Simple Plugins
    WHAT WE WILL COVER

    View Slide

  4.  
    STASH

    View Slide

  5. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    ‎ Set text and snippets of code
    ‎ Get them later on
    ‎ Include a layout
    ‎ Fill in the gaps
    STASH

    View Slide

  6. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    _layouts/base

    View Slide




  7. {if {exp:stash:not_empty name="title"}}
    {exp:stash:get name="title"} |
    {/i }
    Site Name



    {exp:stash:get name="content"}

    View Slide

  8. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    site/index

    View Slide

  9. {embed="_layouts/base"}
    {exp:stash:set_value name="title" value="Homepage"}
    {exp:stash:set name="content"}
    Here is my content
    {/exp:stash:set}

    View Slide

  10. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    RENDERED PAGE

    View Slide




  11. Homepage |
    Site Name



    Here is my content

    View Slide

  12. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    REAL EXAMPLE

    View Slide

  13. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    ‎ Includes data from an entry in profile channel
    ‎ Includes entries from blog channel authored by
    that person
    VIGET.COM PROFILE PAGES

    View Slide

  14. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    THE OLD WAY

    View Slide

  15. {embed="structure/header"}
    {exp:channel:entries
    channel="profile"
    require_entry="yes"
    limit="1"
    }
    {title}
    {profile_job_title}
    {profile_bio}
    {embed="about/_blog_posts"}
    ...
    {/exp:channel:entries}
    {embed="structure/footer"}

    View Slide

  16. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    THE NEW WAY

    View Slide

  17. {embed="_layouts/base"}
    {exp:stash:set parse_tags="yes"}
    {stash:blog_posts}
    {exp:channel:entries
    channel="blog"
    dynamic="no"
    username="{segment_3}"
    }
    {title}
    {stash:num_posts}{absolute_results}{/stash:num_posts}
    {/exp:channel:entries}
    {/stash:blog_posts}
    {/exp:stash:set}

    View Slide

  18. {exp:channel:entries
    channel="profile"
    require_entry="yes"
    limit="1"
    }
    {exp:stash:set name="content"}
    {title}
    {profile_job_title}
    {profile_bio}
    {if {exp:stash:not_empty name="blog_posts"}}
    {exp:stash:get name="num_posts"} Posts

    {exp:stash:get name="blog_posts"}

    {/i }
    {/exp:stash:set}
    {/exp:channel:entries}

    View Slide

  19. arrestedstills.tumblr.com
    CREDITS
    HOW I FELT AFTER
    LEARNING HOW
    TO USE STASH

    View Slide

  20. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    SERIOUSLY,
    GIVE IT A TRY

    View Slide

  21.  
    CREATING
    SIMPLE PLUGINS

    View Slide

  22. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    ‎ Our rule: no PHP in templates
    ‎ Performance implications
    ‎ Just messy
    ‎ Solution: create a plugin
    CREATING SIMPLE PLUGINS

    View Slide

  23. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    SIMPLE EXAMPLE

    View Slide

  24. echo urlencode('http://viget.com/blog/awesome-
    entry-title');
    ?>

    View Slide

  25. {exp:vl_client:url_encode}
    http://viget.com/blog/awesome-entry-title
    {/exp:vl_client:url_encode}

    View Slide

  26. public function url_encode()
    {
    $tagdata = $this->EE->TMPL->tagdata;
    return urlencode(trim($tagdata));
    }

    View Slide

  27. http%3A%2F%2Fviget.com%2Fblog%2Fawesome-entry-title

    View Slide

  28. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    A MORE
    COMPLEX EXAMPLE

    View Slide

  29. {exp:vl_client:entry_count channel_id="4"}

    View Slide

  30. public function entry_count()
    {
    $channel_id = $this->EE->TMPL->fetch_param('channel_id', NULL);
    if($channel_id) {
    $query = $this->EE->db->select('total_entries')
    ->from('channels')
    ->where('channel_id', $channel_id)
    ->get();
    if ($query->num_rows() > 0) {
    $row = $query->row();
    return $row->total_entries;
    }
    }
    }

    View Slide

  31. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    PKG.IO

    View Slide

  32. View Slide

  33. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    ‎ Multiple methods
    ‎ Won’t necessarily need them on other projects
    ‎ viget.com: 18 methods
    ‎ carrworkplaces.com: 4 methods
    SITE SPECIFIC PLUGINS

    View Slide

  34. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
    Stash: devot-ee.com/add-ons/stash
    Pkg.io: pkg.io
    Sample Plugin: gist.github.com/3191839
    web: trevordavis.net
    twitter: @trevor_davis
    Thanks!
    Let’s Connect
    Resources

    View Slide