With Neos you are amazingly fast at kickstarting a new project. The concept of configurable document types makes it incredibly easy to set up special content types - the building blocks of your website - by only writing a few lines of configuration. But how? The documentation on neos.readthedocs.org is always a good start. It teaches you the basics around the configuration of node types, the concepts behind content dimensions and the rendering via typoscript 2 and fluid.
As soon as you have understood the very basics, I would recommend a look into existing projects to get inspired and to see best practice solutions for things you want to achieve with your own project.
In this blog post, I want to introduce you to some open source site packages, which provide the blueprints to a lot of common project needs.
The Neos demo site
This is the reference. The demo site package is maintained by the Neos core team and should always be up to date with the current Neos development. Being a part of the base distribution, it demonstrates many Neos features that are currently available. As there are still breaking changes in the configuration of node types between Neos versions, with this package you should always get the most recent configuration examples. In this package you will find:
- Node type adjustments to use Bootstrap CSS with the default column container elements
- A node type to integrate a Youtube video
- A node type to show a Twitter stream
- An image carousel node type
- Settings that set up language dimensions for several languages
- An additional preview mode for a print preview
- A plugin for a frontend user registration with its node type definition
Sebastian Helzles Blog
Sebastian Helzle built his blog on Neos only by using TypoScript and YAML configurations without the use of PHP scripts. It provides the following features:
- Atom feed support with the feed document type
- Latest blog entries content element
- Blog entry with its own template and navigation elements
- Easly integratable social media buttons
DPSG CampGround
I build a site package in the design of the German scout organization DPSG which is available on github. Basically, it shows articles in a kind of blog style with the articles sorted by years and categories.
- Articles - like blog entries - with a distinct header image, catgorized by groups
- Article Overviews
- An article slider and a selection for the latest article for teasing articles in the frontend
- Using SimpleSearch/Elasticsearch to load article nodes for the different representations
- A node type to configure and display a Google map
- A viewhelper to fetch and display Facebook events in a calendar list style
Robert Lemkes blog
This is the blog of Robert Lemke, one of the core developers of Neos and Flow. In contrast to Sebastians Blog, it provides some special controllers and ViewHelpers.
- Node type defintions for a blog post and a post overview
- A node type definition for a user comment
- Form and corresponding controller to submit a user comment to a blog post
- A content node type to dispaly a quote with citation
- Pagination via jQuery.infiniscroll with a special routing configuration for the pagination
M12.Foundation: Zurb Foundation components for Neos CMS
The M12.Foundation implements majority of the popular Zurb Foundation components. The configuration, the typoscript and the included php-classes show advanced techniques to extend neos at several points. If you base your project on foundation, this package will save you a great deal of work.
- The package brings node type configurations and typoscript for a lot of foundation components like Accordion, Alert and Panel, Button, Dropdown, Flex Video, Font Icon, Navigations, Tabs, Tooltips and a complete set of Form elements
- Examples for the use of NodeTypeProcessors which generate node type configurations dynamically at run-time
- Automatically pre-configured complex components, called Assistence Nodes. A feature, that gets complex components like a dropdown or an image slider working out-of-the-box.
Community.News
This isn't a site package but an additional package particularly to show news in a Neos instance is community.news. In this package you will find:
- A news entry with a title, a teaser, an author which is sortable by categories and tags
- The definition for category and author node types
- Node types for a default news list as well as for latest news
- The PHP code for an Eel helper for sorting entries
- A second Eel helper that selects related news by any given news property
Sebastian Kurfürsts DevDays 2014 Example
One of the early examples was Sebastian Kurfürst's package built for the workshop on the TYPO3 DevDays 2014 in Eindhoven. It shows examples to build events for a fictive coffee roasting companies and provides the following features:
- Node type definition of an event
- Teaser content elements to show upcoming events
Just get all of them
If you want to fill your "hints directory" with the projects mentioned above, you could use this little script within an empty directory:
git init
git submodule add git://git.typo3.org/Packages/NeosDemoTypo3Org.git
git submodule add https://github.com/Sebobo/Shel.Blog.git
git submodule add https://github.com/daniellienert/DPSG.CampGround.git
git submodule add https://github.com/robertlemke/RobertLemke.Plugin.Blog.git
git submodule add https://github.com/Flow-Community/Community.News.git
git submodule add https://github.com/skurfuerst/DevDays.NeosWorkshop.git
git submodule add https://github.com/million12/M12.Foundation.git
git submodule update --init