Skip to content

Instantly share code, notes, and snippets.

@kitsunet

kitsunet/BlogPost.html

Last active August 23, 2016 21:15
Show Gist options
  • Save kitsunet/9803714 to your computer and use it in GitHub Desktop.
Save kitsunet/9803714 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README
https://github.com/bjen/LittleBeanRoastery/
Raw
BlogPost.html
{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<div class="article-list-element">
<media:image asset="{headerimage}" alt="{title}" maximumHeight="465" />
<h2>{title}</h2>
{neos:contentElement.editable(property: 'teaser')}
<p><neos:link.node node="{node}" class="btn btn-default">Details about this</neos:link.node></p>
</div>
Raw
BreadcrumbMenu.html
{namespace neos=TYPO3\Neos\ViewHelpers}
<f:if condition="{items}">
<ol class="breadcrumb">
<f:for each="{items}" as="item" reverse="TRUE" iteration="breadcrumbIteration">
<f:if condition="{item.hiddenInIndex} == 0">
<li>
<f:if condition="{breadcrumbIteration.isLast}">
<f:then>
{item.label}
</f:then>
<f:else>
<neos:link.node node="{item}">{item.label}</neos:link.node>
</f:else>
</f:if>
</li>
</f:if>
</f:for>
</ol>
</f:if>
Raw
CarouselItem.html
{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<div{attributes -> f:format.raw()}>
<f:if condition="{image}">
<f:then>
<media:image image="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" />
</f:then>
<f:else>
<img src="{f:uri.resource(package: 'TYPO3.Neos', path: 'Images/dummy-image.png')}" title="Dummy image" alt="Dummy image" />
</f:else>
</f:if>
<div class="carousel-caption">
<f:if condition="{hasCaption}">
{neos:contentElement.editable(property: 'caption')}
</f:if>
</div>
</div>
Raw
Default.html
<!DOCTYPE html>
{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Little Bean Roastery</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<f:section name="stylesheets">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../../Public/Css/main.css">
</f:section>
</head>
<body>
<f:section name="body">
<div class="full-height">
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<neos:link.node node="{homepage}" class="navbar-brand">
<img src="../../../Public/Images/logo-01.svg" alt="{homepage.properties.title}">
</neos:link.node>
</div>
{parts.menu -> f:format.raw()}
</div>
</header>
<div role="main">
<section class="white centered no-padding">
<f:if condition="{headerimage}">
<f:then>
<div class="keyvisual" style="background-image: url({media:uri.image(asset: headerimage)})"></div>
</f:then>
<f:else>
<div class="keyvisual"></div>
</f:else>
</f:if>
</section>
{content.main -> f:format.raw()}
</div>
<div class="push"></div>
</div>
<footer class="brown-bg">
<div class="container">
<div class="row">
<div class="col-sm-3">
<p>dfgsdgs</p>
</div>
<div class="col-sm-6">
<ul class="social">
<li><a href="#" class="icon-facebook"><span>Facebook</span></a></li>
<li><a href="#" class="icon-twitter"><span>Twitter</span></a></li>
<li><a href="#" class="icon-google-plus"><span>G+</span></a></li>
<li><a href="#" class="icon-xing"><span>Xing</span></a></li>
</ul>
</div>
<div class="col-sm-3">
<p>dfgsdgs</p>
</div>
</div>
</div>
</footer>
<!-- important scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../../../Public/Scripts/Vendor/Bootstrap/transition.js"></script>
<script src="../../../Public/Scripts/Vendor/Bootstrap/carousel.js"></script>
</f:section>
</body>
</html>
Raw
Menu.html
{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace ts=TYPO3\TypoScript\ViewHelpers}
<nav class="collapse navbar-collapse" role="navigation">
<f:render section="itemsList" arguments="{items: items}" />
</nav>
<f:section name="itemsList">
<ul class="nav navbar-nav">
<f:for each="{items}" as="item" iteration="menuIteration">
<f:if condition="{menuIteration.isLast}">
</ul>
<ul class="nav navbar-nav navbar-right">
</f:if>
<li{ts:render(path:'{item.state}.attributes') -> f:format.raw()}>
<neos:link.node node="{item.node}">{item.label}</neos:link.node>
</li>
</f:for>
</ul>
</f:section>
Raw
MultiColumn.ts2
##
# Adjust "MultiColumn" element to Twitter bootstrap CSS classes
#
prototype(TYPO3.Neos.NodeTypes:MultiColumn) {
attributes.class = 'row'
columns.iterationName = 'multiColumnIteration'
}
Raw
MultiColumnItem.ts2
##
# Adjust "MultiColumnItem" element to Twitter bootstrap CSS classes
#
prototype(TYPO3.Neos.NodeTypes:MultiColumnItem) {
attributes.class = ${'col-sm-' + String.split(q(node).parent().property('layout'), '-')[multiColumnIteration.index]}
}
Raw
NodeTypes.yaml
# If you need more than just the "main" content area you can
# uncomment the snippet below. It will add a "sidebar" area
# to your pages. You can add as many areas as you like, still
# only those that are rendered in your TypoScript and Template
# are visible on your page.
---
#'TYPO3.Neos.NodeTypes:Page':
# childNodes:
# sidebar:
# type: 'TYPO3.Neos:ContentCollection'
'Inspiring.WorkshopPage:Section':
superTypes: ['TYPO3.Neos:Content']
ui:
label: 'Content Section'
icon: 'icon-columns'
inlineEditable: true
inspector:
groups:
style:
label: 'Style'
position: 10
childNodes:
content:
type: 'TYPO3.Neos:ContentCollection'
properties:
background:
type: string
defaultValue: 'white'
ui:
label: 'Background Color'
reloadIfChanged: true
inspector:
group: style
editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
editorOptions:
placeholder: 'Select Background Color'
values:
'white':
label: 'White'
'beige-bg':
label: 'Beige'
'brown-bg':
label: 'Brown'
border:
type: string
defaultValue: ''
ui:
label: 'Border'
reloadIfChanged: true
inspector:
group: style
editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
editorOptions:
placeholder: 'Select Borders'
values:
'':
label: 'No Border'
'border-top':
label: 'Border Top'
'border-top-simple':
label: 'Simple Border Top'
centered:
type: boolean
ui:
label: 'Center?'
reloadIfChanged: true
inspector:
group: style
nopadding:
type: boolean
ui:
label: 'No Padding?'
reloadIfChanged: true
inspector:
group: style
'Inspiring.WorkshopPage:Teaser':
superTypes: ['TYPO3.Neos.NodeTypes:Headline', 'TYPO3.Neos.NodeTypes:Text']
ui:
label: 'Teaser'
icon: 'icon-file-text'
inspector:
groups:
style:
label: 'Style'
position: 10
properties:
title:
defaultValue: '<h2>Enter headline here</h2>'
ui:
aloha:
format:
h1: FALSE
h4: TRUE
h5: TRUE
h6: TRUE
icon:
type: string
defaultValue: ''
ui:
label: 'Icon'
reloadIfChanged: true
inspector:
group: style
editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
editorOptions:
placeholder: 'Select Icon'
values:
'':
label: ''
'icon-pacman':
label: 'PACMAN!'
'icon-user':
label: 'User'
'icon-headphones':
label: 'Headphones'
linktext:
type: string
defaultValue: 'Link here'
ui:
inlineEditable: true
link:
type: reference
ui:
label: 'Link Target'
inspector:
group: style
'Inspiring.WorkshopPage:PostList':
superTypes: ['TYPO3.Neos:Content']
ui:
label: 'Blog Post List'
icon: 'icon-pacman'
##
# A "Carousel" content element that renders "Image" child nodes into a JavaScript based slideshow
#
'Inspiring.WorkshopPage:Carousel':
superTypes: ['TYPO3.Neos:Content']
childNodes:
carouselItems:
type: 'TYPO3.Neos:ContentCollection'
ui:
label: 'Carousel'
group: 'plugins'
icon: 'icon-picture'
inlineEditable: TRUE
'Inspiring.WorkshopPage:BlogPost':
superTypes: ['TYPO3.Neos.NodeTypes:Page']
ui:
label: 'Blog Post'
icon: 'icon-pacman'
properties:
teaser:
type: string
defaultValue: 'Teaser Text'
ui:
inlineEditable: true
'TYPO3.Neos.NodeTypes:Page':
ui:
inspector:
groups:
image:
label: 'Image'
position: 20
properties:
headerimage:
type: TYPO3\Media\Domain\Model\ImageVariant
ui:
label: 'Header Image'
reloadIfChanged: true
inspector:
group: image
##
# Adjust the "TwoColumn" node type:
# Disable some of the layout options, override labels and set the default layout
#
'TYPO3.Neos.NodeTypes:TwoColumn':
properties:
'layout':
defaultValue: '6-6'
ui:
inspector:
editorOptions:
values:
'50-50': ~
'75-25': ~
'25-75': ~
'66-33': ~
'33-66': ~
'6-6':
label: '50% / 50%'
'8-4':
label: '66% / 33%'
'4-8':
label: '33% / 66%'
##
# Adjust the "ThreeColumn" node type:
# Disable some of the layout options, override labels and set the default layout
#
'TYPO3.Neos.NodeTypes:ThreeColumn':
properties:
'layout':
defaultValue: '4-4-4'
ui:
inspector:
editorOptions:
values:
'33-33-33': ~
'50-25-25': ~
'25-50-25': ~
'25-25-50': ~
'4-4-4':
label: '33% / 33% / 33%'
'6-3-3':
label: '50% / 25% / 25%'
'3-6-3':
label: '25% / 50% / 25%'
'3-3-6':
label: '25% / 25% / 50%'
##
# Adjust the "FourColumn" node type:
# Disable some of the layout options, override labels and set the default layout
#
'TYPO3.Neos.NodeTypes:FourColumn':
properties:
'layout':
defaultValue: '3-3-3-3'
ui:
inspector:
editorOptions:
values:
'25-25-25-25': ~
'3-3-3-3':
label: '25% / 25% / 25% / 25%'
Raw
PostList.html
{namespace neos=TYPO3\Neos\ViewHelpers}
<div class="row">
{postList -> f:format.raw()}
<div class="pagebrowse">
<span href="#" class="previous"><span>Previous</span></span>
<p>Page 1 from 4</p>
<a href="#" class="next"><span>Next</span></a>
</div>
</div>
Raw
Root.ts2
include: NodeTypes/MultiColumn.ts2
include: NodeTypes/MultiColumnItem.ts2
namespace: TS=TYPO3.TypoScript
prototype(Inspiring.WorkshopPage:Section) {
content = TYPO3.Neos:ContentCollection {
nodePath = 'content'
}
}
prototype(Inspiring.WorkshopPage:PostList) {
postList = TYPO3.TypoScript:Collection {
collection = ${q(documentNode).children('[instanceof Inspiring.WorkshopPage:BlogPost]')}
itemName = 'node'
itemRenderer = TS:Template {
templatePath = 'resource://Inspiring.WorkshopPage/Private/Templates/TypoScriptObjects/BlogPost.html'
node = ${node}
teaser = ${q(node).property('teaser')}
headerimage = ${q(node).property('headerimage')}
title = ${q(node).property('title')}
@process.contentElementWrapping = TYPO3.Neos:ContentElementWrapping
}
}
}
##
# "Carousel" element
#
prototype(Inspiring.WorkshopPage:Carousel) {
carouselItems = TYPO3.Neos:ContentCollection {
nodePath = 'carouselItems'
iterationName = 'carouselItemsIteration'
attributes.class = 'carousel-inner'
}
carouselItemArray = ${q(node).children('carouselItems').children('[instanceof TYPO3.Neos.NodeTypes:Image]')}
// Enhance image prototype for the carousel
prototype(TYPO3.Neos.NodeTypes:Image) {
// Render images in the carousel with a special template.
templatePath = 'resource://Inspiring.WorkshopPage/Private/Templates/TypoScriptObjects/CarouselItem.html'
attributes.class = ${'item' + (carouselItemsIteration.isFirst ? ' active' : '')}
// We want to use the item iterator in the template so we have to store it in ts.
iteration = ${carouselItemsIteration}
}
}
/**
* Root TypoScript template for the Inspiring Workshop Demo Site
*/
page = TYPO3.Neos:Page {
head {
stylesheets = TS:Template
stylesheets {
templatePath = 'resource://Inspiring.WorkshopPage/Private/Templates/Page/Default.html'
sectionName = 'stylesheets'
}
}
body {
templatePath = 'resource://Inspiring.WorkshopPage/Private/Templates/Page/Default.html'
sectionName = 'body'
homepage = ${site}
headerimage = ${q(node).property('headerimage')}
parts {
menu = Menu {
templatePath = 'resource://Inspiring.WorkshopPage/Private/Templates/TypoScriptObjects/Menu.html'
entryLevel = 1
active.attributes.class = 'active'
current.attributes.class = 'active'
}
breadcrumb = Breadcrumb {
templatePath = 'resource://Inspiring.WorkshopPage/Private/Templates/TypoScriptObjects/BreadcrumbMenu.html'
}
}
// These are your content areas, you can define as many as you want, just name them and the nodePath.
content {
// Default content section
main = PrimaryContent {
nodePath = 'main'
}
}
}
}
blogPost < page
blogPost {
body {
templatePath = 'resource://Inspiring.WorkshopPage/Private/Templates/Page/BlogPost.html'
listPage = ${q(node).parent().get(0)}
}
}
root {
blogPostPage {
condition = ${node.nodeType.name == 'Inspiring.WorkshopPage:BlogPost'}
renderPath = '/blogPost'
@position = 'before editPreviewMode'
}
}
Raw
Section.html
<section class="{background} {f:if(condition:centered, then: 'centered')} {border} {f:if(condition:nopadding, then: 'no-padding')}">
<div class="container">
{content -> f:format.raw()}
</div>
</section>
Raw
Settings.yaml
TYPO3:
TypoScript:
enableContentCache: FALSE
Raw
Teaser.html
{namespace neos=TYPO3\Neos\ViewHelpers}
<div>
<span class="{icon} type-icon"></span>
{neos:contentElement.editable(property: 'title')}
{neos:contentElement.editable(property: 'text')}
<f:if condition="{link}">
<p><neos:link.node node="{link}" class="btn btn-default">{neos:contentElement.editable(property: 'linktext', tag: 'span')}</neos:link.node></p>
</f:if>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment