Recommended
More Related Content
More from Jigal van Hemert
Recently uploaded
Recently uploaded (20)
My Wife's Website
- 1. MY WIFE’S WEBSITE Jigal van Hemert jigal.van.hemert@typo3.org @jigalvh A look at building a website
- 2. 15/07/2017 My wife’s website 2
- 3. GOAL 15/07/2017 My wife’s website 3
- 4. SITEPACKAGE CONCEPT All configuration in an extension 15/07/2017 My wife’s website 4
- 5. SITEPACKAGE TypoScript, TSconfig BE layouts, Fluid templates ViewHelpers DataProcessors 15/07/2017 My wife’s website 5
- 6. EXISTING TEMPLATE Let’s be modern and use bootstrap 15/07/2017 My wife’s website 6
- 7. ... 15/07/2017 My wife’s website 7
- 8. COMPLEX CONDITIONS <f.spaceless> to the rescue 15/07/2017 My wife’s website 8
- 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. 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. AUTOCOMPLETE & CLEAN-UP Namespaces for IDE 15/07/2017 My wife’s website 11
- 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. AUTOCOMPLETE & CLEAN-UP xmlns: for auto-complete in IDE data-attribute to remove tag 15/07/2017 My wife’s website 13
- 14. DROP-IN PARTIAL Cleaner template structure 15/07/2017 My wife’s website 14
- 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. TABLE CONTENT ELEMENT??? Old things looking new 15/07/2017 My wife’s website 16
- 17. TABLE CONTENT ELEMENT Simple interface No markup in cells Responsive output 15/07/2017 My wife’s website 17
- 18. DEFAULT CONTENT No empty pages 15/07/2017 My wife’s website 18
- 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. MEGA MENU WITH BREAKS Also as hamburger menu 15/07/2017 My wife’s website 20
- 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. GALLERY CE Gallery from folder 15/07/2017 My wife’s website 22
- 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. 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. 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. DISCUSSION 15/07/2017 My wife’s website 26
- 27. THANK YOU! 15/07/2017 My wife’s website 27