[Wanted] Official TYPO3 Templates Builder Since 20 Years!

[Wanted] Official TYPO3 Templates Builder Since 20 Years!

TYPO3 is truly an amazing OpenSource CMS with more than 9998+ backend features, no other CMS have such numerous features in their CMS-core. Feeling proud of the TYPO3 Community. BUT, one thing is missing, the official and common way to develop the TYPO3 Templates Builder system. Let’s discuss and dream about it!

At last TYPO3 Developer days 2019 at Karlsruhe, Germany, I got a chance to deliver a talk on this topic regarding how can we make the TYPO3 Templates Management System.

Fortunately, I got good feedback and appreciation from the lovely TYPO3 audience, especially for the Parent/Child TYPO3 Templates Framework.

Checkout slides at Ideal TYPO3 Templates Manager also you can Watch Video Session too.

Surprisingly, we found more people are interested in TYPO3 templates, Checkout below analytics report of T3Terminal.

T3Terminal’s Marketplace have premium TYPO3 templates, so our team is working hard to provide best quality of TYPO3 templates for best usability to end-customers with robust technical solution.

Take a cup of coffee, Let’s start the brainstorming of TYPO3 templating!

Is TYPO3 Feature-rich CMS without the Templates Builder Module?

Source

At last T3DD19, at Key-notes Benni Mack said: TYPO3 is almost feature-rich CMS. I respect Benni for his epic work in the TYPO3 Community, not would like to criticize.

But, One thing has always been on my mind, One of the biggest feature TYPO3 Templates Builder Module is still missing, so IMHO TYPO3 is still not feature-rich yet ;)

Unfortunately, even after 20 years in the history of TYPO3, we don’t have official and common standards for the TYPO3 Templates or Theme Builder.

IMHO, We should try to outline the common and global standards to develop any TYPO3 project’s templates, content elements, etc.

The world’s most popular CMS considered having such basic template management backend tools since their initiation of CMS eg., WordPress, Joomla, etc. Because templates are one of the parts of any CMS. Check out how people like Templates for TYPO3 CMS.

Did you remember TemplaVoila pandemic? Lots of TYPO3 instances was not able to update due to the lack of compatibility. (of course, we respect whatever given best by TemplaVoila guys to the community).

And, Why is such basic TYPO3 Templates Management missing? What do you think?

Because, Since the beginning of the TYPO3 core and community, people have not thought more of TYPO3 templates, and more focus on other important features like rich content, user access, and roles, workspaces, install tool etc., And that’s completely fine, but now it’s time to make it happen.

Please don’t get me wrong, I’m not saying nothing has been developed for TYPO3 templates development. There are cool things like Backend layouts, Can add custom content elements, etc.,

My major concern, TYPO3 does not have a common templating method, configuration, and code structure, smoother automatic page tree import etc., We can try to centralize everything and make it simple for TYPO3 integrators and developers to avoid dependencies of third-party TYPO3 extensions.

And, maybe someday, we will have a separate dedicated TYPO3 backend module called “Template Manager” :)

Is TYPO3 only for Enterprise-Level Websites?

Source

Is TYPO3 “only” for Enterprise-level Websites? What’s your thought?

Nope!

When it comes to Market share, there are always debates about CMS-level. TYPO3 is mostly promoted as “Enterprise Level CMS”. And such enterprise-level CMS doesn’t require such templating stuff ;)

Think about this, a CMS like WordPress-core does not have the full potential to create an enterprise-level website BUT mostly using 3rd party solutions they did it well for Enterprise to Fortune 500 companies.

Then, Why TYPO3 as an Enterprise level CMS can not do Small to Medium level websites? Yes, it can be achieved without any doubts.

It’s time, TYPO3 should take a good piece of CMS Marketshare, and moreover, TYPO3 holds the extreme potential.

TYPO3 is a great OpenSource CMS, there are good opportunities to spread it for Small to Medium to Enterprise level websites.

Explore TYPO3 CMS Market Research

