Benjamin Kott Front-end Developer at TeamWFP Member of the TYPO3 UX Team Düsseldorf, Germany facebook.com/benjamin.kott twitter.com/benjaminkott github.com/benjaminkott bk2k.info THE ANATOMY OF SITEPACKAGES 2
Benjamin Kott Front-end Developer at TeamWFP Member of the TYPO3 UX Team Düsseldorf, Germany facebook.com/benjamin.kott twitter.com/benjaminkott github.com/benjaminkott bk2k.info THE ANATOMY OF SITEPACKAGES 3 That is Dave. Dave is Frank Näglers personal Minion. Every time Frank commits bullshit to the TYPO3 Core, it was Dave. Dave really, really wanted to be part of this presentation.
Different names for the same @!?#&%§ shit. Base Extension Template Extension Sitepackage Site Foundation Distribution* … 8 THE ANATOMY OF SITEPACKAGES * A Distribution normally contains a pre-set of pages and assets, in this case we will not make use of it. It´s listed for sake of completeness.
Your configuration files are indexed by FAL. All files you upload into the fileadmin are automatically indexed from the file abstraction layer if not disabled. Lots of totally useless records that should not be there at any point. 11 THE ANATOMY OF SITEPACKAGES
FAL records are not updated if files are uploaded via FTP. The only way FAL recognizes file changes or deletions is if they are done using the backend or the API directly. Files that are changed outside can cause fatal error, if this file is referenced and deleted via FTP. 12 THE ANATOMY OF SITEPACKAGES
Fileadmin is userspace. Files within the fileadmin directory are edited and maintained by an editor who usually does not have the knowledge to so it properly. It´s better to protect the editor from accidentally breaking a part of the internet. 14 THE ANATOMY OF SITEPACKAGES
Configurations should be in your version control. Having the configuration files in the fileadmin is a strong indicator for missing version control. We should talk about that… 15 THE ANATOMY OF SITEPACKAGES
You are not able to handle Extension dependencies. Without dependency management you have no idea which extensions and which version is needed to maintain a running website. 17 THE ANATOMY OF SITEPACKAGES
Dependencies The Extension Manager is your friend. 18 THE ANATOMY OF SITEPACKAGES For example sitepackage extension could require Bootstrap Package, News & Seo Basics in the newest available version on installation.
Your TypoScript Setup and Constants are saved in the template record. The setup and constant field of a template record is the last possibility to override the TypoScript configuration of your TYPO3 page within that record. 19 THE ANATOMY OF SITEPACKAGES
20 THE ANATOMY OF SITEPACKAGES Template Record Static template sorting. Instead of putting your setup and constants directly in the template record or include it there its more easy to make use of Static Templates. General Options Includes Access Template Include static (from extensions) CSS Styled Content (css_styled_content) Selected Items Available Items Bootstrap Package (bootstrap_package) Example Package (example_package) General Options Includes Access Template Constants
Your configuration is @!?#&%§ public accessible. Most users that put their configuration files in the fileadmin folder, forget to protect it from external access. Want so see how not to do it? Bing „fileadmin setup.txt“ or „fileadmin setup.ts“ 21 THE ANATOMY OF SITEPACKAGES
Facts Config files editable through file module Config files not accessible by editors Config files are protected * Autoload PageTS Autoload TypoScript Static TypoScript Template Dependency Management Distrubution through TER possible Deployment through Extension Manager Clean Version Control possible Sitepackage 27 THE ANATOMY OF SITEPACKAGES Fileadmin * Possible but not common practice
Documentation docs.typo3.org/typo3cms/CoreApiReference/ExtensionArchitecture/Documentation/I ndex.html Call for help! [email protected] twitter.com/T3docTeam Documentation is hard and we are all really bad in this. It helps you to remember and others to understand what and how things work. 33 THE ANATOMY OF SITEPACKAGES
Initialisation Files Images Example_1.png Example_2.jpg Example_3.txt data.t3d Files added here, they will be copied to fileadmin/extension/ during installation Export of your database it will be imported at page root level during installation 34 THE ANATOMY OF SITEPACKAGES
Resources Private Languages Layouts Partials Templates .htaccess Public Css Images JavaScript Private protected files XLIFF/XML files for localized labels Main layouts for the views Partial templates for repetitive use Templates for the views Protect your stuff! Public accessible files Any CSS file used by the extension Any images used by the extension Any JS file used by the extension 35 THE ANATOMY OF SITEPACKAGES
Example Package Just enough to get the party starting. Extension Dependency to CSS Styled Content Basic TypoScript Basic PageTS Fluid Template CSS file JavaScript file 37 THE ANATOMY OF SITEPACKAGES
typo3conf/ext/example_package Head to the directory and create a folder with a name of your choice like „example_package“. This will be the container of your sitepackage and also your extension key. 38 THE ANATOMY OF SITEPACKAGES Extension Directory Your Extension
ext_emconf.php $EM_CONF[$_EXTKEY] = array( 'title' => 'Example Package', 'description' => '', 'category' => 'templates', 'version' => '1.0.0', 'state' => 'stable', 'clearcacheonload' => 1, 'author' => 'Benjamin Kott', 'author_email' => '[email protected]', 'author_company' => '', 'constraints' => array( 'depends' => array( 'typo3' => '6.2.12-7.99.99', 'css_styled_content' => '6.2.0-7.99.99', ), 'conflicts' => array( 'fluidpages' => '*', 'themes' => '*', ), ), ); Title A title for your extension. Category Type of category the extension should be listed in. Use template for general usage and distribution for a listing in the distributions section. Dependencies Additional Extensions, for example like a news extension or a specific core version. Conflicts Known issues with other extensions can be placed here to avoid that these extension are running parallel in your system. 40 THE ANATOMY OF SITEPACKAGES typo3conf / ext / example_package
ext_localconf.php if (!defined('TYPO3_MODE')) { die('Access denied.'); } \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig( '' ); 42 THE ANATOMY OF SITEPACKAGES Add PageTS by default* * You should really know what you are doing before adding global PageTS. After adding its set for all Websites in your TYPO3 instance. typo3conf / ext / example_package
ext_tables.php if (!defined('TYPO3_MODE')) { die('Access denied.'); } \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile( $_EXTKEY, // Extension Key 'Configuration/TypoScript', // Path to setup.txt and constants.txt 'Example Package' // Title in the selector box ); 43 THE ANATOMY OF SITEPACKAGES Add static template to the template record General Options Includes Access Template Include static (from extensions) Example Package (example_package) CSS Styled Content (css_styled_content) Bootstrap Package (bootstrap_package) Selected Items Available Items typo3conf / ext / example_package
TCEFORM.txt ## TCEFORM TCEFORM { pages { layout.disabled = 1 } tt_content { // NOBODY wants or should edit this // really, let them disappear table_bgColor.disabled = 1 table_border.disabled = 1 table_cellspacing.disabled = 1 table_cellpadding.disabled = 1 pi_flexform.table.sDEF { acctables_nostyles.disabled = 1 acctables_tableclass.disabled = 1 } } } 45 THE ANATOMY OF SITEPACKAGES typo3conf / ext / example_package / Configuration / PageTS You should really know what you are doing before adding global PageTS like in this example. After adding its set for all Websites in your TYPO3 instance. See ext_localconf.php as example how to add PageTS globally.
47 THE ANATOMY OF SITEPACKAGES typo3conf / ext / example_package / Configuration / TypoScript Load the needed TypoScript from dependant extensions to avoid sorting of static tempates in the template record. To avoid unnecessary work we are depending css_styled_content for the content rendering in this example.
setup.txt ## PAGE – Part 2 page { includeCSS { main = EXT:example_package/Resources/Public/Css/main.css } includeJSFooterlibs { main = EXT:example_package/Resources/Public/JavaScript/main.js } } 50 THE ANATOMY OF SITEPACKAGES typo3conf / ext / example_package / Configuration / TypoScript Include CSS and JavaScript files with the EXT: notation from the extension directory.
benjaminkott
pyama86
ivargrimstad
shioyama
m_seki
punchdrunker
gishi_yama
naokimrmt
track3jyo
little_rubyist
katsyoshi
koic
ksudate
colly
eileencodes
searls
jcasabona
morganepeng
eitanlees
bluesmoon
mojombo
lynnandtonic
jmmastey
hatefulcrawdad
sachag