Managing media assets in drupal 8!

Managing media
assets in Drupal8!
●Drupal Camp Cebu 2017
Hello!
I am Aman Kanoria
Product Owner/ Developer, Srijan Technologies
You can find me at @amankanoria
2●Drupal Camp Cebu 2017
Session overview
● #Drupal8 Media Initiative
● Managing assets- Store, Browse, and Embed.
● What does future Drupal releases look like?
3●Drupal Camp Cebu 2017
Media in Drupal!
● Browse through your media files of your website
(Entity Browser, Filebrowser)
● Embed files in the WYSIWYG editor by browsing
(Entity Embed)
● Add and edit asset metadata (Media entity, FileEntity)
● Crop images on the website (Crop, Imagefield Crop)
● Add image effects like watermark, auto orientation,
color-shift etc. (Image Effects)
● And use many more features...
4●Drupal Camp Cebu 2017
What is in Drupal 8?
Let’s talk about core!
1
●Drupal Camp Cebu 2017
Overview
● Built in WYSIWYG editor
● Media library part of core
6●Drupal Camp Cebu 2017
Drupal 8 core embedding
7●Drupal Camp Cebu 2017
Media
Entity
A storage component for media in Drupal!
8●Drupal Camp Cebu 2017
Media Entity
● Provide storage component for different media files.
● YouTube videos, Tweets, Instagram photos and local
files — all of them could be easily added to your site.
● It’s base API is now part of Drupal 8.4.x release.
9●Drupal Camp Cebu 2017
Media Entity’s
features
10
1
Reusable Media
Good bye to reuploading.
Easier Maintenance
A component based
system!
2
Metadata Mapping
Easier to handle
metadata with the file
itself!
3
Base API
Creates a base for Drupal
8 media ecosystem
4
●Drupal Camp Cebu 2017
Media Entity
Demo!
● Media Entity (part of Drupal 8.4 core)
● Media Entity image
● Video Embed Field
● Entity
11●Drupal Camp Cebu 2017
Entity
Embed
In this section we’ll embed assets directly
into the editor.
12●Drupal Camp Cebu 2017
Entity Embed
● Project- https://www.drupal.org/project/entity_embed.
● Allows any entity to be embedded within text area..
● Let’s a site-builder to create a button which lets an editor
to embed!
13●Drupal Camp Cebu 2017
Entity Embed
Demo!
● Embed
● Entity Embed
14
Picture Credits- Edulastic
●Drupal Camp Cebu 2017
Entity
Browser
A powerful component of Drupal’s contributed
ecosystem of modules for managing digital media
assets.
15●Drupal Camp Cebu 2017
Entity Browser
● Project- https://www.drupal.org/project/entity_browser.
● A generic browsing tool and selecting tool.
● Comes with an example module that comes handy to start
with!
16●Drupal Camp Cebu 2017
17
Entity
Browser
Architecture
Picture Credits- https://drupal-media.gitbooks.io
●Drupal Camp Cebu 2017
Entity Browser
Demo!
● Embed Browser
● Ctools
18
Picture Credits- Drupal.org
●Drupal Camp Cebu 2017
Dropzone
JS
An open source library to enable drag and drop!
19●Drupal Camp Cebu 2017
Dropzone JS
● Project- https://www.drupal.org/project/dropzonejs.
● Enhances Drupal’s default upload widget.
20●Drupal Camp Cebu 2017
Dropzone JS
Demo!
● DropzoneJS
● Libraries
21
Picture Credits- dropzone js
●Drupal Camp Cebu 2017
Crop API
Provides storage for all cropping solutions
22●Drupal Camp Cebu 2017
Crop API
● Project- https://www.drupal.org/project/crop.
● Handles crop based on region and focal point concepts.
● Example- Image field widget for UI
23
●Drupal Camp Cebu 2017
Crop API
DEMO!
2
●Drupal Camp Cebu 2017
Drupal 8 core (8.4.x & 8.5.x)
Overview from Dries Buytaert's post on DO for D8 Media
initiative.
● Drupal 8.4 ships with new media module.
● All the contributed modules part of media ecosystem to
adapt the new media module.
● 8.5+: add support for remote video in core (oEmbed
Support)
25●Drupal Camp Cebu 2017
26
Salamat!(Thanks!)
Any questions?
You can find me at @amankanoria & aman.kanoria@srijan.net
●Drupal Camp Cebu 2017
1 of 26