What are some most popular TYPO3 Templates Builders?

Many TYPO3 enthusiastic people worked very hard and developed ways to create TYPO3 templates, custom or flexible content elements, etc., We really appreciate all of their dedicated work to the TYPO3 Community.

Here is the list of popular TYPO3 templates methods.

Gridelements

Team Gridelements developed cool drag-n-drop grids, This extension integrates the grid layout concept also to regular content elements - the grid elements. It offers a lot of new features like advanced drag & drop or real references, that improve the usability of the page and list module to speed up the daily work with the backend.

FluidTYPO3.org

Claus Due, The TYPO3 Fluid man developed and maintaining, Fluid Powered TYPO3 is a family of TYPO3 extensions designed to boost productivity and flexibility when creating CMS templates.

Mask

Gernot Ploiner, The TYPO3 Mask man, Create your own content elements and page templates. Easy to use, even without programming skills because of the comfortable drag and drop system. Stored in structured database tables. Style your frontend with Fluid tags. Ideal, if you want to switch from Templavoila.

DCE

Armin Vieweg, One of the great TYPO3 contributor developed DCE, Best Flexform based content elements since 2012. With the TCA mapping feature, simple backend view, and many more features which makes it super easy to create own content element types.

Bootstrap Package

Benjamin the TYPO3 man developed Bootstrap Package, To deliver a fully configured frontend theme for TYPO3, based on the Bootstrap CSS Framework.

There are other third-party TYPO3 extensions, You can explore at TER.

Which one is your favorite TYPO3 templating ways? and why? Write down the comment section below, I'll be happy to know about it.

2016: TYPO3 Poll on Templating Method

2020: TYPO3 Poll on Ways of TYPO3 Templates

Explore https://www.facebook.com/groups/typo3/permalink/3180686458645987/

From the above TYPO3 survey, you can see how many variances of TYPO3 Templates are in use.

You can visualize there are too many TYPO3 templating methods that have been used for individual choice (and of course based on their needs and flexibility of people).

In both surveys, One thing is clear that more people choosed, Pure TYPO3 Extbase/Fluid, People really liked to go with TYPO3 core-ways without depending on third-party TYPO3 extensions.

Read more at Best Practice for TYPO3 Templates Integration.

Why TYPO3 Templates Management Needs?

As a TYPO3 Marketer,
The simple answer is to get a better piece of CMS Marketshare which TYPO3 deserves for a long time, by developing and publishing premium products at TYPO3 Marketplace.

As a TYPO3 Developer or Integrator,
If we get the official defined way to develop TYPO3 templates, The best answer is to have a common TYPO3 templating method in all TYPO3 projects. In that way, we can have hassle-free future TYPO3 updates, don’t need to depend on third-party TYPO3 extensions, common coding standards, easy to maintain and benefits list go on!

If you analyze the growth of most popular CMS, they have large scale marketplace available with ready-made templates (aka called themes).

Let’s have a quick study of WordPress because most of the TYPO3 migrated to WordPress.

IMHO, WordPress grows well not because of their CMS-core, but due to having a strong Eco-system.

WordPress has hundreds and thousands of stores, marketplaces, themes and templates, plugins, hosting, SaaS, services providers, etc.

Quick WordPress Facts

  • More than $143 Billion: Annual WordPress Building Market Size.
  • Imagine this, Avada Only one WordPress template has earned over 12 million dollars in sales.

Marketplace References

The marketing team of T3Terminal analyzed many existing popular platforms like

  • WordPress ThemeForest Envato Store
  • Magento Official Marketplace
  • Web Creative Marketplace
  • And so on.,

By d way, T3Terminal initiative’s goal is to build a better TYPO3 eco-system platform so people can develop and publish their free and premium TYPO3 Templates and TYPO3 Extensions by share, earn, and care philosophy.

Proof of Concept: Parent and Child TYPO3 Templates

