How to start developing NodeTypes for News

Community Newcomer's Corner
1

Hello together,

i’m aware this topic is quite often discussed, and also the video from Dmitri was quite interesting. (See here).

But i’m wondering how this is being done is 2023. I’ve done and created quite some simple NodeTypes, kinda understood how it works but never went any deeper as having some Collections and nested elements. To formulate this question to the forum probably helps me already to understand it more by myself :smiley:

My basic issue is trying to understand how i can develop a simple list of news in sence of the following navigational structure:

-- 1. Home
--- 2. News
--- 3. NewsElementWithNiceURI

1. Home: Just the start page :slight_smile:

2. News: Page where i want to add the news elements as a teaser, just some properties as e.g. title, date, some text and a picture. I thought about a filter of elements as e.g. using something like ${q(site).find('[instanceof Vendor.Page:NewsItem]').get()} and Looping them trough Neos.Fusion:Loop

3. NewsElementWithNiceURI: Based on the title of the news, the URL is generated. Holds the detail part of the news with some more properties as e.g. text and more pictures.

The part(s) where i’m struggling at the most:

  1. How do i enable a pagination for the News, where i limit the elements on each page to e.g. 5 items.
  2. How/Where do i structure/store the News Items. As they should not appear in any Menu, but just as a link in my News List.
  3. I’m using afx, so the examples from the linked thread (from 2017) are not that much helpful. I’m looking forward for some more modern examples, also for a possible compatibility for the upcoming neos versions.

Any resources, hints or recommendations on how to start are helpful. I want to avoid using ready made packages, as i think it is not to complex to archive this (and i want to prevent having more dependencies).

Thank you a lot already! :slight_smile:

Greetings!

2

Hi did you look at the various blog and news packages in the community?

Also the latest Neos Demo has that exact example https://github.com/neos/Neos.Demo/tree/8.3/NodeTypes/Document/Blog :slightly_smiling_face:

2 Likes
3

Hey Sebastian! Thanks a lot for that, it looks almost perfect and i think this is a good start for me. I just implemented it that way with some rough copy paste :slight_smile:

Here i can see that there is a limit of 10 Posts. What i’ve tried is adding 4 News items and then set the limit to two, but it seems like there is no pagination. Do you know any reference on how to implement that?

4

Why do you need pagination for a list of 4 items? ^^

Pagination is as always complex. Some people solve it with a react rendered mini app which renders the NodeTypes (this requires you of course to write the respective endpoints)

Or maybe GitHub - Flowpack/Flowpack.Listable: Neos package that helps you to render lists of things helps too? (Never used it ^^)

1 Like
5

Hey Marc! :slight_smile:

4 Items is just an example, there could be 100+ :wink:

I didn’t knew it is that complex, but i will try to use a combination between the current setup and the Listable. But i’m a bit lost right now as i can’t figure out how to store the News (Which is basically the copy from the Neos.Demo Blog) into the correct part/path of my template. All the news currently are on top of it all, but not inside.

E.g.:

image
image689×538 7.29 KB

I think this has something to do with either with where i’m including it from (1) or with the overwriting of content (2).

Basically my setup looks like:

Resources/Private/Fusion/Document/Page.fusion:

prototype(Vendor.Ven:Document.AbstractPage) < prototype(Neos.Neos:Page)

Resources/Private/Fusion/Document/AbstractPage.fusion:

prototype(Vendor.Ven:Document.Page) < prototype(Vendor.Ven:Document.AbstractPage) {

Inside, i’m having mostly Stylesheets/Javascripts but more important:

  body = Vendor.Ven:Component.Template.Default {
    @context.node = ${this.node}

    # Define template properties
    menu = Neos.Neos:Menu
    content = Neos.Fusion:Component {
      main = Neos.Neos:PrimaryContent {
        nodePath = 'main'
      }

      renderer = afx`
        {props.main}
      `
    }
}

Resources/Private/Fusion/Component/Template/Default/Default.fusion:

prototype(Vendor.Ven:Component.Template.Default) < prototype(Neos.Fusion:Component) {
  content = ''

  renderer = afx`
    <header>
      <Vendor.Ven:Header />  
    </header>
    <Vendor.Ven:BreadCrumbs />
    <section>
	  {props.content}
    </section>
    <footer>
      <Vendor.Ven:Footer />  
    </footer>
  `
}

And the News(Blog) i’ve implemented that way:

News.yaml:

##
# Document NodeType "Blog" which can have "BlogPositings"
# based on https://schema.org/Blog
#
'Vendor.Ven:Document.News':
  final: true
  superTypes:
    'Vendor.Ven:Document.Page': true
  ui:
    label: i18n
    icon: 'newspaper'
    position: 300
    group: special
    help:
      message: 'A blog'
  constraints:
    nodeTypes:
      # Not all SubPage documents can be placed below
      'Vendor.Ven:Constraint.Document.SubPage': false
      # but BlogPostings are explicitly allowed
      'Vendor.Ven:Document.NewsPosting': true

News.fusion (from here):

prototype(Vendor.Ven:Document.News) < prototype(Vendor.Ven:Document.Page) { }

It’s the same appearing with the News(Blog)Posting, but they kinda have the same behaviour and it is already enough spam from me :face_with_peeking_eye:

All the hierarchy and encapsulating brought me some headache already, i hope two or n eyes see more as i do right now :see_no_evil: