Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity...
Transcript of Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity...
![Page 1: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/1.jpg)
Jan Lemmens
Front-end page compositionwith Geysir
![Page 2: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/2.jpg)
![Page 3: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/3.jpg)
![Page 4: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/4.jpg)
![Page 5: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/5.jpg)
technicalwebmaster
marketingteams
![Page 6: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/6.jpg)
consumerization of IT
![Page 7: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/7.jpg)
consumerization of CMS’s
![Page 8: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/8.jpg)
enterprises need specific tools
high volumes of content and media
repeating tasks
specialized data structures
(distributed) editorial teams
![Page 9: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/9.jpg)
page buildingcritical task for web authors
![Page 10: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/10.jpg)
web page quality
1. accessible2. tells a story3. fast4. consistent5. easy to manage
![Page 11: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/11.jpg)
![Page 12: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/12.jpg)
template full rich text
![Page 13: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/13.jpg)
graphics by ZURB
123
456
accessible
tells a story
fast
consistent
template approach
Page consists of a fixed number of elements with
a fixed order.
easy to manage
![Page 14: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/14.jpg)
RIGID
![Page 15: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/15.jpg)
1
graphics by ZURB
full rich text approach
1 single rich text editor to manage entire page.
accessible
tells a story
fast
consistent
easy to manage
![Page 16: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/16.jpg)
FLEXIBLE
![Page 17: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/17.jpg)
structure flexibility
![Page 18: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/18.jpg)
![Page 19: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/19.jpg)
![Page 20: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/20.jpg)
the “components” approach
![Page 21: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/21.jpg)
![Page 22: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/22.jpg)
⁋ well-maintained
supports revisions
flexible
robust
![Page 23: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/23.jpg)
graphics by ZURB
components approach
Page consists of a variable number of elements with a variable order,
each having its own template.
accessible
tells a story
fast
consistent
easy to manage
![Page 24: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/24.jpg)
![Page 25: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/25.jpg)
frontend/backend switching
hard to preview
search corresponding component in backend
reordering problems
meta data is mixed with content
![Page 26: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/26.jpg)
the back end is not the solution
![Page 27: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/27.jpg)
Entity Reference Revisions
Paragraphs
Drupal 8 core
?
![Page 28: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/28.jpg)
Paragraphs + Quick EditNot compatible with Paragraphs for now
(https://www.drupal.org/project/paragraphs/issues/2476863)
Can not insert/delete/reorder Paragraphs
![Page 29: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/29.jpg)
GeysirEnhance the editorial workflow to improve the author experience
https://www.drupal.org/project/geysir
![Page 30: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/30.jpg)
goals
much faster content management
instant and accurate previews
easy to use
super lightweight
![Page 31: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/31.jpg)
![Page 32: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/32.jpg)
support for revisions and workflow
switch betweenpublished and draft version
![Page 33: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/33.jpg)
Mobile content editing using Geysir
![Page 34: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/34.jpg)
AMPLEXOR | 34
DemoQuickly make a correction to a page
Build a new page from scratch
Use workflow
![Page 35: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/35.jpg)
AMPLEXOR | 35
DemoDrupal 8.6.0 with Umami install profile
Entity Reference Revisions 8.x-1.5
Paragraphs 8.x-1.3
Geysir 8.x-1.x-dev
![Page 36: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/36.jpg)
in the front-end
immediate previews
simple actions per component
supports versioning
touch-friendly
content creation with Geysir
![Page 37: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/37.jpg)
every action is saved to the database
less risk of losing work
”auto-save” for free !
content creation with Geysir
![Page 38: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/38.jpg)
back end for metadata, front end for content
content creation with Geysir
![Page 39: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/39.jpg)
technical aspectsbuilds upon proven contributed modules
using Paragraphs API
Geysir forms extend core ContentEntityForm
new template for Paragraph fields
extensive use of Core Modal API
no custom data storage
no dependencies
![Page 40: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/40.jpg)
GeysirNew release (10 September 2018)
Geysir 1.1
https://www.drupal.org/project/geysir
![Page 41: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/41.jpg)
how to use?
just install the Geysir module on an (existing) site
available immediately for all Paragraph fields
tip: take into account during development
![Page 42: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/42.jpg)
future features
ability to restrict Geysir functionality to certain paragraph fields
add a trigger in the front end to enable the Geysir UI
support for nested paragraphs
https://www.drupal.org/project/issues/geysir
![Page 43: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/43.jpg)
related solutions
![Page 44: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/44.jpg)
![Page 45: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/45.jpg)
![Page 46: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/46.jpg)
![Page 47: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/47.jpg)
care about the author experience
productivity and ease of use are key
![Page 48: Front-end page composition with Geysir - Drupal …...Drupal 8.6.0 with Umami install profile Entity Reference Revisions 8.x-1.5 Paragraphs 8.x-1.3 Geysir 8.x-1.x-dev in the front-end](https://reader030.fdocuments.in/reader030/viewer/2022041111/5f1120322b83bf29922cb9a6/html5/thumbnails/48.jpg)
Enjoy the rest of the conference!
Jan LemmensDXM Presales Consultant
[email protected]://drupal.org/u/vollepeer
@vollepeer