Team T3Terminal one of the focus to provide the best quality and standards of TYPO3 Templates. For years, We are working very hard to make a better TYPO3 templating method.

One of the biggest challenges was to create a TYPO3 templating method with keep in touch with the TYPO3 core to make sure the future easily updates.

Before We Start, I want to Confess!
I’m going to explain, How we develop the TYPO3 Template for T3Terminal, to give deliver the best quality and standard templates to our customers. I’m not claiming, this is the only best way, but it will try to draw that - We can achieve such a templates builder in TYPO3. There are a number of ways to make it happen.

Have you heard about parent and child templates in any other CMS? Basically, such architecture design to have common templates standards, quality, and productivity.

Theory of Two TYPO3 Extensions

We have used the TYPO3 Extensions concept because in TYPO3 we do not have any special things for the TYPO3.

Extension 1. Base Template Extension (EXT:ns_basetheme)

Extension 2. Child Template Extension (EXT:ns_theme_name)

What’s TYPO3 Base Template?

The base template extension contains common for all your TYPO3 websites, and technical configuration to easily create custom and flexible TYPO3 content elements.

What’s the TYPO3 Child Template?

Whereas, the child template extension is the customization of your templates, layouts, and content elements based on your needs.

And, What most we take care to design Template framework?

The most important is, we have followed only TYPO3-core without writing single custom code to Hassle-free future TYPO3 updates, I’ll explain later in this article.
We have released both TYPO3 extensions with OpenSource GPL licenses, Feel free to try and use in your TYPO3 projects.

Everything well Pre-configured in EXT:ns_basetheme

  • Global and common configuration of TypoScript, Fluid, etc.,
  • Bootstrap theme - as a default TYPO3 theme
  • Custom Backend Module  - aka called “Theme Options”
  • Automatically import routing features /sites/ns_basetheme/config.yaml
  • Automatically import page tree while installing child extension
  • Pre-compiled lints of PHP, TypoScript, YAML, etc.
  • Composer support
  • Sample configured forms using core EXT:form
  • Common and useful rich editor configuration with core EXT:CKEditor
  • Structured Directories and Files
  • Include common TypoScript like PageTSConfig, Constant, Setup etc.,
  • DataProcessing and Hooks (TYPO3 APIs)
  • Easy way to developed custom elements
  • And many other features!

Why TYPO3 Templates From T3Terminal?

Stable Version
TYPO3 Templates designed, developed and well-tested with Stable version

Pre-Configured
Ready to go live templates comes with pre-built design, content, and extensions to go live in minutes

Flexible Backend Management
Editor-friendly TYPO3 backend usability to easily manage pages and content

Future Upgradable
Guaranteed compatibility with new TYPO3 versions followed by lifetime updates by T3Terminal

Optimized and Extendable
Packed with industrial standard optimized code for smoother performance and future template scalability

Fast, Lightweight & Powerful
The template is flexible and adaptive providing a smoother user experience

SEO Cares
Maintained best practice SEO standards like meta-data, sitemap, robots, social-media, setup GA, etc.

Followed TYPO3 Core Standards
Developed using the latest coding techniques & following strict TYPO3 coding guidelines.

Speed and Performance
The TYPO3 Templates are  well-optimized for Speed and Performance by getting highest rank on GTMetrix

The Architecture of TYPO3 Templates

EXT:ns_basetheme

EXT:ns_theme_name

Live-Demo of Parent and Child TYPO3 Templates

To give you a better idea, how everything works well, Let’s try the practical demo to install, configure, and use these TYPO3 Templates using the following setup.

  • A famous local environment with Docker and DDEV
  • Composer-based Setup
  • Templates Installation, Configuration, and Customization

T3 Agency: TYPO3 Theme Sample

TYPO3 Agency is one of our most downloaded TYPO3 templates.

Step-by-step Guide to Install TYPO3 Templates

Note: If you want to install TYPO3 Template for your non-composer based TYPO3 instance, then follow the step from our official TYPO3 Templates Documentation.

Step 1. Create your Project’s folder

