last call media drupal 8 case study
DESCRIPTION
Last Call Media was the first to launch a corporate site on Drupal 8. Find out how it went. This case study reviews the challenges and successes of being an early adopter.TRANSCRIPT
![Page 1: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/1.jpg)
lastcallmedia.com
@lastcallmedia
DESIGN FOR DRUPAL: CASE STUDY- LAST CALL MEDIA.COM
![Page 2: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/2.jpg)
WHO'S WHO• Rob, CTO • Justin, Project Manager • Colin, Creative Director • Jeff, Developer • Kelly, Developer • Tom, Developer
![Page 3: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/3.jpg)
flickr.com/photos/34338074@N06
ESTABLISH PLAN. ASSIGN ROLES. TAKE OVER THE WORLD.
![Page 4: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/4.jpg)
GATHER RESOURCES (POWER, INFLUENCE, INFAMY)• Internal Questionnaire • Client Questionnaire
• “What’s your favorite thing about LCM?” • Current Site Analytics and Performance !
Initial Questions • What are we trying to say? • What is most important to us?
![Page 5: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/5.jpg)
MOST IMPORTANTLY…!!!
Who are we? What do we want to say?
![Page 6: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/6.jpg)
CHOOSING DRUPAL 8• Evolutionary leap forward • Wanted to stay ahead of the pack • Drupal as an open source platform aligns with our core values as a company
of inclusivity and collaboration • LCM team members involved with Drupal Community for over 9 years.
![Page 7: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/7.jpg)
flickr.com/photos/hyfen
SPRINT DAYS
![Page 8: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/8.jpg)
flickr.com/photos/harryka/
QA TESTING
![Page 9: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/9.jpg)
flickr.com/photos/vancouverfilmschool/
STATISTICS
1337 hours logged to date 6 Developers 1 Designer 1 Project Manager Project Duration: ~5mo
![Page 10: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/10.jpg)
DESIGN• Concept
![Page 11: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/11.jpg)
DESIGN• Concept • Planning (IA)
![Page 12: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/12.jpg)
DESIGN• Concept • Planning (IA) • Design and Illustration
• Sketch
• Ink
• Color
![Page 13: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/13.jpg)
DESIGN
![Page 14: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/14.jpg)
DESIGN
![Page 15: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/15.jpg)
DESIGN• Concept • Planning (IA) • Design and Illustration • Goals for blog
![Page 16: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/16.jpg)
BLOG
![Page 17: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/17.jpg)
DEVELOPMENT
![Page 18: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/18.jpg)
OVERALL APPROACH• Rely on core wherever possible
• Lots of new core site building functionality out of the box • Test how far core can take us now without relying on contrib !
• Limited custom PHP code • Unstable APIs • No contrib • Avoid having to rewrite functionality after each upgrade
![Page 19: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/19.jpg)
IMPLEMENTING THE BLOG DESIGNPrimary challenges/features:
• Custom theme • Infinite scroll on blog index page • Disqus commenting on blog posts • Author pages
![Page 20: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/20.jpg)
CUSTOM THEME• No big surprises here
• {theme}.info > {theme}.info.yml
• template.php > {theme}.theme
• {template}.tpl.php > {template}.html.twig
• {theme}.libraries.yml new
![Page 21: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/21.jpg)
INFINITE SCROLL• A lot less painful than initially
expected. !
• Using jquery.infinitescroll.js
• Used a standard view on blog page
![Page 22: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/22.jpg)
DISQUS COMMENTING• Implemented in custom module
• Combination of: • hook_entity_extra_field_info() • hook_node_view() • hook_theme()
• Placed the new disqus item using standard field interface
![Page 23: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/23.jpg)
AUTHOR PAGES• Everything here is standard core
functionality: • Top portion: default user
display mode • Author info: fields on user
entity • Posts on bottom: view block
configured to show on user/*
![Page 24: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/24.jpg)
FRONT PAGE: KEY CHALLENGES/FEATURES• Different design from blog
• Modal windows
• Side-scrolling design
• Parallax
• Hand-drawn animations
![Page 25: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/25.jpg)
DIFFERENT DESIGN FROM BLOG• Homepage shared virtually no
assets with the blog
• Built new theme just for homepage. • Helped avoid massive theme
• Loaded theme only on front page. • Implemented using custom
module • Custom theme negotiator
![Page 26: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/26.jpg)
MODAL WINDOWS• Originally anticipated a lot of
custom work to make modal windows work.
• Only needed to add “use-ajax” class to a link to get it to open in a jquery ui dialog window.
• Previous/Next buttons handled using combination of: • php: hook_preprocess_node()
to find previous/next links
![Page 27: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/27.jpg)
SIDE SCROLLING DESIGN• Added custom homepage
template
• 5 100% width regions
• Using jquery-mousewheel to force horizontal scroll
• Using jquery.scrollTo for scrolling navigation in top bar
![Page 28: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/28.jpg)
PARALLAX• Using stellar.js for train parallax
effect.
• Background, train tracks, foreground all scroll at different speeds.
• Stellar.js lets you set a scroll-ratio for divs to manage scroll speed
• Gotchas: • iOS scrolling
• Used iScroll for tablet to mimic regular scrolling
![Page 29: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/29.jpg)
HAND-DRAWN ANIMATIONS• Unique challenges:
• Animations needed to start and end at specified points
• Animations only progress/rewind when scrolling
• Implementation: • Using a single sprite with
containing each individual animation step (generated using compass).
![Page 30: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/30.jpg)
D8 DEVELOPER EXPERIENCE• In General
• Everything’s still there (though it might not be where you remember)
• Working with the new D8 CMI • Allowed config to be deployed in code without requiring any contributed modules, or worrying about
how related functionality was packaged together (no more features) • Allowed multiple developers to work on related components without having to worry (as much) about
causing conflicts with each other
• Greater flexibility for module developers • Shifting to OOP and use of services allow devs much more power to build sites • There’s a learning curve, especially if your php development has been limited to working with Drupal in
the past
• More accessible to themers • Twig gives template-level access to devs who may not feel at home with php.
![Page 31: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/31.jpg)
SO WHO IS LAST CALL MEDIA?• 5 Years old this October • Growing in-house team of 20 full-time employees
• 8 in house developers • 2 Project Managers • 2 Creatives and Designers • Systems Administrators • UX/UI Content & Marketing Strategists • Leadership and Internal Support
![Page 32: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/32.jpg)
WHERE IS LAST CALL MEDIA?• Headquartered in beautiful downtown Northampton, MA
• The other side of the state, just before the Berkshires, for you Bostonians. • Satellite offices in New York, NY, and Portland, OR. !!!
![Page 33: Last Call Media Drupal 8 Case Study](https://reader033.vdocuments.site/reader033/viewer/2022052907/559118e21a28ab74758b4594/html5/thumbnails/33.jpg)
WE’RE HIRING!