No news plugin?

Martelinho · May 2, 2017, 7:03pm

Hi there, I’m a bit confused by not finding a news package/plugin under https://www.neos.io/download-and-extend/packages.html. I thought this is the place for official plugins. Can it be that no news plugin is available for neos right at the moment or am I just searching in the wrong place?
Best regards
Thomas

david.sporer · May 3, 2017, 6:14am

The reason is that it’s fairly easy to do this with custom Node Types. You usually don’t need an extra news package.
I don’t have the time for it right now but for inspiration you can check Robert’s Blog package.
The idea is to have on Document (which is a Node Type as well) that is used to create news and another Node Type that displays all Node Types that are of this type. This is exactly what we do on our own page (not a complex News “system” but it works that way): http://www.passcreator.com/de/news
https://github.com/robertlemke/RobertLemke.Plugin.Blog

Martelinho · May 3, 2017, 9:01am

Hi David, thanks a lot for your answer.

Of course I understand that it’s easy to do such things with custom types. However I thought that there are packages for the most common functions. It seems that this is not the case.

I quite have skills in developing websites but I am rather new to NEOS. So the principles of news, blog or whatever lists are common and I could do these things straight forward within a few hours in other CMS systems. But at the moment it would take me a few whole days in NEOS and as my project is no business purpose I just don’t have that time left right now.
This is just for explaining the big mountain that is between the general simplicity of a news list and the actual implementation by development. So even such a simple package would help beginners like me to get into it easier.

So if someone could provide a package to install I would be happy. Of course not to do my work but helping me understand those things immediately by doing/changing and not from the scratch.

Best regards
Thomas

ilCerchiari · May 3, 2017, 9:21am

Hi @Martelinho,
maybe you could check this package: https://github.com/lelesys/Lelesys.News as a base or to use it right away (I believe it was not ported to the latest Neos 3.x unfortunately).

bests,
Nicola

sorenmalling · May 3, 2017, 9:21am

Hi @Martelinho

You can find this plugin

even though it’s outdated and depends on the typo3/neos package, it’s a great place to start. Perhaps @stolle can tell if he will update the requirements or if it’s working (dunno about composer being able to resolve typo3/neos to the renamed neos package)

stolle · May 3, 2017, 9:35am

Already had it updated at some point. I’ll check and push it later!

Martelinho · May 3, 2017, 6:09pm

Thanks for your links @david.sporer, @ilCerchiari, @sorenmalling.

Got a first look into all plugins on github and the code from @stolle looks most understandable to me. Maybe that’s because it is based on another package (flowpack/listable) or it is just beacuse of its functionality. It seems reasonnable to wait for Johannes push on github and then try to integrate and learn from this implementation. I already found flowpack/listable while my search yesterday and it seems to be good idea to get to know this package by the way.

Thanx and best regards
Thomas

sorenmalling · May 4, 2017, 2:31pm

You don’t have to wait for @stolle to push a new version - you can easily copy/paste the NodeTypes to your own package and start experimenting.

I’ve heard @dimaip saying nothing but nice things about the Listable package (IIRC he’s the maintainer/author aswell ) and it seems to be awesome tool for listing all sorts of nodetypes.

So indeed a great way to start getting to know for Neos and Fusion work togehter.

dimaip · May 4, 2017, 3:22pm

I’m refactoring Listable now, will merge soonish the new version: https://github.com/Flowpack/Flowpack.Listable/tree/atomic

For beginners, I’d recommend exploring how Listable works and roll your own custom solution.
Unnecessary abstractions cause pain if you can go without it, do it!
Over the years I found Neos.Fusion:Collection to often be the best abstraction for my data listing needs…

Martelinho · May 4, 2017, 7:12pm

Thanks @sorenmalling and @dimaip for the additional infos.

Already “inspected” the code of both plugins. Very very very much things to discover which I’m not able to put into the right context with my current knowledge gap. But of course this is the usual initial learning process I have to go through.

I think I got all required information for this task.

Thanx to all helpers
Thomas

aertmann · May 5, 2017, 2:06pm