mkdir t3-agency
cd t3-agency

Step 2. Define your PHP version configuration

ddev config --project-type php --php-version 7.2

Step 3. Setup latest TYPO3 version

ddev composer create "typo3/cms-base-distribution:^10" --no-interaction --prefer-dist
ddev config --project-type typo3
ddev start

Step 4. Install Base TYPO3 Templates

ddev composer require nitsan/ns-basetheme

Step 5. Configure your site URL

Go to Sites > ns_basetheme > Change Entry Point with your site-URL

Step 6. Download Child TYPO3 Templates

ddev composer require nitsan/ns-theme-agency

Step 7. TYPO3 Theme Options

You can easily configure header, footer, SEO, styles, etc., from NITSAN > Theme Options Backend Module.

Step 8. Done! The extension will automatically import the page tree, create a routing config.yaml, etc.,

Are you feeling hectic to create Custom or Flexible Content Element?

Did you know?

You will need to perform ~10 steps to just create a flexible or custom content element.

Step 1. Initiate CType Definition (with tt_content_defValues.CType)

Step 2. Prepare backend configuration with Flexform (with tt_content_defValues.CType)

Step 3. Add CType at PageTS Config (with mod.wizards.newContentElement.wizardItems.extra)

Step 4. Prepare TypoScript (with elementname = FLUIDTEMPLATE)

Step 5. Add into TypoScript Setup (with tt_content.elementname)

Step 6. Register Icon (with IconRegistry::class)

Step 7. Setup /Configuration/TCA/Overrides/tt_content.php (with addTcaSelectItem)

Step 8. Render through your Fluid Template

Did I miss any steps? BUT, who cares! In EXT:ns_basetheme, we have smartly developed techniques to automatically develop custom TYPO3 content elements with the following steps in your child-theme EXT:ns_theme_name.
 

Step 1: For Backend form, Create /Configuration/Flexform/ns_elementname.xml

<T3DataStructure>
   <sheets>
       <sDEF>
           <ROOT>
               <TCEforms>
                   <sheetTitle>Fields</sheetTitle>
               </TCEforms>
               <type>array</type>
               <el>
                   <title>
                       <TCEforms>
                           <label>LLL:EXT:ns_theme_agency/Resources/Private/Language/locallang_flex.xlf:general.title</label>
                           <config>
                               <type>input</type>
                               <size>30</size>
                               <eval>trim,required</eval>
                           </config>
                       </TCEforms>
                   </title>
                   <subtitle>
                       <TCEforms>
                           <label>LLL:EXT:ns_theme_agency/Resources/Private/Language/locallang_flex.xlf:general.subtitle</label>
                           <config>
                               <type>input</type>
                               <size>30</size>
                               <eval>trim</eval>
                           </config>
                       </TCEforms>
                   </subtitle>
               </el>
           </ROOT>
       </sDEF>
   </sheets>
</T3DataStructure>

Step 2: To Frontend renders, Create /Resources/Private/ns_elementname.html, and Done!

<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
   <div class="container">
       <div class="intro-text">
           <f:if condition="{content.title}"><div class="intro-lead-in">{content.title}</div></f:if>
           <f:if condition="{content.subtitle}"><div class="intro-heading text-uppercase">{content.subtitle}</div></f:if>
       </div>
   </div>
</html>

Wait... Do you want to have a cool backend preview?

Step 3: Create NsElementname.html at /Resources/Private/Backend/

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
   <h2><f:translate key="LLL:EXT:ns_theme_agency/Resources/Private/Language/locallang_db.xlf:wizard.ns_banner"/></h2>
   <div class="container">
       <div class="row">
           <div class="col-md-12">
               <f:if condition="{flexformData.title}"><h3>{flexformData.title}</h3></f:if>
               <f:if condition="{flexformData.subtitle}"><h4>{flexformData.subtitle}</h4></f:if>
           </div>
       </div>
   </div>
</html>

A single Upgrade for all your TYPO3 projects

