Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

My Wife's Website

342 vues

Publié le

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.

Publié dans : Logiciels
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×