Recommended

ChatGPT and the Future of Work - Clark Boyd by
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
29.5K views69 slides
Getting into the tech field. what next by
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
6.8K views22 slides
Google's Just Not That Into You: Understanding Core Updates & Search Intent by
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
7.1K views99 slides
How to have difficult conversations by
How to have difficult conversations How to have difficult conversations
How to have difficult conversations Rajiv Jayarajah, MAppComm, ACC
5.9K views19 slides
Introduction to Data Science by
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data ScienceChristy Abraham Joy
82.8K views51 slides
Time Management & Productivity - Best Practices by
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
169.8K views42 slides

More Related Content

Recently uploaded

NTGapps NTG LowCode Platform by
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform Mustafa Kuğu
474 views30 slides
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdf by
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdfBronack Skills - Risk Management and SRE v1.0 12-3-2023.pdf
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdfThomasBronack
31 views31 slides
Optimizing Communication to Optimize Human Behavior - LCBM by
Optimizing Communication to Optimize Human Behavior - LCBMOptimizing Communication to Optimize Human Behavior - LCBM
Optimizing Communication to Optimize Human Behavior - LCBMYaman Kumar
39 views49 slides
Telenity Solutions Brief by
Telenity Solutions BriefTelenity Solutions Brief
Telenity Solutions BriefMustafa Kuğu
14 views10 slides
Evaluation of Quality of Experience of ABR Schemes in Gaming Stream by
Evaluation of Quality of Experience of ABR Schemes in Gaming StreamEvaluation of Quality of Experience of ABR Schemes in Gaming Stream
Evaluation of Quality of Experience of ABR Schemes in Gaming StreamAlpen-Adria-Universität
44 views34 slides
The Role of Patterns in the Era of Large Language Models by
The Role of Patterns in the Era of Large Language ModelsThe Role of Patterns in the Era of Large Language Models
The Role of Patterns in the Era of Large Language ModelsYunyao Li
104 views65 slides

Recently uploaded(20)

NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu474 views
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdf by ThomasBronack
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdfBronack Skills - Risk Management and SRE v1.0 12-3-2023.pdf
Bronack Skills - Risk Management and SRE v1.0 12-3-2023.pdf
ThomasBronack31 views
Optimizing Communication to Optimize Human Behavior - LCBM by Yaman Kumar
Optimizing Communication to Optimize Human Behavior - LCBMOptimizing Communication to Optimize Human Behavior - LCBM
Optimizing Communication to Optimize Human Behavior - LCBM
Yaman Kumar39 views
The Role of Patterns in the Era of Large Language Models by Yunyao Li
The Role of Patterns in the Era of Large Language ModelsThe Role of Patterns in the Era of Large Language Models
The Role of Patterns in the Era of Large Language Models
Yunyao Li104 views
"Node.js Development in 2024: trends and tools", Nikita Galkin by Fwdays
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin
Fwdays37 views
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And... by ShapeBlue
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
ShapeBlue120 views
Transcript: Redefining the book supply chain: A glimpse into the future - Tec... by BookNet Canada
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
BookNet Canada43 views
Deep Tech and the Amplified Organisation: Core Concepts by Holonomics
Deep Tech and the Amplified Organisation: Core ConceptsDeep Tech and the Amplified Organisation: Core Concepts
Deep Tech and the Amplified Organisation: Core Concepts
Holonomics17 views
"Running students' code in isolation. The hard way", Yurii Holiuk by Fwdays
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk
Fwdays38 views
LLMs in Production: Tooling, Process, and Team Structure by Aggregage
LLMs in Production: Tooling, Process, and Team StructureLLMs in Production: Tooling, Process, and Team Structure
LLMs in Production: Tooling, Process, and Team Structure
Aggregage65 views
AI + Memoori = AIM by Memoori
AI + Memoori = AIMAI + Memoori = AIM
AI + Memoori = AIM
Memoori15 views
Business Analyst Series 2023 - Week 4 Session 7 by DianaGray10
Business Analyst Series 2023 -  Week 4 Session 7Business Analyst Series 2023 -  Week 4 Session 7
Business Analyst Series 2023 - Week 4 Session 7
DianaGray10152 views
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by ShapeBlue
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
ShapeBlue209 views
"Surviving highload with Node.js", Andrii Shumada by Fwdays
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada
Fwdays59 views
The Coming AI Tsunami.pptx by johnhandby
The Coming AI Tsunami.pptxThe Coming AI Tsunami.pptx
The Coming AI Tsunami.pptx
johnhandby14 views