Probably the greatest advantage of issue free and automated future TYPO3 upgrade versions. Look at the screenshot, the child TYPO3 theme doesn't have even a single PHP document so there are no-more deprecations and breaking changes.

Now whenever a new TYPO3 version is released, we simply need to determine ns_basetheme's breaking changes and deprecation, and simply upgrade ns_basetheme at all your TYPO3 instances to make them compatible with the newest TYPO3 version. That's cool, isn't it?

So What’s Next in TYPO3 Templates?

Cross-your finger, Team T3Terminal dreams to create a dedicated TYPO3 Templates Builder backend module. To easily install, activate, configure multiple TYPO3 templates. Hoping to make it happen in the upcoming months.

Summing-up!

Thanks for reading.

Let’s quickly recap with a quick conclusion.

  • Understand the importance of common TYPO3 templating method
  • Would be awesome if TYPO3 Community team will finalize vision of TYPO3 Templates Builder
  • Presented the idea of base and child TYPO3 Templates
  • Try our step-by-step guide for such a TYPO3 templating method.

What do you think about the above idea? What’s your favorite TYPO3 templates method? Do you have any better ideas to make a good TYPO3 Templates module? I would love to receive your feedback, questions, or issues to below comment box.

Have a Happy TYPO3 Templating!

Post Comment

Your email address will not be published. Required fields are marked *

×

Name is required!

Enter valid name

Valid email is required!

Enter valid email address

Comment is required!

Google Captcha Is Required!

Comments :

  • Phillipp Rothschild July 10, 2020 At 2:51 pm
    T3Terminal has been a great initiative for TYPO3 templates to be available. I appreciate the efforts. Moreover thanks for the free TYPO3 templates. Cheers
    • Sanjay July 10, 2020 At 3:08 pm
      Thanks, Phillipp Rothschild, I am glad you liked it!
  • Lukas Schwarzenbacher July 6, 2020 At 11:44 am
    I think TYPO3 is a very good enterprise level system. Especially for the smaller clients we should have a common way to build templates. I like the Bootstrap Package because I can install one extension and I have everything I need in one extension. There is a fotogallery, a "click to enlarge" option for images, there are backend layouts well connected to a frontent layout and many many more. Every client wants a individual layout. Because of this I installed a second extension kickstarted by the site package builder. The second extension overwrites the first one, if I want to change something. Now I have the parent child system like you mentioned it, and this is really really awesome. For individual content elements I work with DCE, because it is very easy to use. Today, my world is in peace. But, there is always that little fear, that one of this extensions one day will be outdatet. To me, there are five benefits of a common way of templating: 1. It is easier to learn how to template 2. Employees can switch better between projects 3. More safety, that you can easily update your projects 4. It is easier to get help, because the knowledge in the TYPO3 universe is not divided in different ways of templating 5. More focus on the indivual customer needs, because the basics are already there In addition to this, I think there is too much you have to learn before you can start your first TYPO3 site. You write about market share. I think it is hard to get new TYPO3 enthusiasts and new small clients, when there is that much to learn for the first project. TYPO3 9 was a big step forward to a CMS which is easier to use (Sitehandling, SEO ect.). Now we should make the same step with templating ???? And I think it is very important to have the t3terminal with templates to buy ????
10 Key Elements for Your TYPO3 App Website

10 Key Elements for Your TYPO3 App Website

We already covered the fact that you need to start your app marketing efforts as early as possible in order to have a successful…

Ready-Made Vs Custom-Built TYPO3 Templates

Ready-Made Vs Custom-Built TYPO3 Templates

So you have decided your business needs a new TYPO3 website. But how should it be created: from a Pre-made TYPO3 Template, through…

How to Create a One Page Website with TYPO3?

How to Create a One Page Website with TYPO3?

Many successful websites are large, complex affairs with lots of pages and content. However, sometimes more truly is less in the…

Stay up to date with our recent TYPO3 Blogs, news, & updates