diff --git a/Configuration/NodeTypes.Shariff.yaml b/Configuration/NodeTypes.Shariff.yaml index 1302bd4..a83a98b 100644 --- a/Configuration/NodeTypes.Shariff.yaml +++ b/Configuration/NodeTypes.Shariff.yaml @@ -3,4 +3,4 @@ 'TYPO3.Neos:Content': true ui: label: 'Social Plugins' - icon: icon-ellipsis-horizontal + icon: 'icon-ellipsis-horizontal' diff --git a/README.md b/README.md index e210c73..d484b60 100644 --- a/README.md +++ b/README.md @@ -44,11 +44,11 @@ See `Configuration/Settings.yaml` for more information about possible options. Usage: ------ -This package contains a simple Node Type `Networkteam.Neos.Shariff:Shariff` that renders social -share buttons via Shariff. Just add a new node of this type to a document in the Neos backend. +This package contains two simple Node Types. `Networkteam.Neos.Shariff:Shariff` renders social +share buttons via Shariff. `Networkteam.Neos.Shariff:ShariffContainer` wraps `Networkteam.Neos.Shariff:Shariff` in a tempalte for better control over markup. +Just add a new node of this type to a document in the Neos backend. -Usage via TypoScript: ---------------------- +### Usage via TypoScript: In your prototype define a property which renders the social plugins like this: @@ -107,3 +107,38 @@ If you want to extend the configuration just go like this: Using Pinterest: --------------------- In order to use a "Pin it" button in shariff pinterest won't grab an image of your page automatically. You have to define one by using the "data-media-url" attribute. So just extend prototype(Networkteam.Neos.Shariff:Shariff) and use e.g. the twitterCardImage property of the current Document Node to serve a proper image. + + +Create your own Shariff wrapper +------------------------------- + +To render the shariff nodeType in your own template you can to create a nodeType i.e. `Your.Site:ShariffContainer` with Typoscript and HTML template: + +**NodeTypes.ShariffContainer.yaml** (Configuration/NodeTypes.ShariffContainer.yaml) + + 'Your.Site:ShariffContainer': + superTypes: + 'TYPO3.Neos:Content': true + ui: + label: 'Shariff container' + icon: 'icon-share' + +**Root.ts2** or **ShariffContainer.ts2** + + prototype(Your.Site:ShariffContainer) { + shariffTag = Networkteam.Neos.Shariff:Shariff + } + +Make sure `ShariffContainer.ts2` gets included in your sites Root.ts2 by either + + include: NodeTypes/ShariffContainer.ts2 + +or + + include: NodeTypes/*.ts2 + +**ShariffContainer.html** (Resources/Private/Templates/NodeTypes/ShariffContainer.html) + +
+ {shariffTag -> f:format.raw()} +
\ No newline at end of file diff --git a/Resources/Private/Templates/NodeTypes/Shariff.html b/Resources/Private/Templates/NodeTypes/Shariff.html new file mode 100644 index 0000000..90a7d04 --- /dev/null +++ b/Resources/Private/Templates/NodeTypes/Shariff.html @@ -0,0 +1,3 @@ + f:format.raw()}> + {shariffTag -> f:format.raw()} + \ No newline at end of file diff --git a/Resources/Private/TypoScript/Root.ts2 b/Resources/Private/TypoScript/Root.ts2 index 781854b..ab06cb8 100644 --- a/Resources/Private/TypoScript/Root.ts2 +++ b/Resources/Private/TypoScript/Root.ts2 @@ -23,7 +23,7 @@ prototype(TYPO3.Neos:Page) { } } -prototype(Networkteam.Neos.Shariff:Shariff) < prototype(TYPO3.TypoScript:Tag) { +prototype(Networkteam.Neos.Shariff:ShariffTag) < prototype(TYPO3.TypoScript:Tag) { // API services = ${Configuration.setting('Networkteam.Neos.Shariff.options.services')} theme = ${Configuration.setting('Networkteam.Neos.Shariff.frontend.theme')} @@ -54,4 +54,8 @@ prototype(Networkteam.Neos.Shariff:Shariff) < prototype(TYPO3.TypoScript:Tag) { @process.contentElementWrapping = TYPO3.Neos:ContentElementWrapping @exceptionHandler = 'TYPO3\\Neos\\TypoScript\\ExceptionHandlers\\NodeWrappingHandler' +} + +prototype(Networkteam.Neos.Shariff:Shariff) { + shariffTag = Networkteam.Neos.Shariff:ShariffTag } \ No newline at end of file