If you’re interested in an example of how to use the Listable package for articles, neos.io has a implementation for the blog and it’s available in a public repository.

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Resources/Private/Fusion/NodeTypes/Post.fusion

prototype(Neos.NeosIo:Post) {
    author = ${this.authors ? Data.users(this.authors) + this.authorAlternative : this.authorAlternative}

    content = PrimaryContent {
        nodePath = 'main'
    }

    backToListButton = Neos.NeosIo:Button {
        style = 'btn--solidPrimary'
        buttonLabel = 'Back to list'
        alignment = 'Right'
        link = Neos.Neos:NodeUri {
            node = ${q(node).parents('[instanceof Neos.NodeTypes:Page]').get(0)}
            absolute = true
        }
        @process.contentElementWrapping >
    }

    latest = ${q(site).find('[instanceof Neos.NeosIo:Post]').slice(0, 6).sort('datePublished', 'DESC').get()}
}

This file has been truncated. show original

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Resources/Private/Fusion/NodeTypes/PostArchive.fusion

prototype(Neos.NeosIo:PostArchive) >
prototype(Neos.NeosIo:PostArchive) < prototype(Flowpack.Listable:Listable) {
    @context.listClass = 'u-resetList siteWrapper siteWrapper--small'
    @context.itemClass = 'u-mb1/1'
    @context.sortProperty = '_index'
    @context.sortOrder = 'ASC'
    @context.itemsPerPage = 15
    collection = ${q(site).find('[instanceof Neos.NeosIo:Post]').get()}

    @cache {
        mode = 'cached'
        entryIdentifier {
            node = ${node}
        }
        entryTags {
            1 = ${'NodeType_Neos.NeosIo:Post'}
            2 = ${'Node_' + node.identifier}
        }
        maximumLifetime = 3600
    }

This file has been truncated. show original

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Resources/Private/Fusion/NodeTypes/PostFeatured.fusion

prototype(Neos.NeosIo:PostFeatured) >
prototype(Neos.NeosIo:PostFeatured) < prototype(Neos.NeosIo:Stage) {
    @context.post = ${q(node).property('blogPost')}

    isContentTextInverted = true
    isContentExtraPadded = false

    backgroundImage = ${q(post).property('image')}
    backgroundShadePercentage = 60
    backgroundColor = ${q(post).property('image') ? 'dark' : 'primary'}

    contents = Neos.Fusion:Template {
        templatePath = 'resource://Neos.NeosIo/Private/Templates/NodeTypes/PostFeatured.html'
        post = ${post}
        button = Neos.NeosIo:Button {
            link = Neos.Neos:NodeUri {
                node = ${post}
                absolute = true
            }
            buttonLabel = 'Read more'

This file has been truncated. show original

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Resources/Private/Fusion/NodeTypes/PostRss.fusion

postRss = Neos.Fusion:Http.Message {
    feed = Neos.Fusion:Template {
        templatePath = 'resource://Neos.NeosIo/Private/Templates/FusionObjects/PostRss.xml'
        posts = ${q(site).find('[instanceof Neos.NeosIo:Post]').sort('datePublished').slice(0, 20).get()}
        site = ${site}
        @cache {
            mode = 'cached'

            entryIdentifier {
                identifier = 'postRss'
            }

            entryTags {
                1 = ${'NodeType_Neos.NeosIo:Post'}
            }
        }
    }

    httpResponseHead.headers.Content-Type = 'application/xml'
}

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Resources/Private/Fusion/Documents/Page/Post.ts2

prototype(Neos.NeosIo:Post.Document) < prototype(Neos.NeosIo:DefaultPage) {
    head {
        @context.metaDescription = ${String.crop(String.stripTags(q(node).property('summary')) ? String.stripTags(q(node).property('summary')) : q(node).property('metaDescription'), 152, '...')}

        metaDescriptionTag {
            attributes.content = ${metaDescription}
            @if.isNotBlank = ${!String.isBlank(metaDescription)}
        }

        twitterCard = Neos.Fusion:Array {
            @if.isEnabledBlank = 1
            @if.isEnabled = 1

            cardTypeTag.attributes.content = 'summary'

            cardTitleTag {
                attributes.content = ${String.crop(String.stripTags(q(node).property('title')), 67, '...')}
                @if.isNotBlank = 1
            }

This file has been truncated. show original

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Resources/Private/Templates/NodeTypes/Post.html

{namespace neos=Neos\Neos\ViewHelpers}{namespace media=Neos\Media\ViewHelpers}{namespace ts=Neos\Fusion\ViewHelpers}
<article>
	<header>
		<neos:contentElement.wrap node="{node}">
			<neos:contentElement.editable property="title" tag="h1" additionalAttributes="{itemprop: 'title'}" class="u-alignCenter" />

			<neos:contentElement.editable property="summary" tag="p" class="u-alignCenter" additionalAttributes="{itemprop: 'description'}"/>
			<p class="u-alignCenter u-microCopy">
				<time datetime="{datePublished -> f:format.date(format: 'c')}" itemprop="datePublished">{datePublished
					-> f:format.date(localeFormatType: 'date', forceLocale: true)}
				</time>
				<f:if condition="{author}">
					– Written by
					<span itemprop="author" itemscope="" itemtype="https://schema.org/Person"><span itemprop="name">{author}</span></span>
				</f:if>
				<f:if condition="{image}">
					<meta itemprop="image" content="{media:uri.image(image: image, maximumWidth: 720, maximumHeight: 500, allowCropping: 1, allowUpScaling: 1)}"/>
				</f:if>
			</p>

This file has been truncated. show original

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Resources/Private/Templates/NodeTypes/PostFeatured.html

{namespace neos=Neos\Neos\ViewHelpers}
<neos:link.node node="{post}" class="u-linkReset u-mb1/1 u-cf">
    <div>{post.properties.datePublished -> f:format.date(localeFormatType: 'date', forceLocale: true)}</div>
    <h3 class="h1 u-w11/12 u-mb0">{post.properties.title -> f:format.stripTags()}</h3>
    <p class="u-w9/12 u-mt1/2">{post.properties.summary -> f:format.raw()}</p>
</neos:link.node>
{button -> f:format.raw()}

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Resources/Private/Templates/FusionObjects/PostRss.xml

{namespace neos=Neos\Neos\ViewHelpers}<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
	<channel>
		<title>Neos - Feed</title>
		<link><neos:uri.node node="{site}" format="html" absolute="1" /></link>
		<description>Neos blog posts</description>
		<language>en</language>
		<lastBuildDate>{f:format.date(date: 'now', format: 'D, d M Y H:i:s O')}</lastBuildDate>
		<f:if condition="{f:count(subject: posts)} > 0"><f:for each="{posts}" as="post"><item>
			<title>{post.properties.title -> f:format.stripTags()}</title>
			<link><neos:uri.node node="{post}" format="html" absolute="1" /></link>
			<description><f:format.stripTags value="{post.properties.summary -> f:format.stripTags()}" /></description>
			<pubDate>{f:format.date(date: post.properties.datePublished, format: 'D, d M Y H:i:s O')}</pubDate>
			<guid>{post.identifier}</guid>
		</item></f:for></f:if>
	</channel>
</rss>

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Resources/Private/Templates/FusionObjects/PostShort.html

{namespace neos=Neos\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
<neos:link.node node="{node}" class="u-linkReset">
    <div class="u-microCopy">{datePublished -> f:format.date(localeFormatType: 'date', forceLocale: true)}</div>
    <h3 class="u-mt0 u-mb1/2 u-brandColor-primary">{title -> f:format.stripTags()}</h3>

    <div class="media">
        <f:if condition="{image}">
            <f:if condition="{neos:rendering.inBackend()}">
                <f:then>
                    <img
                            alt="{title -> f:format.stripTags()}"
                            class="media__img media__img--scaled u-mb1/1"
                            src="{media:uri.image(image: image, width: 1000, height: 250, allowCropping: true)}"
                            width="{image.width}"
                            height="{image.height}"
                            srcset="
                                    {media:uri.image(image: image, width: 1000, height: 250, allowCropping: true)} 1920w,
                                    {media:uri.image(image: image, width: 700, height: 175, allowCropping: true)} 1280w,
                                    {media:uri.image(image: image, width: 400, height: 100, allowCropping: true)} 658w,

This file has been truncated. show original

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Configuration/NodeTypes.Post.yaml


'Neos.NeosIo:Post':
  superTypes:
    'Neos.NodeTypes:Page': true
    'Neos.NodeTypes:ImageMixin': true
    'Neos.NodeTypes:ImageCaptionMixin': true
    'Neos.Seo:TitleTagMixin': true
    'Neos.Seo:TwitterCardMixin': true
    'Neos.Seo:CanonicalLinkMixin': true
    'Neos.Seo:OpenGraphMixin': true
    'Neos.Seo:XmlSitemapMixin': true
    'Neos.NeosIo:KeyVisualMixin': true
  ui:
    label: Post
    icon: icon-newspaper-o
    inspector:
      groups:
        options:
          label: Options
          position: 20

This file has been truncated. show original

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Configuration/NodeTypes.PostArchive.yaml


'Neos.NeosIo:PostArchive':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: 'Post archive'
    icon: icon-newspaper
    group: plugins

github.com

neos/Neos.NeosIo/blob/master/Packages/Sites/Neos.NeosIo/Configuration/NodeTypes.PostFeatured.yaml


'Neos.NeosIo:PostFeatured':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: 'Post featured'
    icon: icon-star
    group: plugins
    inspector:
      groups:
        properties:
          label: 'Featured Post properties'
          position: 1
  properties:
    blogPost:
      type: reference
      ui:
        label: 'Choose blog post to link'
        reloadIfChanged: true
        inspector:

This file has been truncated. show original

Be aware that it’s using the version prior to the refactoring @dimaip mentioned.

Martelinho · May 5, 2017, 4:02pm

Of course I am.

Will have a look at it next days. And thanks for the version hint.

dimaip · May 11, 2017, 7:07am

Hey @Martelinho, I tried to confirm what @david.sporer had said with a video on the subject https://www.youtube.com/watch?v=Q44mpQX8eWU

Martelinho · May 24, 2017, 7:11pm

Hi @dimaip , thank you so much for the tutorial. Great guy, doing such things btw.

I didn’t have that FusionBP project installed so I first tried to make the extensions within the official demo project. That didn’t work and after reading some docs and watching another tutorial from you I know why. So I downloaded the FusionBP project from Github and installed the package into my NEOS installation.

I can understand everything you show. But one thing just doesn’t work. In News.LatestList.fusion you inherit from Neos.Fusion.Collection which doesn’t exist even after installing the FusionBP project. As it is called collection I tried to inherit from Neos.Neos:ContentCollection which also doesn’t work (Exception “No content collection of type Neos.Neos:ContentCollection could be found in the current node…”).
Do you have a hint what is missing or going wrong?

And just a small other question. You mention that the official demo project will come soon with changes resulting from the FusionBP project. Is there a rough estimation when this new demo project will be released?

dimaip · May 25, 2017, 8:23am

Hey, it should be Neos.Fusion:Collection. It’s a native Fusion object.

The new demo site is here: TASK: Refactor Fusion to more best practices by dfeyer · Pull Request #27 · neos/Neos.Demo · GitHub

FusionBP is just an example project, you don’t need to install it as a whole, just learn some ideas for organizing your code and write your own site package from scratch.

Martelinho · May 25, 2017, 6:34pm

F…antastic.
Ran into this problem couple of times since I’m not used to this notation for objects. Caused me some problems and took me some hours but in every other cases I found the problem after some concentrated checks. Sorry for that question.

Thanx. I will also have a look at this new demo site.

Martelinho · May 29, 2017, 8:24pm

Ok, time to say thank you to all supporters in this thread.

Special thanks to @dimaip for your tutorial which guided me through important steps of my very beginning. I absolutely agree to you that the invested time will pay off. I partially disagree about the opinion that universal packages are not gainful. I think kind of such packages could upgrade the whole Neos system to a more powerful tool even for experienced users. This would cost some time but could also pay off in the long run. Can’t explain this shortly here but plan to write a thread which describes in detail what I mean.