Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

My Wife's Website

320 views

Published on

A look at the challenges encountered while making a website from an existing template with TYPO3 v8. Some useful new features are also mentioned and a quick look into custom code to make things easy for the editor.

Published in: Software
  • Be the first to comment

  • Be the first to like this

My Wife's Website

  1. 1. MY WIFE’S WEBSITE Jigal van Hemert jigal.van.hemert@typo3.org @jigalvh A look at building a website
  2. 2. 15/07/2017 My wife’s website 2
  3. 3. GOAL 15/07/2017 My wife’s website 3
  4. 4. SITEPACKAGE CONCEPT All configuration in an extension 15/07/2017 My wife’s website 4
  5. 5. SITEPACKAGE  TypoScript, TSconfig  BE layouts, Fluid templates  ViewHelpers  DataProcessors 15/07/2017 My wife’s website 5
  6. 6. EXISTING TEMPLATE Let’s be modern and use bootstrap 15/07/2017 My wife’s website 6
  7. 7. ... 15/07/2017 My wife’s website 7
  8. 8. COMPLEX CONDITIONS <f.spaceless> to the rescue 15/07/2017 My wife’s website 8
  9. 9. COMPLEX CONDITIONS <f:spaceless> <f:if condition="{0: hasMenu, 1: count} == {0: 1, 1: 2}"><f:then>4</f:then></f:if> <f:if condition="{0: hasMenu, 1: count} == {0: 1, 1: 3}"><f:then>3</f:then></f:if> <f:if condition="{0: hasMenu, 1: count} == {0: 1, 1: 4}"><f:then>2</f:then></f:if> <f:if condition="{0: hasMenu, 1: count} == {0: 0, 1: 2}"><f:then>6</f:then></f:if> <f:if condition="{0: hasMenu, 1: count} == {0: 0, 1: 3}"><f:then>4</f:then></f:if> <f:if condition="{0: hasMenu, 1: count} == {0: 0, 1: 4}"><f:then>3</f:then></f:if> </f:spaceless> 15/07/2017 My wife’s website 9
  10. 10. COMPLEX CONDITIONS <div class="col-md-{f:render( partial:'Helpers/bootstrapCol', arguments:'{hasMenu: hasMenu, count: cols}' )}"> 15/07/2017 My wife’s website 10
  11. 11. AUTOCOMPLETE & CLEAN-UP Namespaces for IDE 15/07/2017 My wife’s website 11
  12. 12. AUTOCOMPLETE & CLEAN-UP <html xmlns:f="https://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true"> … </html> 15/07/2017 My wife’s website 12
  13. 13. AUTOCOMPLETE & CLEAN-UP  xmlns: for auto-complete in IDE  data-attribute to remove tag 15/07/2017 My wife’s website 13
  14. 14. DROP-IN PARTIAL Cleaner template structure 15/07/2017 My wife’s website 14
  15. 15. FLUIDCONTENT TEMPLATE STRUCTURE  No HeaderContentFooter.hml  Instead: –DropIn/Before/All.html –DropIn/After/All.html 15/07/2017 My wife’s website 15
  16. 16. TABLE CONTENT ELEMENT??? Old things looking new 15/07/2017 My wife’s website 16
  17. 17. TABLE CONTENT ELEMENT  Simple interface  No markup in cells  Responsive output 15/07/2017 My wife’s website 17
  18. 18. DEFAULT CONTENT No empty pages 15/07/2017 My wife’s website 18
  19. 19. lib.content0 < styles.content.get lib.content0.stdWrap.ifEmpty = <section><div class="container"><div class="row"><div class="col-md-12 text- center"><h2>Under Construction</h2> <p>Content will be added shortly</p> </div></div></div></section> DEFAULT CONTENT 15/07/2017 My wife’s website 19
  20. 20. MEGA MENU WITH BREAKS Also as hamburger menu 15/07/2017 My wife’s website 20
  21. 21. MEGA MENU  Normal HMENU  SPC as column separator  Use field media to trigger mega-menu  Pid field to check for third level 15/07/2017 My wife’s website 21
  22. 22. GALLERY CE Gallery from folder 15/07/2017 My wife’s website 22
  23. 23. GALLERY CONTENT ELEMENT  FlexForm DataProcessor  SPC as column separator  Use field media to trigger mega-menu  Pid field to check for third level 15/07/2017 My wife’s website 23
  24. 24. GALLERY CONTENT ELEMENT DataProcessing { 10 = jigalnoytcbDataProcessingFlexFormProcessor 10 { as = flexformData } 20 = jigalnoytcbDataProcessingFilesProcessor 20 { foldersProcessedDataKey = flexformData|folder sorting = name copyProcessedDataToData = flexformData|imagecols as = files } 30 = TYPO3CMSFrontendDataProcessingGalleryProcessor 30 { filesProcessedDataKey = files maxGalleryWidth = 1500 as = gallery } } 15/07/2017 My wife’s website 24
  25. 25. GALLERY CONTENT ELEMENT settings.media.popup.linkParams.ATagParams.dataWrap = class="{$styles.content.textmedia.linkWrap.lightboxCss Class}" data- toggle="{$styles.content.textmedia.linkWrap.lightboxTo ggleAttribute}" data-gallery="gallery" data- title="{column.media.title}" data- footer="{column.media.description}" 15/07/2017 My wife’s website 25
  26. 26. DISCUSSION 15/07/2017 My wife’s website 26
  27. 27. THANK YOU! 15/07/2017 My wife’s website 27

×