Featured

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present... by
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
55.5K views138 slides
12 Ways to Increase Your Influence at Work by
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
401.7K views64 slides
ChatGPT webinar slides by
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slidesAlireza Esmikhani
30.5K views36 slides
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G... by
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
3.6K views12 slides
Barbie - Brand Strategy Presentation by
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
25.1K views46 slides

Featured(20)

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present... by Applitools
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools55.5K views
12 Ways to Increase Your Influence at Work by GetSmarter
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter401.7K views
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G... by DevGAMM Conference
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
DevGAMM Conference3.6K views
Barbie - Brand Strategy Presentation by Erica Santiago
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
Erica Santiago25.1K views
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well by Saba Software
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software25.3K views
Introduction to C Programming Language by Simplilearn
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
Simplilearn8.5K views
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr... by Palo Alto Software
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
Palo Alto Software88.4K views
9 Tips for a Work-free Vacation by Weekdone.com
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation
Weekdone.com7.2K views
How to Map Your Future by SlideShop.com
How to Map Your FutureHow to Map Your Future
How to Map Your Future
SlideShop.com275.1K views
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -... by AccuraCast
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...
AccuraCast3.4K views
Exploring ChatGPT for Effective Teaching and Learning.pptx by Stan Skrabut, Ed.D.
Exploring ChatGPT for Effective Teaching and Learning.pptxExploring ChatGPT for Effective Teaching and Learning.pptx
Exploring ChatGPT for Effective Teaching and Learning.pptx
Stan Skrabut, Ed.D.57.7K views
How to train your robot (with Deep Reinforcement Learning) by Lucas García, PhD
How to train your robot (with Deep Reinforcement Learning)How to train your robot (with Deep Reinforcement Learning)
How to train your robot (with Deep Reinforcement Learning)
Lucas García, PhD42.5K views
4 Strategies to Renew Your Career Passion by Daniel Goleman
4 Strategies to Renew Your Career Passion4 Strategies to Renew Your Career Passion
4 Strategies to Renew Your Career Passion
Daniel Goleman122.1K views
The Student's Guide to LinkedIn by LinkedIn
The Student's Guide to LinkedInThe Student's Guide to LinkedIn
The Student's Guide to LinkedIn
LinkedIn88.1K views
Different Roles in Machine Learning Career by Intellipaat
Different Roles in Machine Learning CareerDifferent Roles in Machine Learning Career
Different Roles in Machine Learning Career
Intellipaat12.4K views
Defining a Tech Project Vision in Eight Quick Steps pdf by TechSoup
Defining a Tech Project Vision in Eight Quick Steps pdfDefining a Tech Project Vision in Eight Quick Steps pdf
Defining a Tech Project Vision in Eight Quick Steps pdf
TechSoup 9.7K views

Managing media assets in drupal 8!

  • 1. Managing media assets in Drupal8! ●Drupal Camp Cebu 2017
  • 2. Hello! I am Aman Kanoria Product Owner/ Developer, Srijan Technologies You can find me at @amankanoria 2●Drupal Camp Cebu 2017
  • 3. Session overview ● #Drupal8 Media Initiative ● Managing assets- Store, Browse, and Embed. ● What does future Drupal releases look like? 3●Drupal Camp Cebu 2017
  • 4. Media in Drupal! ● Browse through your media files of your website (Entity Browser, Filebrowser) ● Embed files in the WYSIWYG editor by browsing (Entity Embed) ● Add and edit asset metadata (Media entity, FileEntity) ● Crop images on the website (Crop, Imagefield Crop) ● Add image effects like watermark, auto orientation, color-shift etc. (Image Effects) ● And use many more features... 4●Drupal Camp Cebu 2017
  • 5. What is in Drupal 8? Let’s talk about core! 1 ●Drupal Camp Cebu 2017
  • 6. Overview ● Built in WYSIWYG editor ● Media library part of core 6●Drupal Camp Cebu 2017
  • 7. Drupal 8 core embedding 7●Drupal Camp Cebu 2017
  • 8. Media Entity A storage component for media in Drupal! 8●Drupal Camp Cebu 2017
  • 9. Media Entity ● Provide storage component for different media files. ● YouTube videos, Tweets, Instagram photos and local files — all of them could be easily added to your site. ● It’s base API is now part of Drupal 8.4.x release. 9●Drupal Camp Cebu 2017
  • 10. Media Entity’s features 10 1 Reusable Media Good bye to reuploading. Easier Maintenance A component based system! 2 Metadata Mapping Easier to handle metadata with the file itself! 3 Base API Creates a base for Drupal 8 media ecosystem 4 ●Drupal Camp Cebu 2017
  • 11. Media Entity Demo! ● Media Entity (part of Drupal 8.4 core) ● Media Entity image ● Video Embed Field ● Entity 11●Drupal Camp Cebu 2017
  • 12. Entity Embed In this section we’ll embed assets directly into the editor. 12●Drupal Camp Cebu 2017
  • 13. Entity Embed ● Project- https://www.drupal.org/project/entity_embed. ● Allows any entity to be embedded within text area.. ● Let’s a site-builder to create a button which lets an editor to embed! 13●Drupal Camp Cebu 2017
  • 14. Entity Embed Demo! ● Embed ● Entity Embed 14 Picture Credits- Edulastic ●Drupal Camp Cebu 2017
  • 15. Entity Browser A powerful component of Drupal’s contributed ecosystem of modules for managing digital media assets. 15●Drupal Camp Cebu 2017
  • 16. Entity Browser ● Project- https://www.drupal.org/project/entity_browser. ● A generic browsing tool and selecting tool. ● Comes with an example module that comes handy to start with! 16●Drupal Camp Cebu 2017
  • 18. Entity Browser Demo! ● Embed Browser ● Ctools 18 Picture Credits- Drupal.org ●Drupal Camp Cebu 2017
  • 19. Dropzone JS An open source library to enable drag and drop! 19●Drupal Camp Cebu 2017
  • 20. Dropzone JS ● Project- https://www.drupal.org/project/dropzonejs. ● Enhances Drupal’s default upload widget. 20●Drupal Camp Cebu 2017
  • 21. Dropzone JS Demo! ● DropzoneJS ● Libraries 21 Picture Credits- dropzone js ●Drupal Camp Cebu 2017
  • 22. Crop API Provides storage for all cropping solutions 22●Drupal Camp Cebu 2017
  • 23. Crop API ● Project- https://www.drupal.org/project/crop. ● Handles crop based on region and focal point concepts. ● Example- Image field widget for UI 23 ●Drupal Camp Cebu 2017
  • 25. Drupal 8 core (8.4.x & 8.5.x) Overview from Dries Buytaert's post on DO for D8 Media initiative. ● Drupal 8.4 ships with new media module. ● All the contributed modules part of media ecosystem to adapt the new media module. ● 8.5+: add support for remote video in core (oEmbed Support) 25●Drupal Camp Cebu 2017
  • 26. 26 Salamat!(Thanks!) Any questions? You can find me at @amankanoria & aman.kanoria@srijan.net ●Drupal Camp Cebu 2017

