-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
898 lines (793 loc) · 41.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Everybody cheer!! Here comes Media!</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background="lib/dcon-title-slide.jpg" class="dcon-slide" data-state="logo-position-hidden">
<p><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</p>
<h2>Everybody cheer! Here comes media!</h2>
<p><small>Saša Nikolič, Tadej Baša</small></p>
<aside class="notes">
<ul>
<li>You’ve probably heard there’s a lot going on around Media in Drupal 8 recently. How many of you already use Media in your projects or are familiar with it?</li>
<li>We strongly believe that media is at the heart of a great website experience. Everybody loves having big images, videos, audio files on their websites - this is what brings a website to life for your users. Let’s see some specific issues that we faced when handling media in Drupal 7:</li>
<li>A huge amount of work has been invested in the recent years and we finally have a really flexible architecture and powerful ecosystem for handling media.</li>
<li>In this talk we’d like to show what the fuss is all about.</li>
</ul>
</aside>
</section>
<section data-background="lib/background.jpg" class="has-dark-background" data-state="logo-position-hidden">
<div>
<img data-src="lib/logo-white.png" alt="amazee logo" class="plain" width="358" height="188" />
</div>
<p style="display: inline-block; width: 49%; color: white;" class="profile">
<span>
<img data-src="lib/img/sasa-profile.png" alt="sasa headshot" class="headshot" width="50%" height="50%" />
</span> <br/>
Saša Nikolič <br />
<span class="social">
<a href="https://www.drupal.org/u/sasanikolic" class="drupalorg"><img src="lib/img/druplicon.png" /> sasanikolic</a> / <a href="http://twitter.com/sasanikolic90" class="twitter"><img src="lib/img/twitter.png" />@sasanikolic90</a>
</span>
</p>
<p style="display: inline-block; width: 49%; color: white;">
<span>
<img data-src="lib/img/tadej-profile.png" alt="tadej headshot" class="headshot" width="50%" height="50%">
</span> <br />
Tadej Baša <br />
<span class="social">
<a href="https://www.drupal.org/u/paranojik" class="drupalorg"><img src="lib/img/druplicon.png" /> paranojik</a> / <a href="http://twitter.com/paranojik" class="twitter"><img src="lib/img/twitter.png" /> @paranojik</a>
</span>
</p>
<aside class="notes">
- We are Saša and Tadej, we both come from Slovenia (yes, it’s that small country just south of Austria :)) and we both work at Amazee Labs Zurich.
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Overview</h1>
<ul>
<li>Struggle with Drupal 7</li>
<li>Drupal 8 out of the box</li>
<li>Media entity and Media in Core</li>
<li>Entity selection with Entity browser</li>
<li>Embedding entities</li>
<li>Image Cropping</li>
<li>Questions</li>
</ul>
<aside class="notes">
- We’d like to start by giving some context about the problems we faced using Drupal in the past and then proceed with how these were addressed in Drupal 8 and how the Media entity ecosystem brought all this to a whole new level.
<br />
- So basically, we’ll start from scratch and show you step-by-step how we can easily improve media handling in Drupal 8 from a very simple example and gradually add more complexity.
<br />
- We’ll take a look at the base Media module and what it provides, then we will proceed with the entity browser module, dropzoneJS for bulk uploads, we'll explain the embedding functionality and finally show two cropping solutions. There will also be some time at the end for some discussion.
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Required modules</h1>
<ul>
<li>Drupal 8.4-dev (with Media enabled)</li>
<li>Video Embed Field</li>
<li>Embed and Entity Embed</li>
<li>Inline Entity Form</li>
<li>Ctools</li>
<li>Entity Browser</li>
<li>DropzoneJS</li>
<li>Crop API, Image Widget Crop, Focal point</li>
</ul>
<aside class="notes">
For the sake of this presentation we will be using the following modules. We expect that everyone here knows how to download and enable a module from drupal.org and strongly suggest you use them when dealing with images and videos from now on, and maybe add some more if you need some extra functionality.
</aside>
</section>
<section data-state="logo-position-hidden">
<img src="lib/img/drupal-7.jpg"/>
<p style="font-size: 18px; color: grey;">Source: <a href="https://association.drupal.org">https://association.drupal.org</a></p>
</section>
<section data-state="logo-position-normal">
<h1>The struggle</h1>
<ul>
<li>Nothing out-of-the-box?</li>
<li>File fields</li>
<li>Image fields</li>
<li>Cannot add fields to files</li>
<li>Cannot reuse files</li>
</ul>
<aside class="notes">
<ul>
<li>So when you installed drupal 7 out of the box… what kind of functionality did you get? Well, you didn’t really get much. You didn’t get an editor and there was no proper media management.</li>
<li>Basically there were just image and file fields and the interactions with files are very limited, that means that we cannot add any metadata (like caption, copyright info) to them (because they are not entities).</li>
<li>What is more, we couldn't even reuse any images that we previously uploaded...</li>
</ul>
</aside>
</section>
<section data-state="logo-position-normal">
<h2>Have no fear, contrib is here!</h2>
<aside class="notes">
… but that’s all right, have no fear, contrib is here! Because Drupal is based on a modular architecture with a small Drupal core, which holds the basic functionality and contrib modules to complement it… that means that people will develop contribution modules that add extra functionality.
</aside>
</section>
<section data-state="logo-position-normal">
<h1>... the struggle continues</h1>
<ul>
<li>Media module</li>
<li>Media oEmbed for remote resources (YouTube, Vimeo)</li>
<li>Media CKEditor</li>
<li>Entity Embed</li>
</ul>
<p>
That’s ok... because of the modular architecture
</p>
<aside class="notes">
- The most popular by far to handle media is of course, the Media module. <br/>
It offered decent functionality, in combination with many other modules, like Media oEmbed - to embed youtube or vimeo videos, Media CKEditor and Entity Embed… it was still a bit buggy with WYSIWYG Editors but it’s a pretty decent solution. And some distributions like Penopoly use it.
</aside>
</section>
<section data-state="logo-position-hidden">
<h1>SCALD</h1>
<img src="lib/img/scald.png">
<p style="font-size: 18px; color: grey;">Source: <a href="https://www.drupal.org/project/scald">https://www.drupal.org/project/scald</a></p>
<aside class="notes">
- Complete new take on managing media in Drupal 7. Relied on CKEditor, where you could click and drag “atoms” (their definition of an entity) into the editor. It was highly recommended by the community.
</aside>
</section>
<section data-state="logo-position-hidden">
<h1>IMCE</h1>
<img src="lib/img/imce.jpg" />
<p style="font-size: 18px; color: grey;">Source: <a href="https://www.drupal.org/project/imce">https://www.drupal.org/project/imce</a></p>
<aside class="notes">
- And of course, who doesn't know IMCE. This is a simple image/file uploader that lets you browse folders in Drupal’s /files directory. It’s been around since 2006 and it looks like something brought in from Joomla… but if you know its limitations, it’s a good solution.
</aside>
</section>
<!-- Enough Drupal 7, just switch to Drupal 8 -->
<section data-state="logo-position-normal">
<img src="lib/img/drupal7-to-8.png" style="box-shadow: none;"/>
<p style="font-size: 18px; color: grey;">Source: <a href="https://www.brainvire.com">https://www.brainvire.com</a></p>
<aside class="notes">
- But then the time came for Drupal 7 to move along and media issues were finally addressed in the new version. Tadej will tell us more about the Media initiative, the new ecosystem and what’s new in Drupal 8.
</aside>
</section>
<!-- Demo of drupal 8 out of the box -->
<section data-background="resources/converted/d8_out_of_the_box.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">
- So first let’s see what Drupal 8 looks like out-of the-box. What we’re looking at now is a clean Drupal installation using the standard installation profile so most of the stuff is already preconfigured.
<br />
- Let’s try and add an article now.
<br />
...
<br />
- What do we as site builders / users get from Drupal from a fresh install? We can host images locally, we can upload images in bulk with the new HTML5 file upload element. We have a file listing. We have usage tracking. Which means that every time you reference an image or embed it in wysiwyg Drupal will increase a counter for that file.
We have basic embedding of images in wysiwyg. But works only for images. You can’t embed videos with that. You can set a caption, alt text and alignment.
</aside>
</section>
<section data-background="resources/gifs/wow.gif" data-state="logo-position-hidden">
<h2 style="color: white;">Amazeeing, right?</h2>
</section>
<!-- TODO: find dissapointing gify -->
<section data-background="resources/gifs/disapprove.gif" data-state="logo-position-hidden">
<h2 style="color: white;">... or is it ?!</h2>
</section>
<section data-state="logo-position-normal">
<h1>Drupal 8 “out of the box”</h1>
<ul>
<li>Basic image/file upload</li>
<li>CKEditor + embedding</li>
<li>Basic file listing with usage info</li>
<li><strong>Limitations (still)</strong>
<ul>
<li>Cannot reuse files</li>
<li>Embedding supports only images</li>
<li>Cannot add custom fields to files</li>
<li>Cannot reference remote media</li>
</ul>
</li>
</ul>
<aside class="notes">
- We still can’t reuse images. Embedding only works for images and even that without cropping or resizing. <br />
- Files are not fully fledged entities so whatever attributes they currently support - that’s it. You’re not able to add additional custom fields to files or images. (for example copyright information). <br />
- What about videos? How do we link videos from youtube or vimeo? Or images from Flick or… you name it? How can we embed these kind of media? Do we have or want modules that create a field type for each and every one of them like we did in drupal 7?
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Media initiative</h1>
<p>Main goals:</p>
<ul>
<li>Ability to reuse content</li>
<li>Media library</li>
<li>Remote media sources</li>
<li>Generic solution for media handling
<ul>
<li>Metadata</li>
<li>Embedding</li>
<li>Cropping</li>
</ul>
</li>
</ul>
<aside class="notes">
- Of course we don’t. That’s why a group of people got together at DrupalCon prague in 2013. Janez Urevc held a core conversation was titled “LET’S FIX FILE AND MEDIA HANDLING ONCE AND FOR ALL”. <br />
- A plan was drafted for generic media handling. Later next year at Drupal camp NYC the media initiative was formed and a huge effort has been undertaken - unify media handling and provide a generic and versatile base for all kinds of media solutions. This is how media_entity was born. <br />
- Main goals: Media library, reuse of images, upload images to your server, remote media from services like youtube, flickr, Generic handling of media with embedding, cropping and metadata. <br />
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Media entity</h1>
<ul>
<li>Media is content entity</li>
<li>Media types make use of Media source plugins</li>
<li>Media sources provide metadata:
<ul>
<li>Thumbnail</li>
<li>Description</li>
<li>Size</li>
</ul>
</li>
<li>Mapping of metadata to entity fields</li>
</ul>
<aside class="notes">
- The Media entity module provides a 'base' entity for storing media. This is a normal content entity (just like node) which can reference all kinds of media-objects (local files - meaning on your server, YouTube videos, Tweets, Instagram photos, ...). Media entity provides a relation between Drupal and the actual media resource. You can reference this entity within any other Drupal entity via the Entity reference field. <br />
- Media introduces the notion of Media sources. Media sources are plugins that implement the actual retrieval of the linked media object and its metadata and propagate storage to Drupal fields. <br />
- On youtube you have a video a description thumbnail… In the past it was hard to use that. There was no standardized way of fetching and exposing that data on the site. With media entity we now have metadata fields and you can map those from the Source to local fields.” Tweet author, id, retweet count,...
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Bringing Media entity into core</h1>
<ul>
<li>Media Entity -> Media in Drupal 8.4</li>
<li>Improved API</li>
<li>Basic types: Image, Document</li>
<li>Everything else in contrib</li>
</ul>
<aside class="notes">
- After the official media initiative was announced at DrupalCon New Orleans work has begun to bring the media_entity into core. It is now called only “Media”. It’s a stable but hidden module. It is hidden because it actually doesn’t do much on it’s own. So far it only provides support for local images and documents (pdf,...) and a lot of the usability stuff needs to be addressed. So it is still up to contrib to leverage the media APIs and extend the functionality just as before. <br />
- Media_entity is committed to core as stable but because a lot of the contrib is not yet ported to the new API and the upgrade path is not ready yet it is a hidden module and a lot of the usability stuff like sensible defaults, formatters and widgets are not in place yet. Media is an API module and does nothing special on it’s own. <br />
- Currently the media initiative is also working on porting the existing media_entity ecosystem to be compatible with the recent changes in core. If you’re a developer and you want to help with you can join the sprints which are happening here at DCon vienna on Friday. <br />
- But let’s not underestimate the impact this has on the overall progress of Drupal. The task and ultimate goal of core is not only to provide functionality but most importantly to set standards and provide APIs that contrib can then follow along, extend that functionality and provide richer customized experiences.
</aside>
</section>
<!-- https://www.youtube.com/watch?v=72NfSwCzFVE -->
<!-- DEMO enable instagram and media -->
<section data-background="resources/converted/enable_instagram.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Enable instagram and media
- So let’s see on our example what happens when we enable the new Media module in Drupal 8.4. We have to do this either via drush as Media is a hidden module, or by enabling a module that depends on Media,... oh and of course after that you need to clear the cache! :) <br />
- If we now go to the Admin -> Structure path we see that have a new menu Item “Media types” and under that “Image and Document” is already defined for us. This is a replacement for the traditional “File” and “Image” fields. <br />
- Let’s try and add another Media type. We’ll add Videos using the video_embed_field module which defines a Media source for referencing remote videos (Youtube, Vimeo,...). The module is already enabled for this example.
</aside>
</section>
<section data-background="resources/converted/add_instagram_type.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Add instagram media type</aside>
</section>
<section data-background="resources/converted/instagram_add_fields.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Add metadata fields</aside>
</section>
<section data-background="resources/converted/instagram_configure_form_display.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Configure form display</aside>
</section>
<section data-background="resources/converted/instagram_configure_display_mode.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Configure display mode</aside>
</section>
<section data-background="resources/converted/instagram_configure_mapping.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Set metadata mapping</aside>
</section>
<section data-background="resources/converted/instagram_add_instagram_item.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Add instagram item</aside>
</section>
<section data-background="resources/converted/article_add_gallery_field.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Add gallery field to gallery</aside>
</section>
<section data-background="resources/converted/reference_media_item.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Reference the created instagram item</aside>
</section>
<section data-state="logo-position-normal">
<h1>Improving the experience</h1>
<p>with</p>
<h2>Entity browser</h2>
</section>
<section data-state="logo-position-normal">
<h1>Entity browser</h1>
<ul>
<li>Selecting from library</li>
<li>Creating a new item while referencing</li>
<li>Uploading multiple images at once</li>
<li>More complex workflows</li>
</ul>
<aside class="notes">
The Entity Browser module provides a very flexible and powerful UI component for browsing and selecting entities. <br />
</aside>
</section>
<section data-state="logo-position-hidden">
<h3>Entity browser - architecture</h3>
<img src="resources/eb_architecture.png" style="max-height: 600px">
<p style="font-size: 18px; color: grey;">Source: <a href="https://slashrsm.github.io/entity-browser-session/#/architecture-wireframe">https://slashrsm.github.io/entity-browser-session/#/architecture-wireframe</a></p>
<aside class="notes">
- It has a pluggable architecture, meaning everybody can implement parts which best suit their needs. <br />
</aside>
</section>
<section data-state="logo-position-hidden">
<h4>Widget</h4>
<img src="resources/eb_architecture-widget.png" style="max-height: 600px">
<p style="font-size: 18px; color: grey;">Source: <a href="https://slashrsm.github.io/entity-browser-session/#/architecture-wireframe">https://slashrsm.github.io/entity-browser-session/#/architecture-wireframe</a></p>
<aside class="notes">
- The main part is called the WIDGET. That’s where the entity selection is taking place. It could be a view or an upload form, a form connected to some external DAM system, etc…
</aside>
</section>
<section data-state="logo-position-hidden">
<h4>Widget selector</h4>
<img src="resources/eb_architecture-selector.png" style="max-height: 600px">
<p style="font-size: 18px; color: grey;">Source: <a href="https://slashrsm.github.io/entity-browser-session/#/architecture-wireframe">https://slashrsm.github.io/entity-browser-session/#/architecture-wireframe</a></p>
<aside class="notes">
- On top we have the “Widget selector” Part that defines how switching between widgets work. Can be dropdown, buttons, tabs,...
</aside>
</section>
<section data-state="logo-position-hidden">
<h4>Selection display</h4>
<img src="resources/eb_architecture-selectiondisplay.png" style="max-height: 600px">
<p style="font-size: 18px; color: grey;">Source: <a href="https://slashrsm.github.io/entity-browser-session/#/architecture-wireframe">https://slashrsm.github.io/entity-browser-session/#/architecture-wireframe</a></p>
<aside class="notes">
- At the bottom we have the “Selection display”: This part that displays entities that are currently selected. It’s like some sort of clipboard.
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Entity browser in use</h1>
<ul>
<li>As an entity reference field widget</li>
<li>As a file/image field widget</li>
<li>With Entity embed</li>
<li>In a custom form (as a form element)</li>
<li>In combination with Inline Entity Form</li>
</ul>
<aside class="notes">
<ul>Some of the possible use cases would be:
<li>selecting images from a library</li>
<li>Uploading images in bulk</li>
<li>It even supports a very flexible multi-step workflow</li>
</ul>
</aside>
</section>
<!-- TODO: ENTITY BROWSER DEMO -->
<section data-background="resources/converted/eb_add_view.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Add EB View</aside>
</section>
<section data-background="resources/converted/eb_configure_eb.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Configure simple EB</aside>
</section>
<section data-background="resources/converted/eb_configure_eb_widget.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Configure EB Widget</aside>
</section>
<section data-background="resources/converted/eb_reference_items_on_article.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Reference using EB</aside>
</section>
<section data-background="resources/gifs/that_s_ok.gif" data-state="logo-position-hidden">
<aside class="notes">That's OK.</aside>
<h2 style="color: white;">That was OK!</h2>
</section>
<section data-state="logo-position-normal">
<h1>Entity browser - advanced</h1>
<ul>
<li>Build upload using <a href="https://www.drupal.org/project/dropzonejs">https://www.drupal.org/project/dropzonejs</a> </li>
<li>Creating and editing media items</li>
<li>Selection display - reordering, removal</li>
</ul>
</section>
<section data-background="resources/converted/eb_configure_multistep.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Using advanced EB for uploading multiple images + adding video + reordering</aside>
</section>
<section data-background="resources/converted/eb_multistep_workflow.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">Using advanced EB for uploading multiple images + adding video + reordering</aside>
</section>
<section data-background="resources/gifs/mind_blown.gif" data-state="logo-position-hidden">
<aside class="notes">Mind = blown.</aside>
</section>
<section data-state="logo-position-normal">
<h1>Embedding media</h1>
<aside class="notes">
<ul>
<li>Drupal 8 has made a big step from Drupal 7 and included the CKEditor WYSIWYG library in core. It also comes with an easy-to-use tool to embed local images in your text. </li>
<li>But what if the content you want to embed is not an image?</li>
</ul>
</aside>
</section>
<section data-state="logo-position-hidden">
<img src="lib/img/embedded-captcha.png" style="box-shadow: none;"/>
<p style="font-size: 18px; color: grey;">Source: <a href="https://www.nytimes.com">https://www.nytimes.com</a></p>
<aside class="notes">
I am sure you have come across something like this before:
</aside>
</section>
<!-- TODO: EMBED SLIKA TWEETA al FB posta -->
<section data-state="logo-position-hidden">
<img src="lib/img/embedded-tweet.png" style="box-shadow: none;"/>
<p style="font-size: 18px; color: grey;">Source: <a href="https://www.nytimes.com">https://www.nytimes.com</a></p>
<aside class="notes">
<ul>
<li>
Or maybe something like this:
</li>
<li>
These are all examples of non-image media assets that needed to be embedded as well.
</li>
</ul>
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Entity embed</h1>
<p>"The Entity Embed module allows any Drupal entity to be embedded within a text area using a WYSIWYG editor."</p>
<!--<ul>-->
<!--<li>Idea behind Entity embed</li>-->
<!--<li>-->
<!--<ul>-->
<!--<li>Built on top of core’s approach (same principles)</li>-->
<!--<li>Text filters</li>-->
<!--</ul>-->
<!--</li>-->
<!--<li>Embed any entity</li>-->
<!--</ul>-->
<aside class="notes">
<ul>
<li>
This is where the Entity Embed module comes into play. By extending the foundation established by Drupal core, this module has become a standardized solution for embedding any entity or remote URL content in a WYSIWYG editor in Drupal 8.
</li>
</ul>
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Embed anything</h1>
<ul>
<li>Video</li>
<li>Related article (node)</li>
<li>List of related articles (Taxonomy)</li>
<li>Related product (Commerce product)</li>
<li>Discussion thread (Comment)</li>
<li>...</li>
</ul>
<aside class="notes">
<ul>
<li>The module doesn't care what you embed, as long as that piece of content is stored in Drupal as a standard entity.</li>
<li>In other words, you can embed nodes, taxonomy terms, comments, users, profiles, forms, media entities, etc. all in the same way and using a standard workflow.</li>
</ul>
</aside>
</section>
<!-- Configure embed button -->
<section data-background="resources/converted/configure_embed_button.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">
Let’s see it in action.
1.) After downloading and installing the Entity Embed module and its dependencies, navigate to Configuration -> Content Authoring -> Text editor embed buttons and click on Add embed button <br />
2.) Already one button created for embedding nodes<br />
3.) In our example we’re creating a button to embed images and videos, let’s call it Multimedia.<br />
4.) We will be using an entity browser to upload and reuse images, so we select that one.<br />
5.) TIP: create new embed icon for every embed button
</aside>
</section>
<!-- Configure input filter -->
<section data-background="resources/converted/configure_text_format.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">
6.) Now let’s navigate to the text editors screen and add our newly created button to the toolbar.<br />
7.) Make sure to mark the checkbox “Display embedded entities”<br />
8.) And also make sure that the special tags are whitelisted in the Allowed HTML tags area<br />
9.) What happens behind the scenes is that every image or video that we embed with the Entity Embed module gets converted to an entity of this type, with the corresponding attributes<br />
10.) TIP 1: add alt and title to the attributes in the whitelist<br />
11.) TIP 2: Make sure "Display embedded entities" is below "Restrict images om this site".
</aside>
</section>
<!-- Add new video to the post -->
<section data-background="resources/converted/embed_video.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">
11.) With this we are all set. Your editors can now navigate to any content form that uses the “Basic HTML” text format and start using the button, for example we can embed an image to an Article node<br />
12.) After clicking the Multimedia embed button we are prompted with some options, where we can choose how we want to display and align the image.<br />
</aside>
</section>
<section data-background="resources/gifs/grumpy-cat.gif" data-state="logo-position-hidden">
<h2 style="color: white;">Getting there...</h2>
<aside class="notes">
That's great, we're getting there. Just one more thing to show...
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Image cropping</h1>
<aside class="notes">
And that is... how we handle image cropping.
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Crop API</h1>
<ul>
<li>Storage for all cropping solutions</li>
<li>Handling crops based on:
<ul>
<li>Region - storing a crop area</li>
<li>Reference point</li>
</ul>
</li>
</ul>
<aside class="notes">
<ul>
<li>The Crop API provides storage for “hopefully” all cropping solutions. It is able to handle crops based on region and reference point concepts.</li>
<li>For the first one we use the Image widget Crop, and for the reference point we use the Focal point module.</li>
</ul>
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Image widget crop</h1>
<ul>
<li>Specify exact crop region</li>
<li>Manual - It’s a field widget</li>
<li>Many crops → more work</li>
</ul>
<aside class="notes">
<ul>
<li>Provides a new image field widget that allows you to specify an exact crop region.</li>
<li>Because it's a field widget it means it involves manual work, so if you want to define many crop types, you need to do that manually... This of course means more work for the editor.</li>
</ul>
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Focal point</h1>
<ul>
<li>Crop around a selected point</li>
<li>Semi-Automatic</li>
</ul>
<aside class="notes">
With focal point you want to say: this is the part of the image that has the most information - the part of the image I really want to be the center of the cropped version. And drupal then makes sure that that part of the image remains visible in the cropped version.
</aside>
</section>
<!-- TODO: CROPPING DEMO -->
<section data-background="resources/converted/crop_configure_crop_type_2.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">
<ul>
<li>First we need to create a new crop type and set the soft and the hard limits.</li>
<li>Soft limits...</li>
<li>Hard limits...</li>
</ul>
</aside>
</section>
<section data-background="resources/converted/crop_add_to_image_style.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">
Add crop action to the image style.
</aside>
</section>
<section data-background="resources/converted/crop_configure_crop_widget.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">
Add crop widget to image media type.
</aside>
</section>
<section data-background="resources/converted/crop_crop_image.gif" data-background-interactive data-state="logo-position-hidden">
<aside class="notes">
<ul>
<li>Finally we can add a cropped image to article.</li>
<li>We see that we reached the soft and hard limits now and that the cropping is not possible for this size.</li>
<li>We can still crop an image if we get a warning that we passed the soft limits, but we can still save it.</li>
</ul>
</aside>
</section>
<section data-state="logo-position-normal">
<h1>Resources</h1>
<ul>
<li><a href="http://www.drupalmedia.org/">http://www.drupalmedia.org</a></li>
<li><a href="https://drupal-media.gitbooks.io/drupal8-guide">https://drupal-media.gitbooks.io/drupal8-guide</a></li>
<li>IRC: #drupal-media @freenode</li>
<li><a href="https://www.webwash.net/manage-media-assets-drupal-8">https://www.webwash.net/manage-media-assets-drupal-8</a></li>
<li><a href="https://github.com/paranojik/media_starter">https://github.com/paranojik/media_starter</a> (install media_starter profile)</li>
</ul>
</section>
<section data-state="logo-position-normal">
<h1>Distributions</h1>
<div class="distributions">
<div class="lighthing">
<img data-src="resources/lightning.png" height="120px">
<br />
Lightning
<br />
<a href="https://lightning.acquia.com/">https://lightning.acquia.com/</a>
</div>
<div class="thunder">
<img data-src="resources/thunder-logo.png" height="120px">
<br />
Thunder
<br />
<a href="https://thunder.org/">https://thunder.org/</a>
</div>
</div>
</section>
<section data-state="logo-position-normal">
<h3>Media team - #mediaintiative</h3>
<ul class="media-team">
<li>
<img data-src="resources/media_team/-CDtrrxc_400x400.jpg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>SeanB</small>
</li>
<li>
<img data-src="resources/media_team/christian.jpeg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>chr.fritsch</small>
</li>
<li>
<img data-src="resources/media_team/adam.jpeg" alt="headshot" class="headshot" width="120px" height="v">
<br />
<small>phenaproxima</small>
</li>
<li>
<img data-src="resources/media_team/daniel.jpg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>dawehner</small>
</li>
<li>
<img data-src="resources/media_team/dave.jpeg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>davereid</small>
</li>
<li>
<img data-src="resources/media_team/devin.jpeg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>devincarlson</small>
</li>
<li>
<img data-src="resources/media_team/florian.jpg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>webflo</small>
</li>
<li>
<img data-src="resources/media_team/gabor-hojtsy_1.png" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>gabor-hojtsy</small>
</li>
<li>
<img data-src="resources/media_team/janez_1.jpeg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>slashrsm</small>
</li>
<li>
<img data-src="resources/media_team/laszlo.jpg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>boobaa</small>
</li>
<li>
<img data-src="resources/media_team/marcus.jpg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>marcoscano</small>
</li>
<li>
<img data-src="resources/media_team/miro-dietiker-rx-bw-half.jpg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>miro_dietiker</small>
</li>
<li>
<img data-src="resources/media_team/mladen.jpg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>mtodor</small>
</li>
<li>
<img data-src="resources/media_team/primoz.jpg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>primsi</small>
</li>
<li>
<img data-src="resources/media_team/webchick.jpg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>webchick</small>
</li>
<li>
<img data-src="resources/media_team/xjm.jpeg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>xjm</small>
</li>
<li>
<img data-src="resources/media_team/sam.jpg" alt="headshot" class="headshot" width="120px" height="120px">
<br />
<small>samuel.mortenson</small>
</li>
</ul>
<h3>Cheer!</h3>
</section>
<section data-background="resources/dexmedia.jpg" data-background-color="#000">
</section>
<section data-background="lib/dcon-closing.jpg" class="dcon-slide" data-state="logo-position-closing">
<h1>JOIN US FOR CONTRIBUTION SPRINT</h1>
<h2>Friday, 29 September, 2017</h2>
<table style="text-align: center" class="dcon-blue-color">
<tr>
<td><h3>Mentored Core Sprint</h3>
<span>
9:00-18:00<br />
Room: Stolz 2
</span>
</td>
<td><h3>First time Sprinter Workshop</h3>
<span>
99:00-12:00<br />
Room: Lehar 1 - Lehar 2
</span>
</td>
<td><h3>General Sprint</h3>
<span>
9:00-18:00<br />
Room: Mall
</span>
</td>
</tr>
</table>
<br />
<span style="font-size: 1.3em" class="dcon-gold-color">#drupalsprints</span>
</section>
<section data-background="lib/dcon-thank-you.jpg" class="dcon-slide" data-state="logo-position-thankyou">
<h1>WHAT DID YOU THINK?</h1><br />
<p>
Locate this session at the DrupalCon Vienna website:<br />
<a href="http://vienna2017.drupal.org/schedule">http://vienna2017.drupal.org/schedule</a><br />
<br />
Take the survey!<br />
<a href="https://www.surveymonkey.com/r/drupalconvienna">https://www.surveymonkey.com/r/drupalconvienna</a><br />
<br />
<br />
<br />
<br />
</p>
</section>
</div>
</div>
<div id="footer" class="footer logo-position-title">
<a href="https://www.amazeelabs.com"><div class="logo" style="width: 100px; float: left; margin-left: 20px;"><img src="lib/logo.png" style="width: 100%;"></div></a>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
width: 1440,
height: 810,
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Factor of the display size that should remain empty around the content
margin: 0.1,
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
Reveal.addEventListener('logo-position-title', function() {
document.getElementById( 'footer' ).setAttribute('class', 'footer logo-position-title');
}, false );
Reveal.addEventListener('logo-position-hidden', function() {
document.getElementById( 'footer' ).setAttribute('class', 'footer logo-position-hidden');
}, false );
Reveal.addEventListener('logo-position-normal', function() {
document.getElementById( 'footer' ).setAttribute('class', 'footer logo-position-normal');
}, false );
Reveal.addEventListener('logo-position-closing', function() {
document.getElementById( 'footer' ).setAttribute('class', 'footer logo-position-closing');
}, false );
Reveal.addEventListener('logo-position-thankyou', function() {
document.getElementById( 'footer' ).setAttribute('class', 'footer logo-position-thankyou');
}, false );
</script>
</body>
</html>