Editor's Notes

  1. Background and Problem Drupal core is an amazing content structuring tool with options to give rich structure to basically everything in the system. While Drupal core includes basic file and image support, it is a far cry from what a modern web system should support out of the box for media handling. External media cannot be embedded easily in core and media cannot be reused. Due to very limited functionality provided by core it is also very hard for contrib to build on top of it. Core should provide base APIs, design patterns and paradigms to guide contrib work. Proposed resolution Provide a three-pronged implementation approach to media solutions, that involves three distinct groupings of functionality targeted at different use cases: Media Essentials, Extras and Extend. Three key objectives of this approach are to: Involve new contributors to help existing media team members to create a Media Essentials suite as a minimum viable solution that provides a basic group of media functionality in Drupal 8 core by 8.3's release candidate. Solutions built as part of this should also provide solid foundations for all work that will be part of other two groups of functionality. Media Extras suite to provide a group of rich media entity/editing functionality in contrib, which will eventually be integrated into Drupal 8 core once stable. Enable new contributors to use the Media Extend functionality in Drupal 8 to integrate 3rd party media tools/Digital Asset Management systems (DAMs) within the overall ecosystem of Drupal media modules. The overall experience for end users should be seamless regardless of which media modules their site happens to be using, and the implementation should be straightforward for site builders, architects and developers based on solid documentation in the Drupal 8 Media Handbook.
  2. Background and Problem Drupal core is an amazing content structuring tool with options to give rich structure to basically everything in the system. While Drupal core includes basic file and image support, it is a far cry from what a modern web system should support out of the box for media handling. External media cannot be embedded easily in core and media cannot be reused. Due to very limited functionality provided by core it is also very hard for contrib to build on top of it. Core should provide base APIs, design patterns and paradigms to guide contrib work. Proposed resolution Provide a three-pronged implementation approach to media solutions, that involves three distinct groupings of functionality targeted at different use cases: Media Essentials, Extras and Extend. Three key objectives of this approach are to: Involve new contributors to help existing media team members to create a Media Essentials suite as a minimum viable solution that provides a basic group of media functionality in Drupal 8 core by 8.3's release candidate. Solutions built as part of this should also provide solid foundations for all work that will be part of other two groups of functionality. Media Extras suite to provide a group of rich media entity/editing functionality in contrib, which will eventually be integrated into Drupal 8 core once stable. Enable new contributors to use the Media Extend functionality in Drupal 8 to integrate 3rd party media tools/Digital Asset Management systems (DAMs) within the overall ecosystem of Drupal media modules. The overall experience for end users should be seamless regardless of which media modules their site happens to be using, and the implementation should be straightforward for site builders, architects and developers based on solid documentation in the Drupal 8 Media Handbook.
  3. Drupal 8 core comes with basic support for embedding images with WYSIWYG but basic isn’t enough when we talk about external media assets like - Tweets, Videos, Instagram and etc?
  4. Drupal 8 core comes with basic support for embedding images with WYSIWYG but basic isn’t enough when we talk about external media assets like - Tweets, Videos, Instagram and etc?
  5. Drupal 8 core comes with basic support for embedding images with WYSIWYG but basic isn’t enough when we talk about external media assets like - Tweets, Videos, Instagram and etc?
  6. Drupal 8 core comes with basic support for embedding images with WYSIWYG but basic isn’t enough when we talk about external media assets like - Tweets, Videos, Instagram and etc?